:root {
  --paper: #f7f7f1;
  --paper-2: #efefe8;
  --white: #ffffff;
  --ink: #111511;
  --ink-2: #202720;
  --muted: #697168;
  --muted-2: #899188;
  --line: #dadfd6;
  --line-dark: #c6cdc3;
  --lime: #d9ff5b;
  --lime-2: #c8ef45;
  --lime-soft: #f1ffd0;
  --green: #2f7143;
  --green-soft: #e8f5e9;
  --red: #d94c32;
  --red-soft: #fff0eb;
  --amber: #ab6b12;
  --amber-soft: #fff5dd;
  --blue: #3867bb;
  --blue-soft: #ecf2ff;
  --purple: #7054b7;
  --purple-soft: #f1edff;
  --shadow-xs: 0 1px 2px rgba(17, 21, 17, 0.06);
  --shadow-sm: 0 8px 24px rgba(17, 21, 17, 0.07);
  --shadow-md: 0 24px 70px rgba(17, 21, 17, 0.11);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --sidebar: 264px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.modal-open,
body.mobile-nav-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

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

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

img,
svg {
  display: block;
}

svg.icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--ink);
  background: var(--lime);
}

:focus-visible {
  outline: 3px solid rgba(79, 115, 205, 0.45);
  outline-offset: 3px;
}

.screen h1:focus,
.app-screen h1:focus {
  outline: none;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  color: white;
  background: var(--ink);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.prototype-ribbon {
  position: fixed;
  z-index: 1000;
  right: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(17, 21, 17, 0.9);
  box-shadow: var(--shadow-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(217, 255, 91, 0.15);
}

.shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.shell-narrow {
  width: min(1030px, calc(100% - 48px));
  margin-inline: auto;
}

.screen {
  min-height: calc(100vh - 76px);
}

.site-header {
  position: sticky;
  z-index: 500;
  top: 0;
  height: 76px;
  border-bottom: 1px solid rgba(218, 223, 214, 0.8);
  background: rgba(247, 247, 241, 0.9);
  backdrop-filter: blur(14px);
}

.header-inner {
  width: min(1240px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.brand-mark {
  width: 27px;
  height: 27px;
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

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

.button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink);
  background: var(--white);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms ease, border-color 160ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:active:not(:disabled) {
  transform: translateY(0);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.button-small {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 9px;
  font-size: 12px;
}

.button-large {
  min-height: 54px;
  padding-inline: 24px;
  border-radius: 12px;
  font-size: 14px;
}

.button-full {
  width: 100%;
}

.button-accent {
  border-color: var(--lime-2);
  background: var(--lime);
  box-shadow: 0 7px 0 #a6c927, 0 12px 28px rgba(113, 145, 20, 0.16);
}

.button-accent:hover:not(:disabled) {
  background: #e2ff82;
  box-shadow: 0 8px 0 #a6c927, 0 14px 30px rgba(113, 145, 20, 0.2);
}

.button-accent:active:not(:disabled) {
  box-shadow: 0 3px 0 #a6c927, 0 7px 18px rgba(113, 145, 20, 0.16);
  transform: translateY(4px);
}

.button-dark {
  color: white;
  background: var(--ink);
  box-shadow: 0 8px 18px rgba(17, 21, 17, 0.16);
}

.button-dark:hover {
  background: #293029;
}

.button-secondary {
  border-color: var(--line);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.button-secondary:hover {
  border-color: var(--line-dark);
  background: #fbfcf9;
}

.button-ghost {
  border-color: var(--line);
  background: transparent;
}

.button-danger-ghost {
  border-color: #efc3b9;
  color: #a73621;
  background: #fff8f6;
}

.text-button,
.back-link {
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
  font-weight: 750;
}

.text-button:hover,
.back-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.centered-button {
  margin-inline: auto;
}

.journey-progress {
  flex: 1;
  max-width: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-progress > i {
  width: 56px;
  height: 1px;
  margin-inline: 10px;
  background: var(--line-dark);
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted-2);
  white-space: nowrap;
}

.progress-step span {
  width: 25px;
  height: 25px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  font-size: 10px;
  font-weight: 800;
}

.progress-step em {
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.progress-step.active,
.progress-step.complete {
  color: var(--ink);
}

.progress-step.active span {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--lime);
}

.progress-step.complete span {
  border-color: var(--ink);
  color: white;
  background: var(--ink);
}

.journey-exit {
  flex: 0 0 auto;
}

.hero {
  min-height: 680px;
  padding-block: 86px 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: 80px;
}

.hero-copy {
  max-width: 650px;
}

.eyebrow,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4d574d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime-2);
  box-shadow: 0 0 0 4px rgba(200, 239, 69, 0.22);
}

.hero h1 {
  max-width: 690px;
  margin: 20px 0 24px;
  font-size: clamp(48px, 5.3vw, 78px);
  font-weight: 700;
  letter-spacing: -0.069em;
  line-height: 0.98;
}

.hero-lede {
  max-width: 625px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.url-form > label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
}

.url-input-row {
  position: relative;
  max-width: 680px;
  display: flex;
  gap: 10px;
}

.input-prefix {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 16px;
  color: var(--muted-2);
  transform: translateY(-50%);
}

.url-input-row input {
  min-width: 0;
  height: 58px;
  flex: 1;
  padding: 0 18px 0 45px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  outline: none;
  background: white;
  box-shadow: var(--shadow-xs);
  font-size: 15px;
  font-weight: 600;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.url-input-row input:focus {
  border-color: #7e9251;
  box-shadow: 0 0 0 4px rgba(182, 214, 75, 0.18);
}

.url-input-row .button {
  height: 52px;
  min-width: 205px;
  margin-top: 1px;
}

.field-error,
.consent-error {
  min-height: 18px;
  margin: 5px 0 0;
  color: var(--red);
  font-size: 11px;
  font-weight: 650;
}

.form-trust {
  margin: 8px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.form-trust span {
  color: var(--green);
}

.hero-copy > .text-button {
  color: var(--muted);
  font-size: 11px;
}

.hero-proof {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

.proof-browser {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 19px;
  background: white;
  box-shadow: var(--shadow-md);
  transform: rotate(1.25deg);
}

.browser-top {
  height: 43px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f2f3ef;
}

.browser-top > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c7cbc3;
}

.browser-top div {
  height: 24px;
  margin-left: 8px;
  padding-inline: 13px;
  border: 1px solid #d9ddd4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex: 1;
  color: #848b82;
  background: white;
  font-size: 8px;
}

.proof-body {
  padding: 37px 38px 34px;
}

.proof-label {
  width: fit-content;
  margin-bottom: 25px;
  padding: 6px 9px;
  border-radius: 6px;
  color: #a73521;
  background: var(--red-soft);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.proof-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--red);
  background: var(--red-soft);
  font-size: 23px;
}

.proof-body h2 {
  margin: 18px 0 12px;
  font-size: 28px;
  letter-spacing: -0.045em;
  line-height: 1.16;
}

.proof-body > p {
  margin: 0 0 23px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.proof-evidence {
  padding: 13px 15px;
  border: 1px solid #f1c9c0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fffafa;
  font-size: 9px;
}

.proof-evidence span {
  color: var(--muted);
}

.proof-evidence strong {
  color: var(--red);
}

.proof-source {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.proof-note {
  position: absolute;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: white;
  box-shadow: var(--shadow-sm);
  font-size: 9px;
  font-weight: 750;
}

.proof-note .icon {
  color: #6c8118;
}

.note-one {
  top: 27%;
  right: -36px;
}

.note-two {
  bottom: 15%;
  left: -44px;
}

.trust-strip {
  border-block: 1px solid var(--line);
  background: #f1f2ec;
}

.trust-strip-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  color: #6a7269;
  font-size: 10px;
}

.trust-strip-inner > span {
  font-weight: 500;
}

.trust-strip-inner strong {
  color: #4f574e;
  font-weight: 750;
}

.trust-strip-inner i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #abb2a8;
}

.process-section {
  padding-block: 118px 125px;
}

.section-heading {
  max-width: 730px;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-heading h2,
.sample-copy h2,
.pricing-callout h2 {
  margin: 13px 0 15px;
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.section-heading p,
.sample-copy > p,
.pricing-callout p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.process-grid {
  margin-top: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.process-card {
  position: relative;
  min-height: 300px;
  padding: 31px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.56);
}

.process-card.featured {
  background: white;
  box-shadow: var(--shadow-sm);
}

.step-number {
  position: absolute;
  top: 25px;
  right: 28px;
  color: #a3aaa0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.step-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 45px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--paper);
  font-size: 22px;
}

.featured .step-icon {
  border-color: #d1ea7f;
  background: var(--lime-soft);
}

.process-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.035em;
}

.process-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.sample-section {
  padding-block: 110px;
  color: white;
  background: var(--ink);
}

.sample-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
  align-items: center;
  gap: 110px;
}

.sample-copy .kicker {
  color: var(--lime);
}

.sample-copy > p {
  color: #aeb7ae;
}

.check-list {
  margin: 28px 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px 18px;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d8ddd7;
  font-size: 11px;
  font-weight: 650;
}

.check-list li .icon {
  color: var(--lime);
}

.sample-copy .button-dark {
  border-color: #465046;
  color: var(--ink);
  background: var(--lime);
}

.coverage-panel {
  padding: 30px;
  border: 1px solid #3b443c;
  border-radius: 22px;
  background: #1a201a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.coverage-top {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tiny-label {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coverage-top .tiny-label {
  color: #899389;
}

.coverage-top strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
}

.score-ring {
  width: 50px;
  height: 50px;
  border: 5px solid #495345;
  border-top-color: var(--lime);
  border-right-color: var(--lime);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--lime);
  font-size: 9px;
  font-weight: 800;
  transform: rotate(10deg);
}

.coverage-list {
  border-top: 1px solid #313a32;
}

.coverage-list > div {
  min-height: 49px;
  border-bottom: 1px solid #303931;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 6px;
  color: #dce1dc;
  font-size: 10px;
}

.coverage-list .icon {
  color: #8c978c;
}

.coverage-list em {
  color: var(--lime);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.pricing-callout {
  min-height: 290px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.pricing-callout > div {
  max-width: 700px;
}

.pricing-callout h2 {
  font-size: clamp(30px, 3.8vw, 45px);
}

.pricing-callout .button {
  min-width: 190px;
}

.site-footer {
  padding-block: 40px;
  color: #d5dcd5;
  background: var(--ink);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
}

.brand-light .brand-mark {
  color: var(--lime);
}

.footer-inner p {
  margin: 0;
  color: #7f897f;
  font-size: 10px;
}

.footer-inner nav {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  color: #9ba59b;
  font-size: 10px;
}

.journey-screen {
  min-height: calc(100vh - 76px);
  padding: 66px 24px 95px;
}

.journey-card {
  width: min(620px, 100%);
  margin-inline: auto;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.journey-card h1,
.journey-heading h1,
.analysis-heading h1,
.result-intro h1,
.checkout-heading h1 {
  margin: 13px 0 13px;
  font-size: clamp(34px, 4.5vw, 48px);
  letter-spacing: -0.06em;
  line-height: 1.08;
}

.journey-card > p,
.journey-heading > p,
.analysis-heading > p,
.result-intro > p,
.checkout-heading > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.scan-card {
  margin-top: 15px;
}

.scan-orbit {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 26px;
  border: 1px dashed #cad0c5;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.scan-orbit::before {
  position: absolute;
  inset: 15px;
  border: 1px solid #e2e6de;
  border-radius: 50%;
  content: "";
}

.scan-site-icon {
  z-index: 1;
  width: 56px;
  height: 56px;
  border: 1px solid #c9df76;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: var(--lime-soft);
  font-size: 24px;
}

.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--lime-2);
}

.dot-a {
  top: 10px;
  left: 20px;
}

.dot-b {
  right: 7px;
  bottom: 30px;
}

.scan-progress {
  height: 5px;
  margin: 30px 0 22px;
  overflow: hidden;
  border-radius: 10px;
  background: #e8ebe5;
}

.scan-progress-bar {
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: var(--lime-2);
  transition: width 450ms var(--ease);
}

.scan-checks {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  text-align: left;
}

.scan-checks > div {
  min-height: 52px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 650;
}

.scan-checks > div:last-child {
  border-bottom: 0;
}

.scan-checks em {
  color: var(--muted-2);
  font-size: 9px;
  font-style: normal;
}

.check-state {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
}

.scan-checks .is-running .check-state {
  border-color: #9ebd2c;
}

.scan-checks .is-running .check-state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8ba921;
  animation: pulse 1s ease infinite;
}

.scan-checks .is-done .check-state {
  border-color: var(--green);
  background: var(--green);
}

.scan-checks .is-done .check-state::after {
  width: 6px;
  height: 3px;
  border-bottom: 1.5px solid white;
  border-left: 1.5px solid white;
  content: "";
  transform: rotate(-45deg) translateY(-1px);
}

.scan-checks .is-done em {
  color: var(--green);
}

.simulation-note {
  margin-top: 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted-2) !important;
  font-size: 9px;
}

.simulation-note.scan-error-note {
  flex-wrap: wrap;
  color: #a83724 !important;
}

.simulation-note.scan-error-note .text-button {
  min-height: auto;
  margin-left: 3px;
  color: #a83724;
  font-size: 9px;
}

.safety-findings {
  margin: 24px 0 0;
  padding: 22px;
  border: 1px solid #efb0aa;
  border-radius: 18px;
  background: #fff7f5;
}

.safety-heading,
.safety-finding {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.safety-heading > svg {
  width: 22px;
  color: #b83028;
}

.safety-heading div,
.safety-finding div {
  display: grid;
  gap: 4px;
}

.safety-heading span,
.safety-finding span,
.safety-finding p {
  color: var(--muted);
}

.safety-finding {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #f0cfca;
}

.safety-finding h3,
.safety-finding p {
  margin: 0;
}

.safety-live-finding {
  margin-top: 18px;
  box-shadow: none;
}

.safety-live-finding .finding-main h2 {
  font-size: 22px;
}

.confirm-wrap,
.analysis-layout {
  width: min(860px, 100%);
  margin-inline: auto;
}

.journey-heading,
.analysis-heading {
  max-width: 730px;
  margin: 0 auto 34px;
  text-align: center;
}

.confirm-form {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.inference-banner {
  min-height: 72px;
  padding: 13px 20px;
  border-bottom: 1px solid #ddeaab;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8ffe5;
}

.inference-icon {
  width: 38px;
  height: 38px;
  border: 1px solid #d1e68d;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #607614;
  background: white;
}

.inference-banner > div {
  flex: 1;
}

.inference-banner strong,
.inference-banner span {
  display: block;
}

.inference-banner strong {
  font-size: 12px;
}

.inference-banner > div > span {
  color: #708066;
  font-size: 9px;
}

.confidence-pill {
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid #cae577;
  border-radius: 100px;
  color: #536a08;
  background: white;
  font-size: 8px;
  font-weight: 750;
}

.form-section {
  padding: 32px 34px 35px;
  border-bottom: 1px solid var(--line);
}

.form-section-title {
  margin-bottom: 23px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.form-section-title > span,
.checkout-section-heading > span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--lime);
  font-size: 9px;
  font-weight: 800;
}

.form-section-title h2,
.checkout-section-heading h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.025em;
}

.form-section-title p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.form-grid {
  display: grid;
  gap: 15px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid + .form-grid {
  margin-top: 16px;
}

.field-label {
  display: block;
  color: #3a423a;
  font-size: 10px;
  font-weight: 750;
}

.field-label > span {
  color: var(--muted-2);
  font-weight: 500;
}

.text-input {
  width: 100%;
  min-height: 46px;
  margin-top: 7px;
  padding: 11px 13px;
  border: 1px solid var(--line-dark);
  border-radius: 9px;
  outline: none;
  background: white;
  font-size: 12px;
  font-weight: 560;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

textarea.text-input {
  min-height: 82px;
  resize: vertical;
  line-height: 1.55;
}

select.text-input {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #6d756c 50%), linear-gradient(135deg, #6d756c 50%, transparent 50%);
  background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.text-input:focus {
  border-color: #859948;
  box-shadow: 0 0 0 3px rgba(200, 239, 69, 0.18);
}

.goal-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.goal-option {
  min-height: 88px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  background: #fcfcfa;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.goal-option:hover {
  border-color: #b5bfab;
}

.goal-option.selected {
  border-color: #aac833;
  background: #f8ffe2;
  box-shadow: inset 0 0 0 1px #c9e85d;
}

.goal-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.goal-option > .icon {
  grid-row: 1 / 3;
  color: var(--muted);
  font-size: 18px;
}

.goal-option.selected > .icon {
  color: #58700d;
}

.goal-option strong {
  align-self: end;
  font-size: 11px;
}

.goal-option em {
  align-self: start;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.outcome-candidates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.outcome-option {
  position: relative;
  min-height: 142px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: #fcfcfa;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.outcome-option:hover {
  border-color: #b5bfab;
}

.outcome-option.selected {
  border-color: #aac833;
  background: #f8ffe2;
  box-shadow: inset 0 0 0 1px #c9e85d;
}

.outcome-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.outcome-option:has(input:focus-visible) {
  outline: 3px solid rgba(79, 115, 205, 0.35);
  outline-offset: 2px;
}

.outcome-option-head {
  display: grid;
  grid-template-columns: 31px 1fr auto;
  align-items: center;
  gap: 9px;
}

.outcome-option-head > .icon {
  width: 31px;
  height: 31px;
  padding: 7px;
  border-radius: 9px;
  color: #566256;
  background: var(--paper-2);
}

.outcome-option.selected .outcome-option-head > .icon {
  color: #58700d;
  background: white;
}

.outcome-option-head > span {
  display: flex;
  flex-direction: column;
}

.outcome-option-head strong {
  font-size: 11px;
}

.outcome-option-head em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.confidence-label {
  padding: 4px 6px;
  border-radius: 100px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 7px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.confidence-label.medium {
  color: var(--amber);
  background: var(--amber-soft);
}

.outcome-evidence {
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 8px;
  list-style: none;
}

.outcome-evidence:empty {
  display: none;
}

.outcome-option:has(.outcome-evidence:empty) {
  min-height: 78px;
}

.outcome-evidence li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.outcome-evidence .icon {
  margin-top: 2px;
  color: var(--green);
}

.secondary-outcomes {
  margin: 19px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.custom-outcome-field {
  margin-top: 13px;
}

.secondary-outcomes legend {
  padding: 0;
  font-size: 10px;
  font-weight: 750;
}

.secondary-outcomes legend span {
  color: var(--muted);
  font-weight: 500;
}

.secondary-outcomes > p {
  margin: 3px 0 10px;
  color: var(--muted);
  font-size: 8px;
}

#secondary-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.secondary-option {
  position: relative;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--muted);
  background: white;
  font-size: 8px;
  font-weight: 650;
}

.secondary-option.selected {
  border-color: #aac833;
  color: var(--ink);
  background: #f8ffe2;
}

.secondary-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.secondary-option .icon {
  color: var(--green);
}

.compact-fields {
  max-width: 510px;
  margin-top: 18px;
}

.money-input {
  position: relative;
}

.money-input > span {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 13px;
  color: var(--muted);
  font-size: 12px;
}

.money-input .text-input {
  padding-left: 28px;
}

.sticky-actions {
  min-height: 78px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: #fbfcf9;
}

.sticky-actions > div {
  display: flex;
  align-items: center;
  gap: 15px;
}

.save-note {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 9px;
}

.connect-card {
  width: min(600px, 100%);
}

.google-lockup {
  width: fit-content;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
}

.google-lockup > .icon,
.flow-mini {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: white;
  box-shadow: var(--shadow-xs);
  font-size: 23px;
}

.google-lockup > .icon {
  padding: 10px;
}

.connector-line {
  width: 46px;
  height: 1px;
  background: var(--line-dark);
}

.flow-mini {
  color: var(--ink);
  background: var(--lime-soft);
}

.analysis-mode {
  margin: 25px 0 16px;
  padding: 15px;
  border: 1px solid #cfe17f;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  text-align: left;
  background: #f9ffe9;
}

.analysis-mode-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #526c0b;
  background: white;
}

.analysis-mode > div {
  flex: 1;
}

.analysis-mode strong {
  display: block;
  font-size: 11px;
}

.analysis-mode p {
  margin: 3px 0 0;
  color: #647059;
  font-size: 9px;
  line-height: 1.55;
}

.permission-list {
  margin: 0 0 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  list-style: none;
  text-align: left;
}

.permission-list li {
  min-height: 57px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.permission-list li:last-child {
  border-bottom: 0;
}

.permission-list > li > .icon {
  color: var(--muted);
  font-size: 17px;
}

.permission-list li span:last-child {
  display: flex;
  flex-direction: column;
}

.permission-list strong {
  font-size: 10px;
}

.permission-list em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.google-button {
  width: 100%;
  min-height: 52px;
  padding: 0 17px;
  border: 1px solid #b9c0b7;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  place-items: center;
  background: white;
  box-shadow: var(--shadow-xs);
  font-size: 12px;
}

.google-button::after {
  content: "";
}

.google-button:hover {
  border-color: #7f897e;
  background: #fbfcfa;
}

.google-button .icon {
  font-size: 20px;
}

.connect-card .centered-button {
  margin-top: 10px;
}

.connect-footnote {
  margin-top: 10px !important;
  color: var(--muted-2) !important;
  font-size: 9px;
}

.connect-card > .back-link {
  margin-top: 23px;
  color: var(--muted);
}

.account-card {
  width: min(570px, 100%);
}

.connected-badge {
  width: fit-content;
  margin: 0 auto 15px;
  padding: 7px 10px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 9px;
  font-weight: 750;
}

.account-option {
  margin-top: 27px;
  padding: 16px;
  border: 1px solid #a6bf4c;
  border-radius: 13px;
  display: grid;
  grid-template-columns: 44px 1fr 26px;
  align-items: center;
  gap: 12px;
  background: #faffea;
  text-align: left;
}

button.account-option {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#google-account-options {
  margin-top: 27px;
  display: grid;
  gap: 12px;
}

#google-account-options .account-option {
  margin-top: 0;
}

button.account-option:not(.selected) {
  border-color: var(--line);
  background: var(--white);
}

button.account-option:not(.selected) .radio-mark {
  border: 1px solid var(--line-dark);
  background: transparent;
}

.account-empty {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: var(--paper-2);
}

.account-avatar,
.business-avatar {
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: white;
  background: #253425;
  font-size: 10px;
  font-weight: 800;
}

.account-avatar {
  width: 44px;
  height: 44px;
}

.account-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.account-copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy em,
.account-copy small {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.radio-mark {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: var(--ink);
  font-size: 11px;
}

.account-snapshot {
  margin: 10px 0 20px;
  padding: 13px 4px;
  border-block: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.account-snapshot > div {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-snapshot > div:last-child {
  border-right: 0;
}

.account-snapshot span {
  color: var(--muted);
  font-size: 8px;
}

.account-snapshot strong {
  font-size: 10px;
}

.account-target-confirmation {
  margin: 0 0 20px;
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.account-target-confirmation > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 500;
}

.account-target-confirmation > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.account-target-confirmation > div > strong {
  min-width: 58px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
  background: var(--paper);
  font-size: 10px;
}

.account-target-confirmation small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 400;
  line-height: 1.5;
}

.good-text {
  color: var(--green);
}

.account-card .simulation-note {
  margin-bottom: 0 !important;
}

.analysis-layout {
  max-width: 760px;
}

.analysis-card {
  min-height: 360px;
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 23px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: 35px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.analysis-visual {
  position: relative;
  display: grid;
  place-items: center;
}

.radar {
  width: min(100%, 220px);
  color: #dde3d9;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.radar-sweep {
  fill: rgba(200, 239, 69, 0.23);
  stroke: #b2d32e;
  transform-origin: 110px 110px;
  animation: radar 3.4s linear infinite;
}

.radar-point {
  fill: var(--red);
  stroke: white;
  stroke-width: 2;
}

.radar-point.p2 {
  fill: var(--amber);
}

.radar-point.p3 {
  fill: var(--blue);
}

.analysis-score {
  position: absolute;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-content: center;
  background: white;
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.analysis-score strong {
  display: block;
  font-size: 17px;
  letter-spacing: -0.04em;
}

.analysis-score span {
  color: var(--muted);
  font-size: 7px;
}

.analysis-checklist {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.analysis-checklist > div {
  min-height: 48px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 21px 1fr;
  align-items: center;
  gap: 8px;
}

.analysis-checklist > div:last-child {
  border-bottom: 0;
}

.analysis-checklist > div > span:first-child {
  width: 17px;
  height: 17px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
}

.analysis-checklist > div.done > span:first-child {
  border-color: var(--green);
  display: grid;
  place-items: center;
  color: white;
  background: var(--green);
  font-size: 9px;
}

.mini-spinner {
  border: 2px solid #dfe4da !important;
  border-top-color: #87a718 !important;
  animation: spin 0.8s linear infinite;
}

.analysis-checklist p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.analysis-checklist strong {
  font-size: 10px;
}

.analysis-checklist em {
  color: var(--muted-2);
  font-size: 8px;
  font-style: normal;
}

.analysis-message {
  width: fit-content;
  margin: 18px auto 0;
  padding: 9px 13px;
  border: 1px solid #d8e9a0;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #54620e;
  background: #f7ffe3;
  font-size: 9px;
  font-weight: 650;
}

.analysis-note {
  margin: 11px 0 0;
  color: var(--muted-2);
  font-size: 9px;
  text-align: center;
}

.result-screen {
  padding: 66px 0 110px;
}

.result-intro {
  max-width: 700px;
  margin: 0 auto 38px;
  text-align: center;
}

.live-account-controls {
  margin: -20px 0 24px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.live-account-controls > span,
.live-account-controls > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-account-controls > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
}

.live-account-controls > span .icon {
  color: #607221;
  font-size: 13px;
}

.result-celebration {
  width: 48px;
  height: 48px;
  margin: 0 auto 17px;
  border: 1px solid #cfe37b;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #5a6e13;
  background: var(--lime-soft);
  font-size: 21px;
}

.finding-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 23px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.finding-header {
  min-height: 62px;
  padding: 0 27px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fbfcf9;
}

.finding-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.severity,
.confidence,
.state-pill {
  width: fit-content;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.severity > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.severity.critical {
  color: #a83724;
  background: var(--red-soft);
}

.severity.critical > span {
  background: var(--red);
}

.severity.warning {
  color: #8d5d13;
  background: var(--amber-soft);
}

.severity.warning > span {
  background: #d28a22;
}

.severity.opportunity {
  color: #315896;
  background: var(--blue-soft);
}

.severity.opportunity > span {
  background: var(--blue);
}

.confidence {
  border: 1px solid var(--line);
  color: var(--muted);
  background: white;
}

.finding-id {
  color: var(--muted-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.finding-main {
  padding: 37px 36px 30px;
  display: flex;
  gap: 18px;
}

.finding-title-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--red);
  background: var(--red-soft);
  font-size: 23px;
}

.finding-main h2 {
  margin: 7px 0 8px;
  font-size: 28px;
  letter-spacing: -0.045em;
  line-height: 1.18;
}

.finding-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.evidence-block {
  margin: 0 36px 24px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fafbf8;
}

.evidence-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.evidence-heading > .icon {
  color: var(--muted);
  font-size: 19px;
}

.evidence-heading div {
  display: flex;
  flex-direction: column;
}

.evidence-heading strong {
  font-size: 11px;
}

.evidence-heading span {
  color: var(--muted);
  font-size: 8px;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

.evidence-grid > div {
  min-height: 70px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: white;
}

.evidence-grid > div.wide {
  grid-column: 1 / -1;
}

.evidence-grid span {
  color: var(--muted);
  font-size: 8px;
}

.evidence-grid strong {
  font-size: 11px;
  word-break: break-word;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px !important;
}

.critical-text {
  color: var(--red) !important;
}

.accuracy-note {
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
}

.affected-block {
  margin: 0 36px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.subsection-title {
  min-height: 58px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subsection-title > span {
  display: flex;
  flex-direction: column;
}

.subsection-title strong {
  font-size: 10px;
}

.subsection-title em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.affected-table {
  border-top: 1px solid var(--line);
}

.affected-table > div {
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
}

.affected-table > div:last-child {
  border-bottom: 0;
}

.affected-table em {
  color: var(--muted);
  font-style: normal;
}

.finding-data-block .affected-table strong {
  max-width: 68%;
  text-align: right;
  overflow-wrap: anywhere;
}

.impact-block {
  background: #fbfcf4;
}

.recommendation {
  margin: 0 36px 29px;
  padding: 22px;
  border: 1px solid #cee074;
  border-radius: 14px;
  display: flex;
  gap: 15px;
  background: #f9ffe8;
}

.recommendation-icon {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #526808;
  background: white;
}

.recommendation h3 {
  margin: 5px 0 7px;
  font-size: 15px;
  letter-spacing: -0.025em;
}

.recommendation p {
  margin: 0;
  color: #64705d;
  font-size: 9px;
}

.finding-footer {
  min-height: 48px;
  padding: 0 36px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--muted);
  background: #fbfcf9;
  font-size: 8px;
}

.finding-footer > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.unlock-section {
  margin-top: 85px;
}

.unlock-heading {
  max-width: 650px;
  margin: 0 auto 34px;
  text-align: center;
}

.unlock-heading h2 {
  margin: 14px 0 11px;
  font-size: 40px;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.unlock-heading p {
  margin: 0;
  color: var(--muted);
}

.nothing-to-unlock {
  max-width: 600px;
  margin: 22px auto;
  padding: 20px;
  border: 1px solid rgba(43, 122, 78, 0.22);
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--green-soft);
}

.nothing-to-unlock > .icon {
  width: 22px;
  height: 22px;
  color: var(--green);
}

.nothing-to-unlock strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.nothing-to-unlock p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}

.finding-summary-grid {
  max-width: 600px;
  margin: 0 auto 21px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.finding-summary-grid > div {
  min-height: 95px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  background: white;
}

.summary-icon {
  width: 32px;
  height: 32px;
  grid-row: 1 / 3;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.summary-icon.red {
  color: var(--red);
  background: var(--red-soft);
}

.summary-icon.amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.summary-icon.blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.finding-summary-grid strong {
  align-self: end;
  font-size: 19px;
  letter-spacing: -0.04em;
}

.finding-summary-grid em {
  align-self: start;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.locked-findings {
  max-width: 770px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow-xs);
}

.locked-preview-label {
  min-height: 34px;
  margin: 0;
  padding: 0 17px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: #fbfcf9;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.locked-preview-label .icon {
  font-size: 13px;
}

.live-locked-summary .summary-icon {
  flex: 0 0 auto;
}

.locked-findings article {
  min-height: 74px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.locked-findings article:last-child {
  border-bottom: 0;
}

.locked-findings article.faded {
  opacity: 0.38;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.locked-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.category-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.category-dot.tracking {
  background: var(--red);
}

.category-dot.targeting {
  background: var(--amber);
}

.category-dot.search {
  background: var(--purple);
}

.category-dot.bidding {
  background: var(--blue);
}

.locked-copy > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.locked-copy span {
  color: var(--muted);
  font-size: 8px;
}

.locked-copy strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lock-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--paper-2);
}

.plan-grid {
  position: relative;
  z-index: 1;
  margin-top: -7px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.plan-card {
  position: relative;
  min-width: 0;
  padding: 24px 21px 21px;
  border: 1px solid #303830;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  color: white;
  background: var(--ink);
  box-shadow: 0 20px 50px rgba(17, 21, 17, 0.14);
  transition: border-color 160ms ease, transform 160ms var(--ease), box-shadow 160ms ease;
}

.unlocked-finding-list {
  display: grid;
  gap: 22px;
}

.paid-live-finding {
  box-shadow: var(--shadow-xs);
}

.plan-card:hover,
.plan-card.selected {
  border-color: var(--lime-2);
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(17, 21, 17, 0.2), 0 0 0 1px rgba(217, 255, 91, 0.35);
}

.plan-card.featured {
  background: #1b231c;
}

.plan-card.roadmap {
  border-color: #465046;
  opacity: 0.78;
}

.plan-card.roadmap:hover {
  border-color: #465046;
  transform: none;
  box-shadow: 0 20px 50px rgba(17, 21, 17, 0.14);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 19px;
  padding: 5px 9px;
  border-radius: 100px;
  color: var(--ink);
  background: var(--lime);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.plan-card-head > div > span {
  display: block;
  color: #c8d0c7;
  font-size: 10px;
  font-weight: 750;
}

.plan-card-head strong {
  margin-top: 5px;
  display: block;
  font-size: 34px;
  letter-spacing: -0.06em;
  line-height: 1;
}

.plan-card-head strong em {
  color: var(--lime);
  font-size: 15px;
  font-style: normal;
  vertical-align: top;
}

.plan-card-head strong small {
  margin-left: 4px;
  color: #929b92;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0;
}

.plan-fit {
  padding: 5px 7px;
  border: 1px solid #465046;
  border-radius: 100px;
  color: #aeb7ad;
  font-size: 7px;
  white-space: nowrap;
}

.plan-card > p {
  min-height: 42px;
  margin: 15px 0 17px;
  color: #9ea79e;
  font-size: 8px;
}

.plan-card ul {
  margin: 0 0 21px;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}

.plan-card li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #d8ded8;
  font-size: 8px;
}

.plan-card li .icon {
  margin-top: 2px;
  color: var(--lime);
}

.plan-card .button {
  margin-top: auto;
}

.button-light {
  border-color: #465046;
  color: white;
  background: #293129;
}

.button-light:hover:not(:disabled) {
  border-color: #6b766b;
  background: #343d34;
}

.plans-assurance {
  max-width: 730px;
  margin: 22px auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
}

.plans-assurance .icon {
  margin-top: 2px;
  color: var(--green);
}

.unlock-card {
  position: relative;
  z-index: 1;
  margin-top: -7px;
  padding: 31px;
  border: 1px solid #303830;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: 25px 50px;
  color: white;
  background: var(--ink);
  box-shadow: 0 28px 70px rgba(17, 21, 17, 0.18);
}

.price-copy > span {
  color: #aeb7ad;
  font-size: 9px;
  font-weight: 700;
}

.price-copy > strong {
  margin-top: 3px;
  display: block;
  font-size: 45px;
  letter-spacing: -0.06em;
  line-height: 1;
}

.price-copy > strong > em {
  color: var(--lime);
  font-size: 20px;
  font-style: normal;
  vertical-align: top;
}

.price-copy small {
  margin-left: 5px;
  color: #9ba49a;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}

.price-copy p {
  margin: 8px 0 0;
  color: #8f998f;
  font-size: 8px;
}

.unlock-card ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px 15px;
  list-style: none;
}

.unlock-card li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d8ded8;
  font-size: 9px;
}

.unlock-card li .icon {
  color: var(--lime);
}

.unlock-cta {
  grid-column: 1 / -1;
  padding-top: 23px;
  border-top: 1px solid #343c34;
  text-align: center;
}

.unlock-cta .button {
  width: min(450px, 100%);
}

.unlock-cta p {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  color: #98a298;
  font-size: 8px;
}

.unlock-cta p .icon {
  color: var(--lime);
}

.unlock-section > .back-link {
  margin-top: 22px;
  display: flex;
  color: var(--muted);
}

.checkout-screen {
  padding: 55px 0 100px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 65px;
}

.checkout-heading {
  margin: 23px 0 31px;
}

.checkout-heading h1 {
  font-size: 42px;
}

.payment-form {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: var(--shadow-xs);
}

.checkout-section {
  padding: 26px 28px;
  border-bottom: 1px solid var(--line);
}

.checkout-section-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkout-section-heading h2 {
  flex: 1;
}

.checkout-section-heading > em {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.checkout-section .field-label + .field-label,
.checkout-section .form-grid + .field-label {
  margin-top: 15px;
}

.checkout-plan-options {
  display: grid;
  gap: 9px;
}

.checkout-plan {
  position: relative;
  min-height: 61px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  background: #fbfcf9;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.checkout-plan:hover,
.checkout-plan.selected {
  border-color: #9dbb31;
  background: #fbffec;
  box-shadow: 0 0 0 2px rgba(200, 239, 69, 0.22);
}

.checkout-plan.roadmap {
  cursor: not-allowed;
  opacity: 0.58;
}

.checkout-plan.roadmap:hover {
  border-color: var(--line);
  background: #fbfcf9;
  box-shadow: none;
}

.checkout-plan input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkout-plan:has(input:focus-visible) {
  outline: 3px solid rgba(79, 115, 205, 0.35);
  outline-offset: 2px;
}

.checkout-plan > span {
  display: flex;
  flex-direction: column;
}

.checkout-plan strong {
  font-size: 10px;
}

.checkout-plan em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.checkout-plan b {
  font-size: 14px;
  letter-spacing: -0.035em;
}

.checkout-plan b small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 550;
  letter-spacing: 0;
}

.hosted-payment-note {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #d5dfb0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--green);
  background: #fbffef;
}

.hosted-payment-note > .icon {
  font-size: 17px;
}

.hosted-payment-note p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.hosted-payment-note strong {
  color: var(--ink);
  font-size: 9px;
}

.hosted-payment-note em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.card-input {
  position: relative;
}

.card-brands {
  position: absolute;
  top: 50%;
  right: 13px;
  display: flex;
  transform: translateY(-33%);
}

.card-brands i {
  width: 22px;
  height: 14px;
  border-radius: 4px;
  background: #1f4d9a;
}

.card-brands i:last-child {
  margin-left: -7px;
  background: rgba(232, 83, 48, 0.9);
}

.renewal-box {
  margin-bottom: 17px;
  padding: 14px 15px;
  border: 1px solid #cbdc8b;
  border-radius: 10px;
  background: #faffeb;
}

.renewal-box strong {
  display: block;
  font-size: 11px;
}

.renewal-box p {
  margin: 3px 0 0;
  color: #64705c;
  font-size: 9px;
  line-height: 1.55;
}

.checkbox-row {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
  color: #4e574d;
  font-size: 9px;
  font-weight: 550;
  line-height: 1.6;
}

.checkbox-row + .checkbox-row {
  margin-top: 13px;
}

.checkbox-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.custom-check {
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1px solid #aeb6ac;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: transparent;
  background: white;
  transition: all 140ms ease;
}

.checkbox-row input:focus-visible + .custom-check {
  outline: 3px solid rgba(79, 115, 205, 0.35);
  outline-offset: 2px;
}

.checkbox-row input:checked + .custom-check {
  border-color: var(--ink);
  color: white;
  background: var(--ink);
}

.checkbox-row a,
.legal-copy a,
.settings-legal-links a {
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.payment-form > .button {
  width: calc(100% - 56px);
  margin: 25px 28px 12px;
}

.payment-disclaimer {
  margin: 0 28px 27px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.6;
  text-align: center;
}

.order-card {
  position: sticky;
  top: 106px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.order-product {
  margin: 15px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.order-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--lime-soft);
}

.order-product > div,
.order-business > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.order-product strong,
.order-business span {
  font-size: 10px;
}

.order-product em,
.order-business em {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-business {
  padding: 12px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--paper);
}

.order-business > .icon {
  color: var(--muted);
}

.order-includes {
  margin: 19px 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}

.order-includes li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #505850;
  font-size: 9px;
}

.order-includes .icon {
  color: var(--green);
}

.order-line,
.order-total {
  min-height: 38px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
}

.order-line.muted {
  color: var(--muted);
}

.order-total {
  min-height: 55px;
  font-size: 11px;
}

.order-total strong {
  font-size: 17px;
  letter-spacing: -0.03em;
}

.order-total em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.order-assurance {
  margin-top: 14px;
  padding: 12px;
  border-radius: 9px;
  display: flex;
  gap: 8px;
  background: #f5f7f2;
}

.order-assurance > .icon {
  margin-top: 2px;
  color: var(--green);
}

.order-assurance p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.order-assurance strong {
  font-size: 8px;
}

.order-assurance em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.success-card {
  width: min(570px, 100%);
}

.success-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--lime);
  box-shadow: 0 0 0 10px var(--lime-soft);
  font-size: 24px;
}

.success-priorities {
  margin: 28px 0 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
}

.success-priorities > div {
  min-height: 59px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
}

.success-priorities > div:last-child {
  border-bottom: 0;
}

.success-priorities > div > span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--paper);
  font-size: 8px;
  font-weight: 800;
}

.success-priorities p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.success-priorities strong {
  font-size: 10px;
}

.success-priorities em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.success-card > .text-button {
  margin-top: 12px;
}

.legal-screen {
  padding: 65px 0 110px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: start;
  gap: 75px;
}

.legal-nav {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legal-nav button {
  margin-bottom: 18px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.legal-nav > strong {
  margin-bottom: 8px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-nav a {
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.legal-nav a.active {
  color: var(--ink);
  background: white;
  box-shadow: var(--shadow-xs);
}

.legal-copy {
  min-width: 0;
}

.legal-copy h1 {
  margin: 16px 0 16px;
  font-size: 48px;
  letter-spacing: -0.06em;
  line-height: 1.05;
}

.legal-lede {
  margin: 0 0 40px;
  padding: 15px 17px;
  border: 1px solid #e4d5a5;
  border-radius: 10px;
  color: #74663c;
  background: #fff9e7;
  font-size: 10px;
}

.legal-copy h2 {
  margin: 31px 0 8px;
  font-size: 17px;
  letter-spacing: -0.025em;
}

.legal-copy p {
  margin: 0;
  color: #586158;
  font-size: 11px;
  line-height: 1.85;
}

.terms-summary {
  margin: 30px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}

.terms-summary > div {
  min-height: 72px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  background: white;
}

.terms-summary span {
  color: var(--muted);
  font-size: 8px;
}

.terms-summary strong {
  margin-top: 4px;
  font-size: 11px;
}

/* App shell */
.app-shell {
  min-height: 100vh;
  background: #f4f5ef;
}

body.sidebar-collapsed {
  --sidebar: 72px;
}

body.sidebar-collapsed .app-sidebar {
  width: 72px;
}

body.sidebar-collapsed .app-sidebar .brand span,
body.sidebar-collapsed .business-switcher > span:not(.business-avatar),
body.sidebar-collapsed .business-switcher > .icon,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .app-nav a > span:last-of-type,
body.sidebar-collapsed .app-nav a > em,
body.sidebar-collapsed .sidebar-footer > button span:last-child,
body.sidebar-collapsed .user-chip p,
body.sidebar-collapsed .user-chip button {
  display: none;
}

body.sidebar-collapsed .business-switcher,
body.sidebar-collapsed .app-nav a,
body.sidebar-collapsed .user-chip {
  grid-template-columns: 1fr;
  justify-items: center;
}

body.sidebar-collapsed .sidebar-top {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

body.sidebar-collapsed .sidebar-top .brand-mark {
  width: 23px;
}

body.sidebar-collapsed .sidebar-collapse {
  width: 27px;
  height: 27px;
  border: 0;
  background: transparent;
}

@media (max-width: 920px) {
  body.sidebar-collapsed {
    --sidebar: 264px;
  }

  body.sidebar-collapsed .app-sidebar {
    width: 245px;
  }

  body.sidebar-collapsed .app-sidebar .brand span,
  body.sidebar-collapsed .business-switcher > span:not(.business-avatar),
  body.sidebar-collapsed .business-switcher > .icon,
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .app-nav a > span:last-of-type,
  body.sidebar-collapsed .app-nav a > em,
  body.sidebar-collapsed .sidebar-footer > button span:last-child,
  body.sidebar-collapsed .user-chip p,
  body.sidebar-collapsed .user-chip button {
    display: initial;
  }

  body.sidebar-collapsed .business-switcher {
    grid-template-columns: 35px 1fr 16px;
    justify-items: initial;
  }

  body.sidebar-collapsed .app-nav a {
    grid-template-columns: 23px 1fr auto;
    justify-items: initial;
  }

  body.sidebar-collapsed .user-chip {
    grid-template-columns: 32px 1fr 25px;
    justify-items: initial;
  }

  body.sidebar-collapsed .sidebar-top {
    flex-direction: row;
    justify-content: space-between;
  }

  body.sidebar-collapsed .sidebar-collapse {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    background: white;
  }
}

.app-sidebar {
  position: fixed;
  z-index: 700;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 0 15px 14px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: #f9faf5;
  transition: transform 200ms var(--ease), width 200ms var(--ease);
}

.sidebar-top {
  min-height: 69px;
  padding-inline: 4px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-collapse,
.icon-button,
.mobile-menu {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: white;
}

.business-switcher {
  min-height: 66px;
  margin: 15px 0 12px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  grid-template-columns: 35px 1fr 16px;
  align-items: center;
  gap: 9px;
  background: white;
  box-shadow: var(--shadow-xs);
}

.business-avatar {
  width: 35px;
  height: 35px;
  border-radius: 9px;
}

.business-switcher > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.business-switcher strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.business-switcher em {
  color: var(--green);
  font-size: 7px;
  font-style: normal;
}

.business-switcher > .icon {
  color: var(--muted);
  font-size: 11px;
}

.app-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-label {
  margin: 6px 9px 5px;
  color: #9aa199;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-label-space {
  margin-top: 22px;
}

.app-nav a {
  min-height: 41px;
  padding: 0 10px;
  border-radius: 9px;
  display: grid;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 5px;
  color: #626a61;
  font-size: 10px;
  font-weight: 650;
}

.app-nav a:hover {
  color: var(--ink);
  background: #eff1eb;
}

.app-nav a.active {
  color: var(--ink);
  background: #e9f5bd;
  box-shadow: inset 3px 0 #9ebc2d;
}

.app-nav a > .icon {
  font-size: 16px;
}

.app-nav a > em {
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  color: #5f6d2c;
  background: rgba(255, 255, 255, 0.75);
  font-size: 7px;
  font-style: normal;
}

.sidebar-footer {
  margin-top: auto;
}

.sidebar-footer > button {
  width: 100%;
  min-height: 39px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 9px;
  font-weight: 650;
}

.user-chip {
  min-height: 55px;
  margin-top: 7px;
  padding: 8px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 32px 1fr 25px;
  align-items: center;
  gap: 8px;
}

.user-chip > span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: #616e7b;
  font-size: 8px;
  font-weight: 800;
}

.user-chip p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.user-chip strong {
  font-size: 8px;
}

.user-chip em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.user-chip button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
}

.app-main {
  min-height: 100vh;
  margin-left: var(--sidebar);
}

.app-topbar {
  position: sticky;
  z-index: 400;
  top: 0;
  height: 69px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(249, 250, 245, 0.92);
  backdrop-filter: blur(14px);
}

.sample-workspace-banner {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #d49a27;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6e4709;
  background: #fff4d8;
  font-size: 8px;
  line-height: 1.25;
}

.sample-workspace-banner .icon {
  flex: 0 0 auto;
  font-size: 14px;
}

.sample-workspace-banner strong {
  white-space: nowrap;
}

.app-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 9px;
}

.app-breadcrumb .icon {
  font-size: 10px;
}

.app-breadcrumb strong {
  color: var(--ink);
}

.topbar-actions,
.heading-actions,
.detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitoring-status {
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: white;
  font-size: 8px;
  font-weight: 650;
}

.monitoring-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64a451;
}

.topbar-actions .icon-button {
  width: 34px;
  height: 34px;
}

.notification-button {
  position: relative;
}

.notification-button > i {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border: 1px solid white;
  border-radius: 50%;
  background: var(--red);
}

.mobile-menu {
  display: none;
}

.app-screen {
  min-height: calc(100vh - 69px);
}

.app-content {
  width: min(1320px, calc(100% - 56px));
  margin-inline: auto;
  padding-block: 42px 80px;
}

.compact-content {
  max-width: 1080px;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.app-page-heading {
  margin-bottom: 28px;
}

.page-heading h1 {
  margin: 8px 0 6px;
  font-size: 36px;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.confidence-alert {
  min-height: 67px;
  margin-bottom: 16px;
  padding: 12px 15px;
  border: 1px solid #efd5a0;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 11px;
  background: #fff9e9;
}

.confidence-alert > .icon {
  color: #a76c17;
  font-size: 19px;
}

.confidence-alert strong {
  display: block;
  font-size: 10px;
}

.confidence-alert p {
  margin: 1px 0 0;
  color: #796b49;
  font-size: 8px;
}

.confidence-alert button {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6f5523;
  background: transparent;
  font-size: 8px;
  font-weight: 750;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.metric-grid article {
  position: relative;
  min-height: 127px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: var(--shadow-xs);
}

.metric-grid article > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
}

.metric-grid article > strong {
  margin: 7px 0 2px;
  font-size: 24px;
  letter-spacing: -0.045em;
  line-height: 1;
}

.metric-grid article > em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.metric-grid svg {
  position: absolute;
  right: 10px;
  bottom: 7px;
  width: 82px;
  height: 24px;
  fill: none;
  stroke: #9db62d;
  stroke-width: 2;
}

.up-good,
.down-good {
  color: var(--green);
  font-weight: 750;
}

.confidence-metric > strong {
  color: var(--red);
}

.confidence-metric > span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.confidence-metric > span button {
  padding: 0;
  color: var(--muted);
  background: transparent;
}

.confidence-scale {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.confidence-scale i {
  height: 4px;
  border-radius: 100px;
  background: #e2e5df;
}

.confidence-scale i:first-child {
  background: var(--red);
}

.content-heading {
  margin: 32px 0 13px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.content-heading h2 {
  margin: 0 0 2px;
  font-size: 17px;
  letter-spacing: -0.035em;
}

.content-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.priority-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow-xs);
}

.priority-item {
  position: relative;
  min-height: 100px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 38px 3px 1fr auto;
  align-items: center;
  gap: 15px;
}

.priority-item:last-child {
  border-bottom: 0;
}

.priority-rank {
  color: #a1a8a0;
  font-size: 10px;
  font-weight: 800;
}

.severity-bar {
  width: 3px;
  height: 44px;
  border-radius: 3px;
}

.critical-bar {
  background: var(--red);
}

.warning-bar {
  background: #d78d22;
}

.priority-body > div {
  display: flex;
  gap: 5px;
}

.priority-body h3 {
  margin: 6px 0 3px;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.priority-body p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.priority-action {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.priority-action > span {
  color: var(--muted);
  font-size: 7px;
}

.priority-action .button {
  min-height: 34px;
  padding-inline: 11px;
  font-size: 8px;
}

.dashboard-split {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.7fr);
  gap: 13px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
  box-shadow: var(--shadow-xs);
}

.panel-heading {
  min-height: 70px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.panel-heading h2 {
  margin: 4px 0 0;
  font-size: 14px;
  letter-spacing: -0.025em;
}

.panel-heading select,
.date-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: white;
  font-size: 8px;
}

.date-button {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chart-legend {
  padding: 12px 18px 0;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  color: var(--muted);
  font-size: 7px;
}

.chart-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart-legend i {
  width: 12px;
  height: 2px;
}

.chart-legend .spend {
  background: #92ac25;
}

.chart-legend .leads {
  background: #75849d;
}

.main-chart,
.large-chart {
  min-height: 180px;
  padding: 17px 20px 27px 14px;
  display: grid;
  grid-template-columns: 35px 1fr;
}

.chart-y {
  padding-bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #9ba29a;
  font-size: 7px;
}

.chart-area {
  position: relative;
}

.chart-area > i {
  position: relative;
  display: block;
  height: 33.33%;
  border-top: 1px dashed #e5e8e2;
}

.chart-area > i:last-of-type {
  border-bottom: 1px solid #e5e8e2;
}

.chart-area svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% - 1px);
  overflow: visible;
}

.chart-area .line,
.chart-area .line-two {
  fill: none;
  stroke: #90ac20;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.chart-area .line-two {
  stroke: #75849d;
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
}

.chart-area .area {
  fill: url(#chartFill);
}

.chart-x {
  position: absolute;
  right: 0;
  bottom: -19px;
  left: 0;
  display: flex;
  justify-content: space-between;
  color: #9ba29a;
  font-size: 7px;
}

.activity-list > div {
  min-height: 60px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-list > div:last-child {
  border-bottom: 0;
}

.activity-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.activity-icon.danger {
  color: var(--red);
  background: var(--red-soft);
}

.activity-icon.good {
  color: var(--green);
  background: var(--green-soft);
}

.activity-icon.neutral {
  color: var(--muted);
  background: var(--paper-2);
}

.activity-list p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.activity-list strong {
  font-size: 8px;
}

.activity-list em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.finding-stat-row {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.5fr;
  gap: 9px;
}

.finding-stat-row > div {
  min-height: 77px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
}

.stat-mark {
  width: 9px;
  height: 35px;
  border-radius: 100px;
}

.critical-mark {
  background: var(--red);
}

.warning-mark {
  background: #d88e23;
}

.opportunity-mark {
  background: var(--blue);
}

.finding-stat-row p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.finding-stat-row p strong {
  font-size: 21px;
  letter-spacing: -0.04em;
}

.finding-stat-row p em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.finding-stat-row .stat-health {
  justify-content: space-between;
}

.stat-health span,
.stat-health em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.stat-health strong {
  font-size: 22px;
}

.stat-health strong span {
  color: var(--muted);
  font-size: 9px;
}

.filter-bar {
  min-height: 60px;
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: white;
}

.search-field {
  position: relative;
  width: 230px;
  margin-right: auto;
}

.search-field > .icon {
  position: absolute;
  top: 50%;
  left: 11px;
  color: var(--muted);
  transform: translateY(-50%);
}

.search-field input {
  width: 100%;
  height: 39px;
  padding: 0 11px 0 33px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: #fafbf8;
  font-size: 9px;
}

.search-field input:focus {
  border-color: #94a85c;
}

.filter-button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  background: white;
  font-size: 8px;
  font-weight: 650;
}

.filter-button.active {
  border-color: var(--ink);
  color: white;
  background: var(--ink);
}

.filter-button span {
  min-width: 17px;
  height: 17px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  color: inherit;
  background: rgba(128, 135, 127, 0.13);
  font-size: 7px;
}

.filter-button.active span {
  background: rgba(255, 255, 255, 0.18);
}

.findings-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
  box-shadow: var(--shadow-xs);
}

.findings-table-head,
.finding-row {
  display: grid;
  grid-template-columns: minmax(300px, 1.8fr) minmax(90px, 0.65fr) minmax(100px, 0.75fr) 90px 28px;
  align-items: center;
  gap: 12px;
}

.findings-table-head {
  min-height: 39px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: #f9faf7;
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.finding-row {
  min-height: 78px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 130ms ease;
}

.finding-row:hover {
  background: #fbfcf9;
}

.finding-row:last-child {
  border-bottom: 0;
}

.finding-row > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.row-severity {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.row-severity.critical {
  color: var(--red);
  background: var(--red-soft);
}

.row-severity.important {
  color: var(--amber);
  background: var(--amber-soft);
}

.row-severity.opportunity {
  color: var(--blue);
  background: var(--blue-soft);
}

.finding-row p {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.finding-row p strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finding-row p em,
.finding-row > span:nth-child(2),
.finding-row > span:nth-child(3) em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.finding-row > span:nth-child(3) {
  display: flex;
  flex-direction: column;
  font-size: 8px;
}

.finding-row > button {
  padding: 0;
  color: var(--muted);
  background: transparent;
}

.state-pill.new {
  color: #8d3b2a;
  background: var(--red-soft);
}

.state-pill.reviewed,
.state-pill.snoozed {
  color: var(--muted);
  background: var(--paper-2);
}

.state-pill.progress {
  color: #825b1b;
  background: var(--amber-soft);
}

.state-pill.active {
  color: var(--green);
  background: var(--green-soft);
}

.state-pill.active i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.state-pill.limited {
  color: #875e1d;
  background: var(--amber-soft);
}

.detail-content {
  max-width: 1180px;
}

.detail-heading {
  margin: 19px 0 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
}

.detail-heading > div:first-child {
  max-width: 780px;
}

.detail-heading h1 {
  margin: 12px 0 8px;
  font-size: 36px;
  letter-spacing: -0.055em;
  line-height: 1.14;
}

.detail-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 14px;
}

.detail-main {
  display: grid;
  gap: 14px;
}

.evidence-detail,
.affected-detail,
.fix-panel {
  overflow: hidden;
}

.evidence-detail .evidence-grid {
  margin: 19px;
}

.evidence-detail .accuracy-note {
  margin: -4px 19px 18px;
}

.source-badge {
  min-height: 27px;
  padding: 0 9px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--green);
  background: var(--green-soft);
  font-size: 8px;
  font-weight: 700;
}

.item-table > div {
  min-height: 59px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(130px, 1fr) 60px 70px;
  align-items: center;
  gap: 12px;
  font-size: 8px;
}

.item-table > div:last-child {
  border-bottom: 0;
}

.item-table .item-head {
  min-height: 35px;
  color: var(--muted);
  background: #fafbf8;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}

.item-table > div > span:first-child {
  display: flex;
  flex-direction: column;
}

.item-table em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.fix-panel {
  padding: 24px;
}

.fix-heading {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.fix-heading > .icon {
  width: 38px;
  height: 38px;
  padding: 10px;
  border-radius: 10px;
  color: #526808;
  background: var(--lime-soft);
}

.fix-heading h2 {
  margin: 5px 0 0;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.fix-steps {
  margin: 24px 0 20px;
  padding: 0;
  list-style: none;
}

.fix-steps li {
  position: relative;
  min-height: 64px;
  padding-bottom: 15px;
  display: flex;
  gap: 12px;
}

.fix-steps li:not(:last-child)::before {
  position: absolute;
  top: 27px;
  bottom: 0;
  left: 13px;
  width: 1px;
  background: var(--line);
  content: "";
}

.fix-steps li > span {
  z-index: 1;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: white;
  font-size: 8px;
  font-weight: 800;
}

.fix-steps p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.fix-steps strong {
  font-size: 10px;
}

.fix-steps em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
}

.fix-warning {
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  gap: 9px;
  background: #f8f9f6;
}

.fix-warning > .icon {
  color: var(--muted);
}

.fix-warning p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.fix-warning strong {
  font-size: 8px;
}

.fix-warning em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.detail-aside {
  display: grid;
  gap: 12px;
}

.detail-aside .panel {
  padding: 18px;
}

.detail-aside dl {
  margin: 13px 0 0;
}

.detail-aside dl > div {
  min-height: 39px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 8px;
}

.detail-aside dl > div:last-child {
  border-bottom: 0;
}

.detail-aside dt {
  color: var(--muted);
}

.detail-aside dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.source-panel > div {
  min-height: 55px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 27px 1fr 15px;
  align-items: center;
  gap: 8px;
}

.source-panel > div > .icon:first-child {
  font-size: 17px;
}

.source-panel p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.source-panel strong {
  font-size: 8px;
}

.source-panel em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.source-ok {
  color: var(--green);
}

.source-panel > button {
  margin-top: 13px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
  font-weight: 700;
  text-decoration: underline;
}

.feedback-panel {
  text-align: center;
}

.feedback-panel > .icon {
  margin-inline: auto;
  color: var(--muted);
  font-size: 20px;
}

.feedback-panel h3 {
  margin: 9px 0 3px;
  font-size: 11px;
}

.feedback-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 7px;
}

.feedback-panel > div {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.feedback-panel button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: white;
  font-size: 8px;
}

.performance-metrics {
  margin-bottom: 14px;
}

.large-chart-panel {
  overflow: hidden;
}

.chart-tabs {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  background: #f5f6f2;
}

.chart-tabs button {
  min-height: 27px;
  padding-inline: 10px;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-size: 7px;
  font-weight: 650;
}

.chart-tabs button.active {
  color: var(--ink);
  background: white;
  box-shadow: var(--shadow-xs);
}

.large-chart {
  min-height: 280px;
  padding-inline: 18px 28px;
}

.large-chart .chart-area > i {
  height: 25%;
}

.large-chart .area-large {
  fill: url(#chartFillLarge);
}

.campaign-table,
.landing-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
}

.campaign-table > div {
  min-height: 62px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) 80px 80px 70px 80px 110px;
  align-items: center;
  gap: 10px;
  font-size: 8px;
}

.campaign-table > div:last-child {
  border-bottom: 0;
}

.campaign-table .campaign-head,
.landing-table .landing-head {
  min-height: 37px;
  color: var(--muted);
  background: #fafbf8;
  font-size: 7px;
  font-weight: 750;
  text-transform: uppercase;
}

.campaign-table > div > span:first-child,
.landing-table > div > span:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.campaign-table em,
.landing-table em {
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-warning,
.context-good {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--amber);
  font-size: 7px;
  font-weight: 650;
}

.context-good {
  color: var(--green);
}

.website-overview {
  min-height: 112px;
  padding: 15px 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  align-items: center;
  background: white;
  box-shadow: var(--shadow-xs);
}

.website-score {
  display: flex;
  align-items: center;
  gap: 12px;
}

.score-circle {
  width: 66px;
  height: 66px;
  border: 6px solid #e1e5dc;
  border-top-color: #d09431;
  border-right-color: #d09431;
  border-radius: 50%;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  transform: rotate(8deg);
}

.score-circle strong {
  font-size: 20px;
  letter-spacing: -0.05em;
}

.score-circle span {
  align-self: end;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 7px;
}

.website-score p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.website-score strong {
  font-size: 10px;
}

.website-score em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.website-stat {
  min-height: 57px;
  padding-left: 17px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.website-stat span,
.website-stat em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.website-stat strong {
  margin: 3px 0;
  font-size: 17px;
  letter-spacing: -0.03em;
}

.website-split {
  grid-template-columns: 1.25fr 0.75fr;
}

.website-issue-list > div {
  min-height: 68px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px 1fr auto 14px;
  align-items: center;
  gap: 10px;
}

.website-issue-list > div:last-child {
  border-bottom: 0;
}

.website-issue-list p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.website-issue-list strong {
  font-size: 9px;
}

.website-issue-list em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.conversion-path-panel {
  overflow: hidden;
}

.path-row {
  min-height: 68px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
}

.path-row:last-child {
  border-bottom: 0;
}

.path-row > .icon {
  width: 29px;
  height: 29px;
  padding: 7px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--paper-2);
}

.path-row p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.path-row strong {
  font-size: 8px;
}

.path-row em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.path-state {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
  font-weight: 700;
}

.path-state.good {
  color: var(--green);
  background: var(--green-soft);
}

.path-state.warning {
  color: var(--amber);
  background: var(--amber-soft);
}

.path-state.neutral {
  color: var(--muted);
  background: var(--paper-2);
}

.landing-page-panel {
  margin-top: 14px;
  overflow: hidden;
}

.search-field.small {
  width: 180px;
  margin: 0;
}

.landing-table {
  border: 0;
  border-radius: 0;
}

.landing-table > div {
  min-height: 57px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) 90px 60px 70px 100px;
  align-items: center;
  gap: 10px;
  font-size: 8px;
}

.landing-table > div:last-child {
  border-bottom: 0;
}

.page-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7px;
  font-weight: 700;
}

.page-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.page-status.broken {
  color: var(--red);
}

.page-status.broken i {
  background: var(--red);
}

.page-status.live {
  color: var(--green);
}

.page-status.live i {
  background: var(--green);
}

.connection-section + .connection-section {
  margin-top: 45px;
}

.connection-section .content-heading {
  align-items: start;
}

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

.connection-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.connection-card {
  min-height: 245px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: var(--shadow-xs);
}

.connection-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.connection-logo {
  width: 43px;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: white;
  font-size: 17px;
  font-weight: 800;
}

.site-logo {
  color: #42673d;
  background: #eff7ec;
}

.ga-logo {
  color: #b25f18;
  background: #fff2e5;
}

.crm-logo {
  color: var(--blue);
  background: var(--blue-soft);
}

.call-logo {
  color: var(--green);
  background: var(--green-soft);
}

.connection-card h3 {
  margin: 17px 0 6px;
  font-size: 15px;
  letter-spacing: -0.025em;
}

.connection-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.7;
}

.connection-meta {
  min-height: 52px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.connection-meta > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.connection-meta strong {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-meta em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.connection-meta button {
  color: var(--muted);
  background: transparent;
}

.analysis-only-mini {
  min-height: 29px;
  padding: 0 9px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #63705d;
  background: #f2f5ed;
  font-size: 7px;
}

.optional-label,
.recommend-label {
  min-height: 23px;
  padding: 0 8px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  background: var(--paper-2);
  font-size: 7px;
  font-weight: 700;
}

.recommend-label {
  color: #647711;
  background: var(--lime-soft);
}

.recommend-label.small {
  font-size: 6px;
}

.connection-card.optional .button {
  margin-top: auto;
  min-height: 38px;
  font-size: 8px;
}

.future-note {
  margin-top: 20px;
  padding: 17px;
  border: 1px dashed #bac2b7;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.4);
}

.future-note > .icon {
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 9px;
  color: var(--muted);
  background: white;
}

.future-note strong {
  display: block;
  font-size: 9px;
}

.future-note p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.settings-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.settings-nav {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: white;
}

.settings-nav button {
  min-height: 41px;
  padding: 0 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
  font-weight: 650;
  text-align: left;
}

.settings-nav button.active {
  color: var(--ink);
  background: var(--lime-soft);
}

.settings-panel {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow-xs);
}

.settings-heading {
  margin-bottom: 24px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.settings-heading h2 {
  margin: 0 0 3px;
  font-size: 17px;
  letter-spacing: -0.03em;
}

.settings-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.settings-panel > .field-label,
.settings-panel > .form-grid {
  margin-bottom: 15px;
}

.settings-save {
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-save > span {
  color: var(--muted);
  font-size: 7px;
}

.settings-save .button {
  min-height: 39px;
  font-size: 9px;
}

.current-plan {
  padding: 20px;
  border: 1px solid #cfe17f;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #f9ffe9;
}

.current-plan h3 {
  margin: 4px 0 1px;
  font-size: 16px;
}

.current-plan p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}

.current-plan > strong {
  font-size: 25px;
  letter-spacing: -0.04em;
}

.current-plan > strong em {
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  letter-spacing: 0;
}

.billing-detail {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  gap: 1px;
  background: var(--line);
}

.billing-detail > div {
  min-height: 61px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  background: white;
}

.billing-detail span {
  color: var(--muted);
  font-size: 7px;
}

.billing-detail strong {
  margin-top: 4px;
  font-size: 9px;
}

.billing-actions {
  margin-top: 15px;
  display: flex;
  gap: 8px;
}

.billing-actions .button {
  min-height: 39px;
  font-size: 8px;
}

.settings-panel > .payment-disclaimer {
  margin: 15px 0 0;
  text-align: left;
}

.invoice-section {
  margin-top: 28px;
}

.invoice-section h3 {
  font-size: 12px;
}

.invoice-row {
  min-height: 59px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  grid-template-columns: 1fr 70px 55px 25px;
  align-items: center;
  gap: 10px;
  font-size: 8px;
}

.invoice-row > span:first-child {
  display: flex;
  flex-direction: column;
}

.invoice-row em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.invoice-row button {
  color: var(--muted);
  background: transparent;
}

.privacy-setting {
  min-height: 77px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 11px;
}

.privacy-setting + .privacy-setting {
  margin-top: 9px;
}

.privacy-setting > .icon {
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 9px;
  color: var(--muted);
  background: var(--paper-2);
}

.privacy-setting strong {
  display: block;
  font-size: 9px;
}

.privacy-setting p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 7px;
}

.privacy-setting .button {
  min-height: 36px;
  font-size: 8px;
}

.settings-legal-links {
  margin: 20px 0 0;
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: 8px;
}

.toggle-setting {
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 38px;
  align-items: center;
  gap: 15px;
  cursor: pointer;
}

.toggle-setting > span {
  display: flex;
  flex-direction: column;
}

.toggle-setting strong {
  font-size: 9px;
}

.toggle-setting em {
  color: var(--muted);
  font-size: 7px;
  font-style: normal;
}

.toggle-setting input {
  position: absolute;
  opacity: 0;
}

.toggle-setting > i {
  position: relative;
  width: 36px;
  height: 21px;
  border-radius: 100px;
  background: #d8dcd5;
  transition: background 150ms ease;
}

.toggle-setting > i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: white;
  box-shadow: var(--shadow-xs);
  content: "";
  transition: transform 150ms var(--ease);
}

.toggle-setting input:checked + i {
  background: var(--ink);
}

.toggle-setting input:checked + i::after {
  transform: translateX(15px);
}

/* Modal and toast */
.modal-backdrop {
  position: fixed;
  z-index: 2000;
  inset: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(14, 18, 14, 0.58);
  backdrop-filter: blur(5px);
}

.modal {
  position: relative;
  width: min(470px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  padding: 30px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: white;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3);
}

.modal-close {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: white;
}

.modal-icon {
  width: 45px;
  height: 45px;
  margin-bottom: 17px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #5c7114;
  background: var(--lime-soft);
  font-size: 20px;
}

.modal h2 {
  margin: 0 45px 9px 0;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.modal-content {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.75;
}

.modal-content p {
  margin: 0 0 14px;
}

.modal-content strong {
  color: var(--ink);
}

.modal-list {
  margin: 16px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  list-style: none;
}

.modal-list li {
  min-height: 46px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #525a51;
  font-size: 8px;
}

.modal-list li:last-child {
  border-bottom: 0;
}

.modal-list .icon {
  margin-top: 2px;
  color: var(--green);
}

.modal-note {
  padding: 12px;
  border-radius: 9px;
  color: #6b623f;
  background: #fff8df;
  font-size: 8px;
}

.modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cancel-details {
  margin: 15px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 9px;
}

.cancel-details div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 8px;
}

.cancel-details span {
  color: var(--muted);
}

.toast-region {
  position: fixed;
  z-index: 3000;
  right: 18px;
  bottom: 55px;
  display: grid;
  gap: 8px;
}

.toast {
  width: min(340px, calc(100vw - 36px));
  padding: 13px 14px;
  border: 1px solid #404940;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 28px 1fr 20px;
  align-items: center;
  gap: 9px;
  color: white;
  background: #1d241e;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.23);
  animation: toastIn 220ms var(--ease);
}

.toast > .icon {
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 8px;
  color: var(--lime);
  background: #303a30;
}

.toast p {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.toast strong {
  font-size: 9px;
}

.toast span {
  color: #aab3aa;
  font-size: 7px;
}

.toast button {
  color: #9ea79e;
  background: transparent;
}

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

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

@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1120px) {
  .hero {
    gap: 40px;
  }

  .note-one {
    right: -10px;
  }

  .note-two {
    left: -10px;
  }

  .sample-layout {
    gap: 55px;
  }

  .app-content {
    width: calc(100% - 40px);
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .website-overview {
    grid-template-columns: 1.2fr repeat(2, 1fr);
    row-gap: 15px;
  }

  .website-stat:nth-child(4) {
    border-left: 0;
  }

  .findings-table-head,
  .finding-row {
    grid-template-columns: minmax(260px, 1.7fr) 100px 100px 70px 20px;
  }
}

@media (max-width: 920px) {
  .hero {
    padding-block: 65px;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }

  .hero h1,
  .hero-lede,
  .url-form,
  .url-input-row {
    margin-inline: auto;
  }

  .form-trust {
    justify-content: center;
  }

  .hero-proof {
    max-width: 510px;
    margin-inline: auto;
  }

  .proof-browser {
    transform: none;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-card {
    min-height: 230px;
  }

  .step-icon {
    margin-bottom: 30px;
  }

  .sample-layout {
    grid-template-columns: 1fr;
  }

  .sample-copy {
    max-width: 680px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .plan-card > p {
    min-height: 0;
  }

  .order-card {
    position: static;
  }

  .app-sidebar {
    width: 245px;
    transform: translateX(-102%);
    box-shadow: 20px 0 60px rgba(17, 21, 17, 0.17);
  }

  body.mobile-nav-open .app-sidebar {
    transform: translateX(0);
  }

  body.mobile-nav-open::after {
    position: fixed;
    z-index: 650;
    inset: 0;
    background: rgba(17, 21, 17, 0.4);
    content: "";
  }

  .app-main {
    margin-left: 0;
  }

  .mobile-menu {
    display: grid;
  }

  .app-topbar {
    justify-content: flex-start;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-aside {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-split,
  .website-split {
    grid-template-columns: 1fr;
  }

  .connection-grid.three {
    grid-template-columns: 1fr 1fr;
  }

  .findings-table {
    overflow-x: auto;
  }

  .findings-table-head,
  .finding-row {
    min-width: 820px;
  }

  .campaign-table,
  .landing-table {
    overflow-x: auto;
  }

  .campaign-table > div {
    min-width: 900px;
  }

  .landing-table > div {
    min-width: 750px;
  }
}

@media (max-width: 720px) {
  .sample-workspace-banner {
    margin-left: auto;
    padding-inline: 9px;
  }

  .sample-workspace-banner > span:last-child {
    display: none;
  }

  .sample-workspace-banner strong {
    white-space: normal;
  }

  .shell,
  .shell-narrow,
  .header-inner {
    width: min(100% - 30px, 1180px);
  }

  .site-header {
    height: 64px;
  }

  .landing-nav a {
    display: none;
  }

  .journey-progress {
    max-width: none;
  }

  .progress-step em,
  .journey-exit {
    display: none;
  }

  .journey-progress > i {
    width: 24px;
    margin-inline: 5px;
  }

  .hero {
    min-height: auto;
    padding-block: 54px 68px;
  }

  .hero h1 {
    font-size: clamp(43px, 13vw, 64px);
  }

  .hero-lede {
    font-size: 15px;
  }

  .url-input-row {
    display: grid;
  }

  .url-input-row input,
  .url-input-row .button {
    width: 100%;
  }

  .url-input-row .button {
    min-width: 0;
  }

  .input-prefix {
    top: 29px;
  }

  .proof-body {
    padding: 28px 24px;
  }

  .proof-body h2 {
    font-size: 24px;
  }

  .proof-note {
    display: none;
  }

  .trust-strip-inner {
    padding-block: 15px;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .process-section,
  .sample-section {
    padding-block: 80px;
  }

  .check-list {
    grid-template-columns: 1fr;
  }

  .coverage-panel {
    padding: 21px;
  }

  .pricing-callout {
    padding-block: 55px;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-inner nav {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .journey-screen {
    min-height: calc(100vh - 64px);
    padding: 38px 15px 70px;
  }

  .journey-card {
    padding: 31px 20px;
  }

  .form-section {
    padding: 25px 20px;
  }

  .form-grid.two,
  .goal-options,
  .outcome-candidates {
    grid-template-columns: 1fr;
  }

  .goal-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .sticky-actions,
  .sticky-actions > div {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .sticky-actions .save-note {
    display: none;
  }

  .analysis-card {
    padding: 25px 20px;
    grid-template-columns: 1fr;
  }

  .analysis-visual {
    max-height: 190px;
  }

  .radar {
    width: 180px;
  }

  .result-screen,
  .checkout-screen {
    padding-block: 42px 80px;
  }

  .live-account-controls,
  .live-account-controls > div {
    align-items: stretch;
    flex-direction: column;
  }

  .live-account-controls > div .button {
    width: 100%;
  }

  .finding-header,
  .finding-footer {
    padding-inline: 18px;
  }

  .finding-id {
    display: none;
  }

  .finding-main {
    padding: 27px 20px 23px;
  }

  .finding-main h2 {
    font-size: 23px;
  }

  .evidence-block,
  .affected-block,
  .recommendation {
    margin-inline: 20px;
  }

  .evidence-block {
    padding: 16px;
  }

  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .evidence-grid > div.wide {
    grid-column: auto;
  }

  .finding-footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  .finding-summary-grid {
    grid-template-columns: 1fr;
  }

  .unlock-card {
    padding: 25px 20px;
    grid-template-columns: 1fr;
  }

  .unlock-card ul {
    grid-template-columns: 1fr;
  }

  .unlock-cta {
    grid-column: auto;
  }

  .checkout-section {
    padding: 23px 20px;
  }

  .payment-form > .button {
    width: calc(100% - 40px);
    margin-inline: 20px;
  }

  .payment-disclaimer {
    margin-inline: 20px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .legal-nav {
    position: static;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .legal-copy h1 {
    font-size: 39px;
  }

  .app-content {
    width: calc(100% - 28px);
    padding-block: 30px 65px;
  }

  .app-topbar {
    height: 61px;
    padding-inline: 14px;
  }

  .app-breadcrumb > span:first-child,
  .monitoring-status {
    display: none;
  }

  .page-heading,
  .detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-heading h1,
  .detail-heading h1 {
    font-size: 31px;
  }

  .metric-grid {
    grid-template-columns: 1fr 1fr;
  }

  .confidence-alert {
    grid-template-columns: 25px 1fr;
  }

  .confidence-alert button {
    grid-column: 2;
  }

  .priority-item {
    grid-template-columns: 27px 3px 1fr;
  }

  .priority-action {
    grid-column: 3;
    align-items: flex-start;
  }

  .detail-aside {
    grid-template-columns: 1fr;
  }

  .finding-stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .filter-bar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .search-field {
    width: 100%;
    margin: 0;
  }

  .filter-more {
    margin-left: auto;
  }

  .website-overview {
    padding: 16px;
    grid-template-columns: 1fr 1fr;
  }

  .website-score {
    grid-column: 1 / -1;
  }

  .website-stat,
  .website-stat:nth-child(4) {
    padding: 11px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .connection-grid,
  .connection-grid.three {
    grid-template-columns: 1fr;
  }

  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    overflow-x: auto;
    flex-direction: row;
  }

  .settings-nav button {
    flex: 0 0 auto;
  }

  .settings-panel {
    padding: 20px;
  }

  .billing-detail,
  .terms-summary {
    grid-template-columns: 1fr;
  }

  .future-note {
    grid-template-columns: 32px 1fr;
  }

  .future-note > .state-pill {
    grid-column: 2;
  }
}

@media (max-width: 480px) {
  .prototype-ribbon {
    right: 10px;
    bottom: 10px;
  }

  .brand {
    font-size: 16px;
  }

  .landing-nav {
    gap: 10px;
  }

  .hero-copy {
    text-align: left;
  }

  .form-trust {
    justify-content: flex-start;
  }

  .goal-options,
  .metric-grid,
  .finding-stat-row {
    grid-template-columns: 1fr;
  }

  .goal-option {
    min-height: 75px;
  }

  .finding-main {
    flex-direction: column;
  }

  .finding-title-icon {
    width: 43px;
    height: 43px;
  }

  .subsection-title {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 10px;
  }

  .affected-table > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding-block: 10px;
  }

  .recommendation {
    flex-direction: column;
  }

  .unlock-heading h2 {
    font-size: 34px;
  }

  .locked-copy strong {
    white-space: normal;
  }

  .billing-actions,
  .heading-actions,
  .detail-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .privacy-setting {
    grid-template-columns: 34px 1fr;
  }

  .privacy-setting .button {
    grid-column: 2;
  }
}

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