/* ==========================================================================
   CommissionClerk — landing page
   No preprocessor, no external fonts, no third-party CSS.
   ========================================================================== */

:root {
  /* Colour ------------------------------------------------------------- */
  --paper:      #F7F5EF; /* ivory background                              */
  --paper-2:    #EFEBE0; /* quiet band fill                               */
  --ink:        #202824; /* graphite body text   — 13.5:1 on --paper      */
  --ink-soft:   #4C5551; /* secondary text       —  7.0:1 on --paper      */
  --green:      #234E43; /* primary              —  8.6:1 on --paper      */
  --green-deep: #16332C; /* button hover                                  */
  --terracotta: #A33A2B; /* auditor's annotations —  6.0:1 on --paper     */
  --rule:       #D3CDBC; /* hairlines only, never text                    */
  --rule-firm:  #8C836A; /* hairlines that must reach 3:1                 */

  /* Type --------------------------------------------------------------- */
  --serif: Georgia, "Times New Roman", "Nimbus Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-body:  1.125rem; /* 18px */
  --fs-small: 0.9375rem;
  --fs-mono:  0.9375rem;
  --lh-body:  1.6;

  /* Space -------------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --measure: 66ch;
  --gutter: var(--s5);
  --radius: 2px;
}

/* Reset ------------------------------------------------------------------ */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); }
h3 { font-size: 1.1875rem; }

p, ul, ol, dl { margin: 0 0 var(--s4); }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }

a { color: var(--green); text-underline-offset: 0.15em; }
a:hover { color: var(--green-deep); }

strong { font-weight: 700; }

/* Focus ------------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 1px;
}

.btn-primary:focus-visible {
  outline-color: var(--ink);
  outline-offset: 3px;
}

/* Utilities -------------------------------------------------------------- */

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

/* Constrains the reading width of the children rather than the container, so
   body sections keep the same left edge as the hero instead of centring. */
.measure > * { max-width: var(--measure); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100%;
  z-index: 10;
  padding: var(--s3) var(--s4);
  background: var(--green);
  color: #FFFFFF;
  font-size: var(--fs-small);
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--s4);
  color: #FFFFFF;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-block: var(--s4);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark:hover { color: var(--green); }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}

.nav-list a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-firm);
  padding-bottom: 1px;
}

.nav-list a:hover { color: var(--green); border-bottom-color: var(--green); }

/* Hero ------------------------------------------------------------------- */

.hero { padding-block: var(--s7) var(--s8); }

.hero-grid {
  display: grid;
  gap: var(--s7);
}

@media (min-width: 62rem) {
  .hero-grid {
    grid-template-columns: 55fr 45fr;
    gap: var(--s9);
    align-items: start;
  }

  /* The sample report is intrinsically taller than the message. Letting the
     message breathe keeps the two columns from ending far apart. */
  .hero-message h1 { margin-bottom: var(--s5); }
  .hero-message .lede { font-size: 1.25rem; margin-bottom: var(--s6); }
  .hero-message .status { margin-bottom: var(--s7); }
  .hero-message .cta-row { margin-bottom: var(--s5); }
}

.hero-message > * { max-width: 34rem; }

.lede {
  font-size: 1.1875rem;
  color: var(--ink);
  margin-bottom: var(--s5);
}

.status {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  border-left: 2px solid var(--rule-firm);
  padding-left: var(--s4);
  margin-bottom: var(--s6);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  margin-bottom: var(--s4);
}

.microcopy {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-primary {
  background: var(--green);
  color: #FFFFFF;
  border: 1px solid var(--green);
  padding: var(--s3) var(--s5);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #FFFFFF;
}

.btn-primary[disabled] {
  opacity: 1;
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  cursor: progress;
}

.btn-quiet {
  color: var(--green);
  border-bottom: 1px solid var(--green);
  padding-bottom: 1px;
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary, .nav-list a, a { transition: background-color 120ms linear, color 120ms linear; }
}

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

.report {
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  background: #FFFFFF;
  padding: var(--s5);
}

.report-flag {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
}

.report-title { font-size: 1.25rem; margin-bottom: var(--s1); }

.report-sub {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-bottom: var(--s5);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-mono);
  margin-bottom: var(--s5);
}

.report-table th,
.report-table td {
  text-align: left;
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.report-table thead th {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--rule-firm);
  padding-top: 0;
}

.report-table th:first-child,
.report-table td:first-child { padding-left: 0; }

.report-table th:last-child,
.report-table td:last-child { padding-right: 0; }

.report-table .num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-table tbody th { font-weight: 400; }

.policy {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
}

.case {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 2px;
}

.diff { color: var(--ink); font-weight: 700; }

.report-table tfoot th {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  border-bottom: 0;
  padding-top: var(--s4);
}

.report-table tfoot .total {
  font-weight: 700;
  border-bottom: 0;
  padding-top: var(--s4);
}

.checks-title {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--s3);
}

.checks {
  margin: 0 0 var(--s5);
  padding-left: 1.1em;
  font-size: 0.875rem;
  color: var(--terracotta);
  line-height: 1.45;
}

.checks li { margin-bottom: var(--s3); }
.checks li:last-child { margin-bottom: 0; }

.checks .policy {
  display: inline;
  color: var(--terracotta);
  margin-right: 0.35em;
}

.report-caveat {
  font-size: var(--fs-small);
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: var(--s4);
}

/* Bands ------------------------------------------------------------------ */

.band {
  padding-block: var(--s8);
  border-top: 1px solid var(--rule);
}

.band-quiet { background: var(--paper-2); }

/* Steps ------------------------------------------------------------------ */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: var(--s6);
}

.steps > li:last-child { margin-bottom: 0; }

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--green);
  border: 1px solid var(--rule-firm);
  border-radius: 50%;
}

.steps h3 { margin-bottom: var(--s2); }

/* Founder note ----------------------------------------------------------- */

.note {
  margin: 0;
  border-left: 2px solid var(--terracotta);
  padding-left: var(--s5);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.note p { margin-bottom: var(--s4); }
.note p:last-child { margin-bottom: 0; }

/* Scope and data --------------------------------------------------------- */

.band h3 {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.steps h3, .band h3:first-of-type { border-top: 0; padding-top: 0; }
.steps h3 { margin-top: 0; }

.plain { padding-left: 1.1em; }
.plain li { margin-bottom: var(--s2); }

.data-list { margin-bottom: 0; }

.data-list dt {
  font-weight: 700;
  font-size: var(--fs-small);
  margin-top: var(--s4);
}

.data-list dt:first-child { margin-top: 0; }

.data-list dd {
  margin: var(--s1) 0 0;
  color: var(--ink);
}

/* Form ------------------------------------------------------------------- */

.request-form {
  margin-top: var(--s6);
  max-width: 34rem;
}

.field { margin-bottom: var(--s5); }

.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  margin-bottom: var(--s2);
}

.opt { font-weight: 400; color: var(--ink-soft); }

.field input,
.field textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  padding: var(--s3);
}

.field textarea { resize: vertical; }

.field .hint {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: var(--s2) 0 0;
}

.field .error {
  font-size: 0.875rem;
  color: var(--terracotta);
  font-weight: 700;
  margin: var(--s2) 0 0;
}

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--terracotta); border-width: 2px; }

.hp { display: none; }

.form-actions { margin-bottom: var(--s4); }

.form-status:empty { display: none; }

.form-status {
  font-size: var(--fs-small);
  border-left: 3px solid var(--rule-firm);
  padding: var(--s3) var(--s4);
  margin: 0;
  background: var(--paper);
}

.form-status.is-error { border-left-color: var(--terracotta); }
.form-status.is-success { border-left-color: var(--green); }

.alt-contact {
  margin-top: var(--s5);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s6);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.site-footer p { margin-bottom: var(--s2); }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--green); }

/* Standalone pages ------------------------------------------------------- */

.page-narrow {
  padding-block: var(--s9);
}

.page-narrow h1 { margin-bottom: var(--s5); }

/* Small screens ---------------------------------------------------------- */

@media (max-width: 30rem) {
  :root { --gutter: var(--s4); }

  .report { padding: var(--s4); }
  .report-table { font-size: 0.875rem; }
  .report-table th,
  .report-table td { padding: var(--s3) var(--s1); }
  .report-table thead th { font-size: 0.75rem; }
  .case { font-size: 0.75rem; }
}

/* Below ~360px the report table sets the minimum width of the whole grid
   column, which would push the hero sideways. Tighten it just enough that the
   page still reflows without horizontal scrolling at 320px (WCAG 1.4.10). */
@media (max-width: 22.5rem) {
  .report { padding: var(--s3); }
  .report-table { font-size: 0.8125rem; }
  .report-table th,
  .report-table td { padding: var(--s3) 2px; }
  .checks { padding-left: 1em; }
}