/* Foundry — steel & ember. No webfonts, no framework, no build step. */

:root {
  --ink: #0f1418;
  --steel: #33404c;
  /* #6b7885 measured 4.24:1 on --shell, under WCAG AA's 4.5 for normal text.
     It only failed on the tinted band (connection steps, footer), and passed
     on white by 0.02 — close enough that the next tweak would have broken it.
     #667380 clears both: 4.55:1 on shell, 4.85:1 on paper. */
  --slate: #667380;
  --mist: #e4e9ed;
  --shell: #f6f8f9;
  --paper: #ffffff;
  --ember: #b8490b;
  --ember-lit: #e0761f;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

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

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

/* The signature: a poured-metal hairline. Cools from ember to nothing. */
.molten {
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    var(--ember) 0%,
    var(--ember-lit) 18%,
    var(--mist) 62%,
    transparent 100%
  );
}

.wrap {
  max-width: 74rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.prose {
  max-width: var(--measure);
}

/* When .prose shares an element with .wrap, the wrap's auto margins would
   center the narrow measure and break alignment with every other section.
   Keep the wrap full width and constrain its children instead. */
.wrap.prose {
  max-width: 74rem;
}

.wrap.prose > * {
  max-width: var(--measure);
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--mist);
}

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

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 680;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 1px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--ember-lit), var(--ember));
}

.nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.9rem;
}

.nav a {
  color: var(--slate);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ember);
}

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

.hero {
  padding-block: clamp(4rem, 11vw, 8rem) clamp(3rem, 8vw, 5.5rem);
  background: linear-gradient(180deg, var(--shell) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--mist);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 1.25rem;
}

h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 1.5rem;
  max-width: 16ch;
}

.lede {
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--steel);
  max-width: 54ch;
  margin: 0 0 2.25rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 560;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--ember);
}

.btn-ghost {
  border-color: var(--mist);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--ink);
}

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

.band {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.band-tint {
  background: var(--shell);
  border-block: 1px solid var(--mist);
}

h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-weight: 680;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -0.012em;
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 1.1rem;
}

.section-lede {
  color: var(--steel);
  max-width: 56ch;
  margin-bottom: 2.75rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 2rem;
}

.card {
  padding-top: 1.5rem;
  border-top: 2px solid var(--mist);
}

.card:first-child {
  border-top-color: var(--ember);
}

.card p {
  color: var(--slate);
  font-size: 0.95rem;
  margin: 0;
}

/* A real sequence — the order is what a connection actually does. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
  max-width: var(--measure);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ember);
  padding-top: 0.28rem;
}

.steps strong {
  display: block;
  font-weight: 620;
  margin-bottom: 0.2rem;
}

.steps span {
  color: var(--slate);
  font-size: 0.95rem;
}

/* ---------- legal documents ---------- */

.doc-head {
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
  border-bottom: 1px solid var(--mist);
}

.doc-head h1 {
  max-width: 22ch;
  margin-bottom: 0.75rem;
}

.stamp {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--slate);
  letter-spacing: 0.02em;
}

.doc {
  padding-block: 3rem 4.5rem;
}

.doc h2 {
  font-size: 1.35rem;
  margin-top: 3rem;
  padding-top: 0.35rem;
  scroll-margin-top: 5rem;
}

.doc h2:first-of-type {
  margin-top: 0;
}

.doc h3 {
  margin-top: 1.75rem;
}

.doc ul {
  padding-left: 1.15rem;
  margin: 0 0 1.1rem;
}

.doc li {
  margin-bottom: 0.5rem;
}

.doc a {
  color: var(--ember);
  text-underline-offset: 2px;
}

/* Pulled out because a reviewer looks for exactly these. */
.pledge {
  border-left: 2px solid var(--ember);
  background: var(--shell);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
}

.pledge p:last-child {
  margin-bottom: 0;
}

.toc {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2.5rem;
  font-size: 0.9rem;
}

.toc li {
  margin-bottom: 0.4rem;
  break-inside: avoid;
}

.toc a {
  color: var(--steel);
  text-decoration: none;
}

.toc a:hover {
  color: var(--ember);
  text-decoration: underline;
}

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.contact-card {
  border: 1px solid var(--mist);
  border-radius: 4px;
  padding: 1.75rem;
}

.contact-card .label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.75rem;
}

.contact-card a {
  font-size: 1.05rem;
  font-weight: 560;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ember);
  word-break: break-word;
}

.contact-card a:hover {
  color: var(--ember);
}

.contact-card p {
  color: var(--slate);
  font-size: 0.9rem;
  margin: 0.85rem 0 0;
}

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

.foot {
  border-top: 1px solid var(--mist);
  background: var(--shell);
  padding-block: 2.75rem;
  font-size: 0.88rem;
  color: var(--slate);
}

.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.foot a {
  color: var(--steel);
  text-decoration: none;
  margin-right: 1.5rem;
}

.foot a:hover {
  color: var(--ember);
  text-decoration: underline;
}

.foot .disclaim {
  flex-basis: 100%;
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
  max-width: 62ch;
}

/* ---------- quality floor ---------- */

a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: 3px;
}

@media (max-width: 40rem) {
  .nav {
    gap: 1.1rem;
    font-size: 0.85rem;
  }
  .toc {
    columns: 1;
  }
}

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

/* ---------- print ----------
   Policies get saved and printed — by users keeping a copy, and by reviewers
   reading them away from a browser. Screen chrome carries no meaning on paper,
   and a printed link whose target is invisible is a dead reference. */

@media print {
  .masthead,
  .skip,
  .molten,
  .foot a,
  .toc {
    display: none;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  .wrap {
    max-width: none;
    padding-inline: 0;
  }

  .doc-head,
  .doc,
  .band,
  .hero {
    padding-block: 0;
    background: none;
    border: 0;
  }

  .band-tint,
  .pledge {
    background: none;
  }

  /* The callouts carry the clauses a reviewer is looking for. Keep them
     distinguishable once the fill colour is gone. */
  .pledge {
    border-left: 2pt solid #000;
    padding-left: 10pt;
  }

  h1 {
    font-size: 20pt;
  }

  .doc h2 {
    font-size: 13pt;
    margin-top: 16pt;
  }

  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  /* A reference the reader cannot follow is not a reference. */
  .doc a[href^="http"]::after,
  .doc a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .doc a {
    color: #000;
    text-decoration: underline;
  }

  .foot {
    border-top: 1pt solid #000;
    background: none;
    padding-block: 8pt;
  }

  @page {
    margin: 18mm;
  }
}