/* AuditTag — design tokens.
   One grotesk family at two weights; mono is reserved for actual file
   content, never for labelling. */

:root {
  --bg: #FAFAF7;
  --ink: #17171A;
  --flag: #E4572E;
  --fixed: #1F9D6B;
  --slate: #6B7280;

  /* Brand orange from the logo. Deliberately separate from --flag: --flag has
     to read as "something is wrong", which the softer brand tone does not. */
  --brand: #F98B5C;

  /* Text variants of the accent colours.
     --flag and --fixed are tuned to look right as fills, borders and dots,
     where WCAG asks for 3:1 or nothing at all. As *text* they only reach
     ~3.3:1, which fails. Rather than darken the accents everywhere and dull
     the whole palette, reading text uses these. Verified by
     `node scripts/contrast.js`. */
  --flag-text: #C33F16;
  --fixed-text: #00764A;

  /* Hairlines come in two weights for a reason. --line is decoration: card
     outlines and section dividers, which WCAG exempts because the thing they
     outline is identifiable without them. --control-line is the visible edge
     of something you operate, which must clear 3:1. */
  --line: #E7E5E0;
  --control-line: #8C8A85;

  --placeholder: #767268;

  --flag-wash: #FDF1ED;
  --fixed-wash: #ECF7F2;
  --raise: #FFFFFF;

  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --rhythm: clamp(4rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.35rem, 5.4vw, 3.9rem); letter-spacing: -0.033em; }
h2 { font-size: clamp(1.65rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }

.shell { width: min(100% - var(--gutter) * 2, 1180px); margin-inline: auto; }

.lede { color: var(--slate); font-size: 1.0625rem; max-width: 46ch; }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 0;
}

/* The wordmark is public/logo.svg — geometric letterforms drawn as stroked
   paths, so it stays crisp at any size and needs no font to load. */
.wordmark { display: inline-block; line-height: 0; }
.wordmark img { display: block; height: 1.75rem; width: auto; }

.site-foot .wordmark img { height: 1.5rem; }

.masthead nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.9375rem;
  color: var(--slate);
}

.masthead nav a { text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(2.5rem, 6vw, 5rem) 0 var(--rhythm);
}

.hero-copy > * + * { margin-top: 1.5rem; }

.hero h1 .quiet { color: var(--slate); }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--slate);
  padding-top: 0.25rem;
}

.trust span { display: inline-flex; align-items: center; gap: 0.5rem; }

.trust span::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--fixed);
  flex: none;
}

/* ---------- audit form ---------- */

.audit-form {
  display: flex;
  gap: 0.625rem;
  max-width: 34rem;
  flex-wrap: wrap;
}

.audit-form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

.audit-form input {
  flex: 1 1 16rem;
  min-width: 0;
  font: 400 1rem/1 var(--sans);
  color: var(--ink);
  background: var(--raise);
  border: 1px solid var(--control-line);
  border-radius: 3px;
  padding: 0.875rem 0.9375rem;
}

.audit-form input::placeholder { color: var(--placeholder); }

.audit-form input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  border-color: var(--ink);
}

.btn {
  font: 600 0.9375rem/1 var(--sans);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 0.9375rem 1.375rem;
  cursor: pointer;
  background: var(--ink);
  color: var(--bg);
  white-space: nowrap;
}

.btn:hover:not(:disabled) { background: #000; }
.btn:disabled { opacity: 0.5; cursor: progress; }

.btn-plain {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-plain:hover:not(:disabled) { background: var(--raise); border-color: var(--ink); }

.form-note { font-size: 0.875rem; color: var(--slate); margin-top: 0.875rem; }
.form-error { font-size: 0.9375rem; color: var(--flag-text); margin-top: 0.875rem; }

/* ---------- diff panel: the product showing its own output ---------- */

.panel {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6875rem 0.9375rem;
  border-bottom: 1px solid var(--line);
  background: #FCFCFA;
}

.panel-file { font: 400 0.8125rem/1 var(--mono); color: var(--slate); }

.panel-status {
  font-size: 0.8125rem;
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
}

.panel-status::before {
  content: '';
  width: 0.4375rem; height: 0.4375rem;
  border-radius: 50%;
  background: var(--fixed);
}

.diff { padding: 0.5rem 0; min-height: 19rem; }

.diff-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  padding: 0.3125rem 0.9375rem 0.3125rem 0;
  font: 400 0.8125rem/1.65 var(--mono);
  border-left: 2px solid transparent;
  overflow-wrap: anywhere;
}

.diff-row .sign { text-align: center; user-select: none; }

.diff-row.removed { background: var(--flag-wash); border-left-color: var(--flag); }
.diff-row.removed .sign { color: var(--flag-text); }
.diff-row.added { background: var(--fixed-wash); border-left-color: var(--fixed); }
.diff-row.added .sign { color: var(--fixed-text); }
.diff-row.context { color: var(--slate); }

.diff-caption {
  border-top: 1px solid var(--line);
  padding: 0.8125rem 0.9375rem;
  font-size: 0.875rem;
  color: var(--slate);
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.diff-caption b { font-weight: 600; color: var(--ink); }

.panel-ticks { display: flex; gap: 0.3125rem; margin-left: auto; flex: none; }

.tick {
  width: 1.375rem;
  height: 2px;
  background: var(--control-line);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.tick[aria-current='true'] { background: var(--ink); }

/* ---------- section furniture ---------- */

.band { padding-block: var(--rhythm); border-top: 1px solid var(--line); }
.band-head { max-width: var(--measure); margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.band-head p { color: var(--slate); margin-top: 0.875rem; }

/* ---------- how it works: genuinely sequential, so numbered ---------- */

/* The list stays an <ol> for semantics, but the visible numbering is the
   step label, so the native markers are suppressed. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step { padding: 1.75rem 1.75rem 1.75rem 0; border-top: 2px solid var(--ink); }
.step + .step { padding-left: 1.75rem; border-left: 1px solid var(--line); }

.step-n {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  display: block;
  margin-bottom: 1.5rem;
}

.step h3 { margin-bottom: 0.625rem; }
.step p { color: var(--slate); font-size: 0.9375rem; }

/* ---------- checks: a ledger, not a card grid ---------- */

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

.check {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: 1.25rem 2rem;
  align-items: baseline;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}

.check h3 { font-size: 1rem; }
.check p { color: var(--slate); font-size: 0.9375rem; }

.how {
  font-size: 0.8125rem;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.1875rem 0.5rem;
  white-space: nowrap;
  justify-self: end;
}

.how.written { color: var(--fixed-text); border-color: #BFE3D3; background: var(--fixed-wash); }

.excluded { margin-top: 2rem; color: var(--slate); font-size: 0.9375rem; max-width: var(--measure); }
.excluded b { color: var(--ink); font-weight: 600; }

/* ---------- platforms ---------- */

.platforms { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.platform {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1rem 1.25rem;
  background: var(--raise);
  min-width: 11rem;
}

.platform b { display: block; font-weight: 600; font-size: 0.9375rem; }
.platform span { font-size: 0.8125rem; color: var(--slate); }
.platform.soon { background: transparent; border-style: dashed; opacity: 0.66; }

/* ---------- pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 52rem; }

.plan { border: 1px solid var(--line); border-radius: 4px; padding: 1.75rem; background: var(--raise); }
.plan.pick { border: 2px solid var(--ink); }

.plan h3 { font-size: 1rem; }

.price {
  font-size: 2.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 1rem 0 0.25rem;
  font-variant-numeric: tabular-nums;
}

.price small { font-size: 0.9375rem; font-weight: 400; color: var(--slate); letter-spacing: 0; }

.plan ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6875rem; font-size: 0.9375rem; }
.plan li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.625rem; align-items: start; color: var(--slate); }
.plan li b { color: var(--ink); font-weight: 400; }
.plan li::before { content: ''; width: 0.5rem; height: 0.5rem; margin-top: 0.4375rem; border-radius: 50%; background: var(--fixed); }
.plan li.no::before { background: var(--line); }

/* ---------- faq ---------- */

.faq { max-width: 46rem; border-top: 1px solid var(--line); }

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

.faq summary {
  cursor: pointer;
  padding: 1.125rem 0;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
}

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

.faq summary::after {
  content: '';
  flex: none;
  width: 0.625rem; height: 0.625rem;
  border-right: 1.5px solid var(--slate);
  border-bottom: 1.5px solid var(--slate);
  transform: rotate(45deg) translate(-2px, -2px);
}

.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { color: var(--slate); padding-bottom: 1.25rem; max-width: var(--measure); }

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

.site-foot { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; }

.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.foot-cols h4 { font-size: 0.875rem; margin-bottom: 1rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; font-size: 0.9375rem; }
.foot-cols a { color: var(--slate); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); }
.foot-note { color: var(--slate); font-size: 0.875rem; max-width: 28ch; }

.foot-rule {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--slate);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

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

.report { padding-block: clamp(2rem, 5vw, 3.5rem) var(--rhythm); }
.report[hidden] { display: none; }

.report-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
}

.report-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.report-target { font: 400 0.9375rem/1.5 var(--mono); color: var(--slate); margin-top: 0.5rem; }

.score { text-align: right; }
.score b { display: block; font-size: 3rem; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.score span { font-size: 0.875rem; color: var(--slate); }

.tallies { display: flex; flex-wrap: wrap; gap: 1.75rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.tally { display: inline-flex; align-items: baseline; gap: 0.5rem; color: var(--slate); }
.tally b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tally.critical b { color: var(--flag-text); }

.issue-group { border-bottom: 1px solid var(--line); padding: 1.5rem 0; }
.issue-group h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.875rem; }
.issue-group h3.as-path { font: 400 0.9375rem/1.5 var(--mono); word-break: break-all; color: var(--slate); }

.issue { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; padding: 0.5rem 0; align-items: baseline; font-size: 0.9375rem; }

.sev { font-size: 0.8125rem; font-weight: 600; }
.sev.critical { color: var(--flag-text); }
.sev.warning { color: #B45309; }
.sev.notice { color: var(--slate); }

.issue-detail { color: var(--slate); font-size: 0.875rem; margin-top: 0.25rem; }

.unlock {
  margin-top: 2.5rem;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 1.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  background: var(--raise);
}

.unlock p { color: var(--slate); font-size: 0.9375rem; margin-top: 0.5rem; max-width: 48ch; }

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

.working { display: grid; gap: 0.75rem; padding: 1.5rem 0; }
.working[hidden] { display: none; }

.bar { height: 2px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 32%; background: var(--ink); animation: sweep 1.15s ease-in-out infinite; }

@keyframes sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(420%); }
}

.working p { font-size: 0.9375rem; color: var(--slate); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { padding: 1.5rem 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 2px solid var(--ink); }
  .step + .step { padding-left: 0; border-left: 0; }
  .check { grid-template-columns: 1fr; gap: 0.375rem; }
  .how { justify-self: start; }
  .plans { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .unlock { grid-template-columns: 1fr; }
  .report-head { grid-template-columns: 1fr; align-items: start; }
  .score { text-align: left; }
  .issue { grid-template-columns: 1fr; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bar i { animation: none; width: 100%; }
  * { transition: none !important; }
}

.diff-note { color: var(--fixed-text); font-size: 0.8125rem; }

/* ---------- prose pages (bot, docs) ---------- */

.prose { padding-block: clamp(2rem, 5vw, 3.5rem) var(--rhythm); max-width: 42rem; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.prose .lede { margin-top: 1.25rem; max-width: none; }
.prose h2 { font-size: 1.25rem; margin-top: 2.75rem; }
.prose p { margin-top: 1rem; color: var(--slate); }
.prose p a { color: var(--ink); }
.prose code { font: 400 0.875em/1 var(--mono); }
.prose .panel { margin-top: 1.5rem; }
.prose .panel .diff { min-height: 0; }

.plain { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.plain li {
  color: var(--slate);
  padding-left: 1.125rem;
  border-left: 2px solid var(--line);
}

/* ---------- tiers ---------- */

.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.plan-note { margin-top: 1rem; font-size: 0.875rem; color: var(--slate); }

.tier-choices { display: flex; gap: 0.625rem; flex-wrap: wrap; }

.tier-btn {
  display: grid;
  gap: 0.1875rem;
  justify-items: start;
  text-align: left;
  font: 400 0.9375rem/1.3 var(--sans);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  min-width: 8.5rem;
}

.tier-btn b { font-weight: 600; }
.tier-btn span { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.tier-btn small { color: var(--slate); font-size: 0.8125rem; }

.tier-btn:hover:not(:disabled) { border-color: var(--ink); }
.tier-btn:disabled { opacity: 0.5; cursor: progress; }

/* The tier that actually fits the site we just crawled. */
.tier-btn.picked { border: 2px solid var(--ink); background: var(--raise); }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .tier-choices { width: 100%; }
  .tier-btn { flex: 1 1 8rem; }
}

/* A check we report but deliberately never fix for the customer. */
.how.flagged { color: var(--slate); border-style: dashed; }

/* ---------- plan badge ---------- */

.plan { position: relative; }

.plan-badge {
  position: absolute;
  top: 0;
  left: 1.75rem;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.3125rem 0.625rem;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---------- the rest of the site, by issue type ---------- */

.withheld {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate);
  border-radius: 4px;
  background: var(--raise);
}

.withheld h3 { font-size: 1rem; }
.withheld > p { color: var(--slate); font-size: 0.9375rem; margin-top: 0.5rem; }

.withheld-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1.5rem;
}

.withheld-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--slate);
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--line);
}

.withheld-list b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 1.75rem;
}

.withheld-note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--slate); }

/* ---------- keyboard and pointer access ----------
   Added after auditing the site against .claude/skills/web-design. Two gaps
   it found: focus was only styled on the text input, and the panel ticks were
   a 22x2px hit target. */

/* :where() keeps specificity at zero, so any component can still style its
   own focus without fighting this. The offset puts the ring outside the
   element, which is what makes it visible on the dark buttons too. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The ticks stay 2px tall visually — they are a progress hairline, and making
   them physically bigger would wreck the panel. The hit area is expanded with
   a transparent pseudo-element instead: ~30x46px, clearing WCAG 2.2's 24x24
   minimum without changing a pixel of the design. */
.tick { position: relative; }

.tick::after {
  content: '';
  position: absolute;
  inset: -1.375rem -0.25rem;
}