/* Free Scan page — reuses the site's design tokens, adds the form/results
   pieces that don't exist anywhere else on the marketing site. No inline
   styles anywhere here (CSP has no 'unsafe-inline' on style-src), so rank
   colors are classes, not JS-set style attributes. */

.fs-form {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.fs-form__row { display: grid; gap: 6px; }
.fs-form__row--split { grid-template-columns: 1fr 1fr; gap: 18px; }

.fs-form label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-ink-soft, #665d54);
}

.fs-form input {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid rgba(38, 38, 37, .3);
  border-radius: 0;
  background: var(--color-shell, #f3f2e7);
  color: var(--color-baltic, #262625);
}

.fs-form input:focus {
  outline: 2px solid var(--color-baltic, #262625);
  outline-offset: 1px;
}

.fs-form__submit {
  justify-self: start;
  border: none;
  cursor: pointer;
}

.fs-form__consent {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--color-ink-soft, #665d54);
  margin: 2px 0 0;
}

.fs-form__note {
  min-height: 1.2em;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
}

.fs-form__note--error { color: #9c3b32; }
.fs-form__note--ok { color: #4a6b4a; }

.fs-results {
  max-width: 720px;
  margin: 48px auto 0;
  border-top: 1px solid rgba(38, 38, 37, .25);
  padding-top: 32px;
}

.fs-results__metrics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.fs-results__metrics .metric {
  background: var(--color-moonmist, #e3dac8);
  padding: 14px 18px;
  text-align: center;
  flex: 1;
  min-width: 130px;
  border: 1px solid rgba(38, 38, 37, .15);
}

.fs-results__metrics .metric b {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-baltic, #262625);
}

.fs-results__metrics .metric span {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-ink-soft, #665d54);
}

.fs-results__grid-wrap h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.fs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 260px;
}

.fs-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: .9rem;
}

.fs-tile--top { background: #4a6b4a; }
.fs-tile--mid { background: #b8873b; }
.fs-tile--low { background: #bf6b3a; }
.fs-tile--none { background: #9c3b32; }

.fs-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--color-ink-soft, #665d54);
}

.fs-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 5px;
  vertical-align: -1px;
}

.fs-dot--top { background: #4a6b4a; }
.fs-dot--mid { background: #b8873b; }
.fs-dot--low { background: #bf6b3a; }
.fs-dot--none { background: #9c3b32; }

.fs-results__step {
  padding: 28px 0;
  border-bottom: 1px solid rgba(38, 38, 37, .15);
}

.fs-results__step:first-child { padding-top: 0; }

.fs-results__steplabel {
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-sanddune, #7e746a);
  margin: 0 0 14px;
}

.fs-results__gbp {
  padding: 18px 22px;
  background: var(--color-moonmist, #e3dac8);
  border-left: 3px solid var(--color-sanddune, #7e746a);
}

.fs-results__gbp h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.fs-results__gbp p { margin: 2px 0; }

.fs-teasers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.fs-teasers li {
  position: relative;
  padding: 16px 20px 16px 44px;
  background: var(--color-shell, #f3f2e7);
  border: 1px solid rgba(38, 38, 37, .18);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}

.fs-teasers li::before {
  content: "?";
  position: absolute;
  left: 16px;
  top: 14px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-baltic, #262625);
  color: var(--color-shell, #f3f2e7);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-teasers .locked {
  font-weight: 600;
  color: var(--color-baltic, #262625);
}

.fs-results__cta {
  margin-top: 8px;
  padding: 36px 24px;
  text-align: center;
  background: var(--color-baltic, #262625);
  color: var(--color-shell, #f3f2e7);
}

.fs-results__cta-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b9b3a8;
  margin: 0 0 10px;
}

.fs-results__cta h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  max-width: 520px;
  margin: 0 auto 20px;
  color: var(--color-shell, #f3f2e7);
}

/* View-only, by design: this tool never generates a print/PDF, and if a
   visitor prints the page anyway, hide the interactive parts. */
@media print {
  .fs-form, .fs-results { display: none !important; }
}