/* Sixth Touch — Snapshot. Warm paper, teal, serif headlines. Same brand as the print docs. */
:root {
  --ink: #111;
  --teal: #0E5A50;
  --teal-soft: #f2f7f6;
  --garnet: #7a1020;
  --garnet-soft: #faf3f4;
  --paper: #FAF8F4;
  --mut: #6b6b66;
  --line: #e2ddd3;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 Charter, Georgia, serif; }
.wrap { max-width: 780px; margin: 0 auto; padding: 0 22px; }

.masthead { border-bottom: 1px solid var(--line); padding: 26px 0 20px; }
.brand { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: 0.28em; color: var(--teal); font-size: 14px; }
.brand.small { font-size: 11px; }
.tagline { margin: 6px 0 0; font-style: italic; color: var(--mut); }

h1 { font-size: 40px; font-weight: 400; line-height: 1.15; margin: 40px 0 12px; }
h2 { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 19px; color: var(--teal); margin: 44px 0 8px; }
h3 { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; margin: 0 0 6px; }
h4 { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 15px; margin: 0 0 8px; }
.lede { font-size: 19px; }
.mut { color: var(--mut); font-size: 14px; }

.trustbar { border-left: 4px solid var(--teal); background: var(--teal-soft); padding: 14px 18px; margin: 26px 0; }
.warnbar { border-left: 4px solid var(--garnet); background: var(--garnet-soft); padding: 12px 16px; margin: 18px 0; }
.cleanbar { border-left: 4px solid var(--teal); background: var(--teal-soft); padding: 12px 16px; margin: 18px 0; font-size: 15px; }

.dropzone { border: 2px dashed #b9c9c5; border-radius: 10px; background: #fff; padding: 44px 28px; text-align: center; margin: 26px 0 10px; cursor: pointer; }
.dropzone.over { border-color: var(--teal); background: var(--teal-soft); }
.dz-main { font-size: 20px; margin: 0 0 8px; }
.dz-sub { color: var(--mut); font-size: 14px; margin: 0; }
.try { margin: 14px 0 34px; }

button.primary, a.primary.btn { font-family: "Helvetica Neue", Arial, sans-serif; background: var(--teal); color: #fff; border: 0; border-radius: 6px; padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
button.primary:hover, a.primary.btn:hover { background: #0b4a42; }
.linklike { background: none; border: 0; padding: 0; color: var(--teal); text-decoration: underline; cursor: pointer; font: inherit; }

.fineprint { margin: 26px 0; font-size: 14px; color: var(--mut); }
.fineprint summary { cursor: pointer; color: var(--ink); }

#maptable { border-collapse: collapse; width: 100%; margin: 18px 0 22px; background: #fff; border: 1px solid var(--line); }
#maptable th { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--teal); }
#maptable td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
#maptable .samp { color: var(--mut); font-size: 13px; }
#maptable select { font: inherit; padding: 6px; }
.orgline { margin: 8px 0 22px; }
.orgline input { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; width: 320px; max-width: 100%; }

.report-head { margin-top: 34px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0; }
.kpi { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--teal); padding: 14px 16px; }
.kpi .v { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 24px; font-weight: 700; color: var(--teal); }
.kpi .k { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mut); margin-top: 3px; }
.kpi.gap { border-top-color: var(--garnet); }
.kpi.gap .v { color: var(--garnet); }

.buckets { display: flex; align-items: flex-end; gap: 18px; margin: 20px 0 6px; height: 170px; }
.bucket { text-align: center; flex: 1; }
.bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--teal); }
.bar.b1 { background: #0E5A50; } .bar.b2 { background: #3d7f76; } .bar.b3 { background: #7fa8a1; }
.bar.b4 { background: #c9a06a; } .bar.b5 { background: #a4432f; }
.bn { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; margin-top: 6px; }
.bl { font-size: 12px; color: var(--mut); }

.datatable { border-collapse: collapse; width: 100%; margin: 14px 0; background: #fff; border: 1px solid var(--line); }
.datatable th { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--teal); }
.datatable td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.r { text-align: right; }

.note { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--teal); padding: 16px 18px; margin: 16px 0; }
.note .subj { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 600; margin: 4px 0; }
.note pre.body { white-space: pre-wrap; font: 15px/1.55 Charter, Georgia, serif; margin: 8px 0 12px; }
.noteacts { display: flex; gap: 18px; align-items: center; }

.afterbar { margin: 30px 0; display: flex; gap: 20px; align-items: center; }
.signup { background: var(--teal-soft); border: 1px solid #cfe0dc; border-radius: 10px; padding: 22px 24px; margin: 30px 0 50px; }
.signup form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.signup input[type=email], .signup input[type=text]:not(.hp) { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; flex: 1 1 200px; }
.hp { position: absolute; left: -9999px; }
.agg { font-size: 13px; color: var(--mut); flex-basis: 100%; }

.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 18px 22px 40px; color: var(--mut); font-size: 13px; }
.footer a { color: var(--teal); }

@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 30px; }
}
@media print {
  .noprint, .masthead, .footer #methodology[hidden] { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .kpi, .datatable, .note { break-inside: avoid; }
}