:root {
  --ink: #10151c;
  --ink-2: #384250;
  --ink-3: #6b7684;
  --line: #e3e7ec;
  --line-2: #f0f2f5;
  --bg: #ffffff;
  --bg-2: #f7f9fb;
  --brand: #1656d3;
  --brand-dark: #0f3fa0;
  --brand-tint: #eef3fe;

  --critical: #c02617;
  --critical-bg: #fdeceb;
  --high: #b6540c;
  --high-bg: #fdf0e6;
  --medium: #8a6206;
  --medium-bg: #fcf5e3;
  --low: #55606e;
  --low-bg: #f2f4f7;
  --pass: #17693f;
  --pass-bg: #e9f6ee;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 21, 28, 0.06), 0 8px 24px rgba(16, 21, 28, 0.06);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 650;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--brand);
}

.wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}

.wrap-narrow {
  max-width: 760px;
}

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

.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

.logo {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.logo span {
  color: var(--brand);
}

.site-header nav {
  display: flex;
  gap: 22px;
  font-size: 14.5px;
}

.site-header nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-header nav a:hover {
  color: var(--brand);
}

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

.hero {
  background: linear-gradient(168deg, #0d1620 0%, #14243a 62%, #16305c 100%);
  color: #fff;
  padding: 72px 0 80px;
}

.hero h1 {
  font-size: clamp(30px, 5.2vw, 46px);
  max-width: 19ch;
  margin-bottom: 18px;
  color: #fff;
}

.hero .lede {
  font-size: clamp(16.5px, 2.2vw, 19px);
  color: #b9c6d8;
  max-width: 54ch;
  margin-bottom: 32px;
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7fa8ee;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------- scanner */

.scan-form {
  display: flex;
  gap: 10px;
  max-width: 620px;
}

.scan-form input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16.5px;
  padding: 15px 17px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}

.scan-form input::placeholder {
  color: #98a2b1;
}

.scan-form input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(90, 150, 255, 0.45);
}

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: var(--brand-dark);
}

.btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.btn-lg {
  font-size: 17px;
  padding: 16px 32px;
  width: 100%;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  padding: 10px 18px;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: #cfd6de;
}

.hero-note {
  margin-top: 16px;
  font-size: 14px;
  color: #8fa2ba;
}

.form-error {
  margin-top: 14px;
  padding: 12px 15px;
  border-radius: 8px;
  background: rgba(192, 38, 23, 0.14);
  border: 1px solid rgba(255, 130, 115, 0.35);
  color: #ffc8c0;
  font-size: 14.5px;
  max-width: 620px;
}

/* ------------------------------------------------------------- progress */

.progress {
  margin-top: 26px;
  max-width: 620px;
}

.progress-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.progress-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4d8dfa, #7fb0ff);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.progress-steps {
  margin-top: 16px;
  display: grid;
  gap: 7px;
  font-size: 14.5px;
  color: #8fa2ba;
}

.progress-steps li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s ease;
}

.progress-steps li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3c4c61;
  flex: none;
}

.progress-steps li.active {
  color: #dce6f4;
}

.progress-steps li.active::before {
  background: #4d8dfa;
  box-shadow: 0 0 0 4px rgba(77, 141, 250, 0.2);
}

.progress-steps li.done {
  color: #7f93ab;
}

.progress-steps li.done::before {
  background: #2f9e5f;
}

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

section {
  padding: 68px 0;
}

section.alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 62ch;
  margin-bottom: 38px;
}

.section-head h2 {
  font-size: clamp(23px, 3.4vw, 30px);
}

.section-head p {
  color: var(--ink-2);
  font-size: 17px;
  margin: 0;
}

.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 {
  font-size: 16.5px;
  margin-bottom: 8px;
}

.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}

.card .num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.check-list {
  columns: 2;
  column-gap: 34px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.check-list li {
  break-inside: avoid;
  padding: 9px 0 9px 28px;
  position: relative;
  font-size: 15.4px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 10px;
  border: solid var(--pass);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* ----------------------------------------------------------------- FAQ */

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

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

.faq summary::after {
  content: "+";
  color: var(--ink-3);
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  margin: 12px 0 0;
  color: var(--ink-2);
  max-width: 70ch;
}

/* -------------------------------------------------------------- report */

.report-head {
  padding: 40px 0 30px;
  border-bottom: 1px solid var(--line);
}

.report-target {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-3);
  word-break: break-all;
}

.scorecard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 34px;
  align-items: center;
  padding: 34px 0;
}

.gauge {
  --pct: 0;
  --tone: var(--medium);
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--tone) calc(var(--pct) * 1%), var(--line-2) 0);
  flex: none;
}

.gauge > div {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
}

.gauge b {
  display: block;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tone);
}

.gauge small {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 6px;
}

.verdict h2 {
  font-size: 24px;
  margin-bottom: 8px;
}

.verdict p {
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.pill {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--low-bg);
  color: var(--low);
}

.pill.critical {
  background: var(--critical-bg);
  color: var(--critical);
}

.pill.high {
  background: var(--high-bg);
  color: var(--high);
}

.pill.medium {
  background: var(--medium-bg);
  color: var(--medium);
}

.pill.pass {
  background: var(--pass-bg);
  color: var(--pass);
}

/* section score bars */

.bars {
  display: grid;
  gap: 14px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.bars li {
  display: grid;
  grid-template-columns: 200px 1fr 46px;
  align-items: center;
  gap: 16px;
  font-size: 14.5px;
}

.bars .track {
  height: 8px;
  background: var(--line-2);
  border-radius: 4px;
  overflow: hidden;
}

.bars .track i {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.bars .val {
  text-align: right;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* findings */

.finding {
  border: 1px solid var(--line);
  border-left: 3px solid var(--low);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 16px;
  background: #fff;
}

.finding.critical {
  border-left-color: var(--critical);
}

.finding.high {
  border-left-color: var(--high);
}

.finding.medium {
  border-left-color: var(--medium);
}

.finding.pass {
  border-left-color: var(--pass);
}

.finding.info {
  border-left-color: var(--brand);
  background: var(--bg-2);
}

.finding-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--low-bg);
  color: var(--low);
}

.tag.critical {
  background: var(--critical-bg);
  color: var(--critical);
}

.tag.high {
  background: var(--high-bg);
  color: var(--high);
}

.tag.medium {
  background: var(--medium-bg);
  color: var(--medium);
}

.tag.pass {
  background: var(--pass-bg);
  color: var(--pass);
}

.tag.info {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.tag.section {
  background: transparent;
  color: var(--ink-3);
  padding-left: 0;
  letter-spacing: 0.05em;
}

.finding h3 {
  font-size: 17.5px;
  margin: 0 0 10px;
}

.finding p {
  color: var(--ink-2);
  margin: 0 0 12px;
  font-size: 15.4px;
}

.finding .fix {
  background: var(--brand-tint);
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 15px;
  color: #16324f;
  margin-bottom: 12px;
}

.finding .fix b {
  color: var(--brand-dark);
}

.finding .evidence {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 12.8px;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
}

.finding .evidence li {
  padding: 2px 0;
  word-break: break-all;
}

.finding .effort {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 10px;
}

/* paywall */

.paywall {
  position: relative;
  margin: 34px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.paywall-preview {
  padding: 22px 24px 0;
  max-height: 168px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 32%, transparent 100%);
  mask-image: linear-gradient(#000 32%, transparent 100%);
}

.locked-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2);
}

.locked-bar {
  height: 11px;
  border-radius: 4px;
  background: var(--line-2);
  flex: 1;
}

.paywall-body {
  padding: 8px 30px 30px;
  text-align: center;
}

.paywall-body h2 {
  font-size: 25px;
  margin-bottom: 10px;
}

.paywall-body > p {
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto 22px;
}

.price {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1;
}

.price small {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-top: 8px;
}

.buy-form {
  max-width: 380px;
  margin: 24px auto 0;
  display: grid;
  gap: 11px;
  text-align: left;
}

.buy-form input {
  font: inherit;
  font-size: 15.5px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}

.buy-form input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 86, 211, 0.14);
}

.buy-note {
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  margin: 14px auto 0;
  max-width: 44ch;
}

.notice {
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 14.5px;
  margin: 0 0 16px;
}

.notice.error {
  background: var(--critical-bg);
  color: var(--critical);
}

.notice.ok {
  background: var(--pass-bg);
  color: var(--pass);
}

.notice.warn {
  background: var(--medium-bg);
  color: var(--medium);
}

.state {
  padding: 70px 20px;
  text-align: center;
  color: var(--ink-3);
}

.cta-band {
  background: linear-gradient(168deg, #0d1620, #16305c);
  color: #fff;
  border-radius: 14px;
  padding: 36px 34px;
  margin: 44px 0;
  text-align: center;
}

.cta-band h2 {
  color: #fff;
  font-size: 24px;
}

.cta-band p {
  color: #b9c6d8;
  max-width: 56ch;
  margin: 0 auto 22px;
}

.cta-band .btn {
  background: #fff;
  color: var(--ink);
  display: inline-block;
  text-decoration: none;
  padding: 14px 30px;
  width: auto;
}

.cta-band .btn:hover {
  background: #e8eef8;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
  color: var(--ink-3);
  font-size: 14.5px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.site-footer a {
  color: var(--ink-2);
  text-decoration: none;
  margin-left: 20px;
}

.site-footer a:first-child {
  margin-left: 0;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 720px) {
  .hero {
    padding: 52px 0 58px;
  }

  .scan-form {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .check-list {
    columns: 1;
  }

  .scorecard {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 22px;
  }

  .verdict p {
    margin-inline: auto;
  }

  .tally {
    justify-content: center;
  }

  .bars li {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .bars .val {
    text-align: left;
  }

  .site-header nav {
    display: none;
  }
}

/* ---------------------------------------------------------------- print */

@media print {
  .site-header,
  .site-footer,
  .paywall,
  .cta-band,
  .no-print {
    display: none !important;
  }

  body {
    font-size: 11.5pt;
  }

  .finding {
    break-inside: avoid;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .gauge {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  section {
    padding: 12px 0;
  }
}