:root {
  --cream: #fdf9f2;
  --navy: #003c71;
  --accent: #ff6044;
  --line: rgba(0, 60, 113, 0.25);
  /* Canva fonts: Tan Meringue (wordmark), Gotham (headings + body), Courier Prime (accents).
     Tan Meringue and Gotham need paid web licences: Fraunces and Montserrat stand in until then. */
  --display: "Tan Meringue", "Fraunces", Georgia, serif;
  --body: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font: 400 16px/1.7 var(--body);
}
main { max-width: 720px; margin: 0 auto; padding: 0 20px; }
section { padding: 56px 0; border-top: 1px solid var(--line); }
h1, h2 { margin: 0; }
h1 { font: 600 clamp(40px, 9vw, 64px)/1.05 var(--display); letter-spacing: 0.06em; }
h2 { font: 600 20px/1.3 var(--body); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 24px; text-align: center; }
.label { font: 400 14px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; }
a { color: var(--navy); }

/* Hero */
.hero { text-align: center; padding: 64px 0 56px; }
.hero img { display: block; width: 150px; height: auto; margin: 0 auto 8px; }
.hero h1 { display: flex; align-items: flex-start; justify-content: center; max-width: 100%; }
.hero .wordmark { display: block; width: min(420px, 78vw); height: auto; margin: 8px 0 0; }
.tm { font: 700 0.22em/1 var(--mono); letter-spacing: 0.05em; margin-left: 0.25em; }
.hero h1.sub { font: 600 28px/1.3 var(--body); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 16px; }
.hero .label { margin-top: 12px; }
.tagline { font: 400 14px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; margin: 28px 0 32px; }
.divider { display: flex; align-items: center; gap: 10px; width: 220px; margin: 22px auto; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--navy); }
.divider span { width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.button {
  display: inline-block; padding: 14px 32px;
  background: var(--navy); color: var(--cream);
  font: 700 14px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
}
.button:hover, .button:focus-visible { background: var(--accent); }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.steps .num {
  width: 40px; height: 40px; border: 1px solid var(--navy); border-radius: 50%;
  display: grid; place-items: center; font: 700 15px var(--mono);
}
.steps strong { display: block; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 15px; }

/* Kit table */
.kit { width: 100%; border-collapse: collapse; font-size: 16px; }
.kit th, .kit td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.kit th { font: 700 12px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; }
.kit td:first-child { font-family: var(--mono); width: 70px; }
.note { font-size: 15px; margin-top: 20px; }

/* Form */
form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font: 700 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
input, textarea {
  width: 100%; padding: 12px 14px; font: 400 16px var(--body); color: var(--navy);
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 140px; resize: vertical; }
.hidden { position: absolute; left: -9999px; }
.center { text-align: center; }

footer { text-align: center; padding: 40px 20px 48px; border-top: 1px solid var(--line); font-size: 14px; }
footer .label { font-size: 12px; }