/*
  Shared shell for every page that is not the hero: the two policies and the
  affiliate page. The home page keeps its styles inline because it is one
  document and inlining is what makes it paint in a single request; these three
  share a file because triplicating a stylesheet is how they drift apart.

  Read mode. The job is comprehension, so the measure is tight, the rhythm is
  regular, and nothing competes with the prose.
*/

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/figtree-latin.woff2") format("woff2");
}

:root {
  --ink: #211e19;
  --leather: #4a3527;
  --stone: #6f6a61;
  --wash: #f7f5f1;
  --white: #fff;
  --hairline: #e6e1d9;
  --rust: #c75a1e;
  --rust-deep: #a84a15;
  --rust-deeper: #8f3e12;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family:
    Figtree,
    system-ui,
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Masthead ─────────────────────────────────────── */
.doc-top {
  border-bottom: 1px solid var(--hairline);
  background: var(--wash);
}

.doc-top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.doc-top img {
  width: 148px;
  height: auto;
  display: block;
  flex: none;
}

/* Both masthead links get a real tap area. Measured, the text link was 23px
   tall, which is under the 24px floor WCAG 2.2 sets at AA, and the wordmark
   link was 32px. Padding buys the height without moving anything visually. */
.doc-top a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rust-deeper);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.doc-top a:hover {
  text-decoration: underline;
}

/* ── Document ─────────────────────────────────────── */
main {
  padding: clamp(40px, 7vw, 72px) 0 clamp(56px, 9vw, 96px);
}

h1 {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.stamp {
  color: var(--stone);
  font-size: 13.5px;
  margin: 12px 0 0;
}

.lede {
  font-size: 18px;
  color: var(--stone);
  margin: 20px 0 0;
  max-width: 62ch;
}

h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* More above than below: the heading belongs to what follows it. */
  margin: 48px 0 12px;
}

h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 28px 0 6px;
}

p,
li {
  max-width: 68ch;
}

p {
  margin: 0 0 14px;
}

ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

a {
  color: var(--rust-deeper);
}

strong {
  font-weight: 700;
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 48px 0 0;
}

.note {
  background: var(--wash);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 28px 0;
  font-size: 15px;
}

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

/* ── Footer ───────────────────────────────────────── */
footer {
  border-top: 1px solid var(--hairline);
  background: var(--wash);
  padding: 28px 0 36px;
  font-size: 13.5px;
  color: var(--stone);
}

footer p {
  margin: 0 0 8px;
}

footer a {
  color: var(--stone);
  text-decoration: underline;
}

footer a:hover {
  color: var(--leather);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px;
}

.footer-links a {
  font-weight: 700;
  text-decoration: none;
  color: var(--leather);
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ── Forms ────────────────────────────────────────── */
label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.hint {
  font-weight: 400;
  color: var(--stone);
}

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

.row {
  margin-bottom: 18px;
}

button {
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--rust-deep);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.14s ease;
}

button:hover {
  background: var(--rust-deeper);
}

button[disabled] {
  background: var(--stone);
  cursor: default;
}

.msg {
  margin: 14px 0 0;
  font-size: 14.5px;
  font-weight: 700;
  min-height: 1.2em;
}

.msg.ok {
  color: #2a5038;
}

.msg.bad {
  color: #b42318;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}