/* ==========================================================================
   Intrepid Studios — site stylesheet
   One file for every page. Header and footer markup is written out in full on
   each page; the styling for it lives here so there is one place to change it.

   Contents
     1. Theme tokens
     2. Base and typography
     3. Layout
     4. Header and breadcrumb
     5. Hero
     6. Ledger lists
     7. Buttons, pills, cards
     8. Steps, facts, comparison table
     9. Featured project
    10. Code card
    11. FAQ
    12. Forms
    13. Footer
    14. Utilities
   ========================================================================== */

/* 1. Theme tokens ---------------------------------------------------------- */

:root {
  --bg: #edf0ea;
  --bg2: #e2e7de;
  --card: #f6f8f3;
  --ink: #16302a;
  --muted: #3a4e46;
  --line: #16302a;
  --rule: #c3cdc1;
  --strong: #16302a;
  --soft: #6f8a7e;
  --inv: #16302a;
  --inv-ink: #edf0ea;
  --inv-muted: #c9d3cd;
  --inv-card: #1d3b32;
  --inv-line: #6f8a7e;
  --accent: #f08a4b;
  --hover: #b8461a;
  --tag: #2f6b52;
  --topo: 0.16;

  --btn: #2f6b52;
  --on-btn: #ffffff;
  --pill: #5fb389;
  --on-pill: #0f1d18;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --band: clamp(56px, 7vw, 96px);
  --radius: 4px;

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0f1d18;
  --bg2: #15271f;
  --card: #142620;
  --ink: #e3eae5;
  --muted: #a9b8b0;
  --line: #3e5c50;
  --rule: #26382f;
  --strong: #a9b8b0;
  --soft: #5e786d;
  --inv: #1b382e;
  --inv-ink: #edf0ea;
  --inv-muted: #c2cec7;
  --inv-card: #22453a;
  --inv-line: #6f8a7e;
  --accent: #f08a4b;
  --hover: #f5a877;
  --tag: #8ccb9b;
  --topo: 0.12;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0f1d18;
    --bg2: #15271f;
    --card: #142620;
    --ink: #e3eae5;
    --muted: #a9b8b0;
    --line: #3e5c50;
    --rule: #26382f;
    --strong: #a9b8b0;
    --soft: #5e786d;
    --inv: #1b382e;
    --inv-ink: #edf0ea;
    --inv-muted: #c2cec7;
    --inv-card: #22453a;
    --inv-line: #6f8a7e;
    --accent: #f08a4b;
    --hover: #f5a877;
    --tag: #8ccb9b;
    --topo: 0.12;

    color-scheme: dark;
  }
}

/* 2. Base and typography --------------------------------------------------- */

*,
*::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;
    transition-duration: 0.01ms !important;
  }
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(46px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

h2.h2-sm {
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: -0.035em;
}

h3,
h2.h2-xs {
  font-size: 30px;
  letter-spacing: -0.03em;
}

p {
  margin: 0;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

:focus-visible {
  outline: 2px solid var(--hover);
  outline-offset: 3px;
}

img,
svg {
  max-width: 100%;
}

::selection {
  background: var(--pill);
  color: var(--on-pill);
}

.lede {
  font-size: 20px;
  color: var(--muted);
  max-width: 46ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0;
}

.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: var(--btn);
  color: var(--on-btn);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--on-btn);
}

/* 3. Layout ---------------------------------------------------------------- */

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

.band {
  padding-block: var(--band);
}

.band-tight {
  padding-block: clamp(48px, 6vw, 80px);
}

.rule-top {
  border-top: 2px solid var(--strong);
}

.tint {
  background: var(--bg2);
}

/* An inverted band: dark green behind light text, in both themes. Used for the
   featured project and the two "this keeps working" bands. It separates itself
   from what's above, so these sections take no .rule-top. */
.inverted {
  background: var(--inv);
  color: var(--inv-ink);
}

.inverted .eyebrow {
  color: var(--accent);
}

.inverted .lede,
.inverted .muted,
.inverted .label {
  color: var(--inv-muted);
}

.inverted a {
  color: var(--inv-ink);
}

.inverted a:hover {
  color: var(--accent);
}

.inverted .btn-ghost {
  border-color: var(--inv-line);
  color: var(--inv-ink);
}

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

/* The rules on the stat row would be invisible against this background. */
.inverted .facts-inline > div {
  border-top: 0;
  padding-top: 0;
}

.inverted .facts-inline dt {
  color: var(--inv-muted);
}

.band-tall {
  padding-block: clamp(64px, 8vw, 112px);
}

.cols-center {
  align-items: center;
}

/* Section heading with a right-aligned mono label, over a heavy rule. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--strong);
}

.section-head.align-end {
  align-items: flex-end;
  border-bottom: 0;
  padding-bottom: 0;
}

.cols {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 56px;
}

.cols > .col {
  flex: 1 1 420px;
  min-width: 0;
}

.stack {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* 4. Header and breadcrumb ------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}

.site-head nav {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-links > a {
  text-decoration: none;
  padding: 12px 0;
}

.nav-links > a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.theme-toggle {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--hover);
  border-color: var(--hover);
}

/* Only one of the two labels shows, depending on the active theme. */
.theme-toggle .when-light {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle .when-dark {
  display: none;
  align-items: center;
  gap: 8px;
}

:root[data-theme='dark'] .theme-toggle .when-light {
  display: none;
}

:root[data-theme='dark'] .theme-toggle .when-dark {
  display: flex;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .when-light {
    display: none;
  }
  :root:not([data-theme='light']) .theme-toggle .when-dark {
    display: flex;
  }
}

.breadcrumb {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 20px var(--gutter) 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--muted);
}

.breadcrumb span {
  color: var(--ink);
}

/* 5. Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
}

.hero > .wrap {
  position: relative;
  padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 88px);
}

/* Contour rings behind the hero. The SVG is inline in the page so it can use
   currentColor and follow the theme; this only places it. */
.topo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 620px;
  opacity: var(--topo);
  pointer-events: none;
  color: var(--ink);
}

.hero-split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 56px;
  align-items: flex-start;
  margin-top: 18px;
}

.hero-split > .col {
  flex: 1 1 420px;
  min-width: 0;
}

/* 6. Ledger lists ---------------------------------------------------------- */

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--strong);
}

.ledger > li {
  border-bottom: 1px solid var(--rule);
}

.ledger > li > a,
.ledger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 18px 0;
  text-decoration: none;
  color: inherit;
}

.ledger-main {
  flex: 1 1 260px;
  min-width: 0;
}

.ledger-main strong {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.ledger-main span {
  display: block;
  color: var(--muted);
}

.ledger-group + .ledger-group {
  margin-top: 36px;
}

.ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.ledger-head h2,
.ledger-head h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.ledger-price {
  flex: 1 1 180px;
  min-width: 0;
}

.ledger-price strong {
  font-size: 22px;
}

/* 7. Buttons, pills, cards ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn);
  color: var(--on-btn);
  font: 700 17px var(--sans);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

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

.btn-sm {
  min-height: 48px;
  padding: 0 22px;
}

.pill {
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pill);
  color: var(--on-pill);
  text-transform: uppercase;
  white-space: nowrap;
}

.pill-ink {
  background: var(--ink);
  color: var(--bg);
}

.card {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 32px;
}

.card-grid > .card,
.card-grid > article {
  flex: 1 1 340px;
  min-width: 0;
}

.price {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.price-sm {
  font-size: 22px;
}

.card ul.plain {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.card ul.plain > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.card .btn,
.card .btn-ghost {
  margin-top: auto;
  align-self: flex-start;
}

/* Add-on: a quieter, single-line card. */
.card-addon {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px clamp(22px, 2.4vw, 32px);
  background: transparent;
}

.card-addon .btn,
.card-addon .btn-ghost {
  margin-top: 0;
}

/* A slot waiting for a picture. It holds a commented-out <img>; a comment is
   not a child as far as :empty is concerned, so the slot collapses and the
   layout closes up until you uncomment the tag. */
.img-slot:empty {
  display: none;
}

.img-slot > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* A row of image slots. Collapses to nothing while they are all commented out. */
.img-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 36px;
}

/* 8. Steps, facts, comparison table ---------------------------------------- */

.steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 32px;
  border-top: 2px solid var(--strong);
}

.steps > li {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.steps h3 {
  margin: 8px 0 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.steps p {
  color: var(--muted);
}

.facts {
  margin: 36px 0 0;
  border-top: 2px solid var(--strong);
}

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.facts-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 48px;
  margin: 32px 0 0;
}

.facts-inline > div {
  border-top: 2px solid var(--strong);
  padding-top: 10px;
  min-width: 120px;
}

.facts-inline dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.facts-inline dd {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.table-scroll {
  overflow-x: auto;
  margin-top: 24px;
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  text-align: left;
}

table.compare th,
table.compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

table.compare thead th {
  border-bottom: 2px solid var(--strong);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

table.compare tbody th {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  width: 1%;
}

table.compare td {
  color: var(--ink);
}

table.compare + .note,
.note {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}

/* Two-up list: a definition-ish list with a right-hand mono tag. */
.tagged {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.tagged > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

/* Let the text wrap inside its own column rather than pushing the tag onto
   a line of its own. */
.tagged > li > :first-child {
  flex: 1 1 200px;
  min-width: 0;
}

.tagged .label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.fake-input {
  padding: 12px 14px;
  border: 1px solid var(--soft);
  border-radius: var(--radius);
}

.chips {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips > li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
}

/* 9. Featured project ------------------------------------------------------ */

.featured-link {
  display: block;
  padding: 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--inv);
  color: var(--inv-ink);
  text-decoration: none;
}

/* Only react to a hover when it is actually a link. The card is a plain block
   until the Ecuador project has a page of its own. */
a.featured-link:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  color: var(--inv-ink);
}

.featured-link .label {
  color: var(--accent);
}

.featured-link strong {
  display: block;
  margin: 10px 0 12px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--inv-muted);
}

/* 10. Code card ------------------------------------------------------------ */

.code-card {
  border-radius: 6px;
  background: var(--inv);
  color: var(--inv-ink);
  overflow: hidden;
}

.code-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 10px 0;
  border-bottom: 1px solid var(--inv-line);
}

.code-tabs button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--inv-ink);
  font: 500 13px var(--mono);
  cursor: pointer;
  opacity: 0.7;
}

.code-tabs button[aria-selected='true'] {
  border-bottom-color: var(--pill);
  opacity: 1;
}

.code-body {
  padding: 22px 24px;
}

.code-body.inv-card {
  border-top: 1px solid var(--inv-line);
  background: var(--inv-card);
}

.code-label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--inv-muted);
  text-transform: uppercase;
}

.code-card pre {
  margin: 0;
  font: 14px/1.7 var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}

[role='tabpanel'][hidden] {
  display: none;
}

/* 11. FAQ ------------------------------------------------------------------ */

.faq {
  margin-top: 32px;
  border-top: 2px solid var(--strong);
}

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

.faq summary {
  padding: 20px 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

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

.faq summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--muted);
  flex: 0 0 auto;
}

.faq details[open] summary::after {
  content: '\2013';
}

.faq summary:hover {
  color: var(--hover);
}

.faq details > p {
  margin: 0;
  padding: 0 0 22px;
  max-width: 70ch;
  color: var(--muted);
}

/* 12. Forms ---------------------------------------------------------------- */

.form {
  flex: 1 1 440px;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.form-row label {
  flex: 1 1 180px;
}

.form input,
.form select,
.form textarea {
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--soft);
  background: var(--bg);
  color: var(--ink);
  font: 400 17px var(--sans);
}

.form textarea {
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--btn);
}

.form input[aria-invalid='true'],
.form textarea[aria-invalid='true'] {
  border-color: var(--hover);
  border-width: 2px;
}

.form .field-error {
  font-size: 14px;
  font-weight: 400;
  color: var(--hover);
}

.form .btn {
  align-self: flex-start;
  min-height: 48px;
  padding: 0 28px;
}

.form .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* The honeypot. Hidden from sight and from assistive technology, but a plain
   text input as far as a scripted form-filler can tell. */
.form .decoy {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg2);
  font-size: 16px;
}

.form-status[hidden] {
  display: none;
}

.form-status.is-ok {
  border-color: var(--btn);
}

.form-status.is-error {
  border-color: var(--hover);
}

.contact-split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.contact-split > .col {
  flex: 1 1 360px;
  min-width: 0;
}

/* The "Reach out." line under the alpha heading. */
.reach {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.03em;
  color: var(--tag);
}

.promise {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 2px solid var(--strong);
}

.promise > li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}

.promise strong {
  color: var(--ink);
}

/* 13. Footer --------------------------------------------------------------- */

.site-foot {
  background: var(--inv);
  color: var(--inv-ink);
}

.site-foot a {
  color: var(--inv-ink);
}

.site-foot a:hover {
  color: var(--accent);
}

.site-foot > .wrap {
  padding-block: 56px 28px;
}

.foot-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.foot-brand {
  flex: 2 1 280px;
  min-width: 0;
}

.foot-brand p:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.foot-brand p + p {
  margin-top: 8px;
  max-width: 34ch;
  color: var(--inv-muted);
}

.site-foot nav {
  flex: 1 1 160px;
  min-width: 0;
}

.site-foot nav > p {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--inv-muted);
  text-transform: uppercase;
}

.site-foot nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.foot-bottom {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--inv-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--inv-muted);
}

/* 14. Utilities ------------------------------------------------------------ */

.max-14 {
  max-width: 14ch;
}

.max-18 {
  max-width: 18ch;
}

.max-40 {
  max-width: 40ch;
}

.max-46 {
  max-width: 46ch;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 8px;
}

.mt-2 {
  margin-top: 18px;
}

.mt-3 {
  margin-top: 28px;
}

.mt-4 {
  margin-top: 40px;
}

.row-between {
  justify-content: space-between;
}

.flush {
  border-top: 0;
}

.flat {
  margin-top: 0;
}

.full {
  flex: 1 1 100%;
}

.block {
  display: block;
}

.wide {
  max-width: 62ch;
}

.mb-2 {
  margin-bottom: 14px;
}

.col-wide {
  flex: 1 1 480px;
}

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

@media (max-width: 640px) {
  .site-head {
    position: static;
  }

  .site-head nav {
    gap: 8px;
  }

  .nav-links {
    gap: 4px 16px;
    font-size: 12px;
  }

  .facts dd {
    text-align: left;
  }
}

@media print {
  .site-head,
  .theme-toggle,
  .form,
  .topo {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}