/* Beaube Coins & Collectibles: design tokens, base styles, layout and shared components.
   Fonts: Libre Caslon Text (headings) and Public Sans (body), both SIL OFL, self-hosted, latin subset.
   Caslon Regular is only used for "Coins & Collectibles" in the logo lockup, so it ships as a
   tiny subset of just those letters (docs/IMAGES.md explains how to regenerate it). */

@font-face {
  font-family: "Libre Caslon Text";
  src: url(/fonts/libre-caslon-text-700.woff2?v=2819c345) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Libre Caslon Text";
  src: url(/fonts/libre-caslon-text-400-brand.woff2?v=3dec1c49) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0026, U+0043, U+0062-0063, U+0065, U+0069, U+006C, U+006E-006F, U+0073-0074;
}

@font-face {
  font-family: "Public Sans";
  src: url(/fonts/public-sans-wght.woff2?v=5ed4d31c) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------------------ */

:root {
  --navy-950: #0b1424;
  --navy-900: #111d31;
  --navy-800: #18273f;
  --navy-700: #22344f;
  --gold-300: #e6c98a;
  --gold-400: #d4ae62;
  --gold-500: #c39a48;
  --gold-700: #8a6421;
  /* Gold-toned text on light backgrounds (7:1 on cream-50). */
  --bronze-700: #6f4f16;
  --cream-50: #fbf8f2;
  --cream-100: #f4eee2;
  --cream-200: #e8dfcc;
  --ink-900: #1d1a16;
  --ink-700: #3f3a33;
  --ink-500: #6b645a;
  --danger-700: #9b2c2c;
  --success-700: #2f6b3a;
  --white: #ffffff;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-1: 0 1px 2px rgb(29 26 22 / 0.08), 0 1px 1px rgb(29 26 22 / 0.04);
  --shadow-2: 0 6px 18px rgb(11 20 36 / 0.12), 0 2px 4px rgb(11 20 36 / 0.08);

  --font-display: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --measure: 40rem;
  --container: 72rem;
  /* Side margin; widens to clear a phone's notch in landscape (viewport-fit=cover). */
  --gutter: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* Surface-dependent values. Light surfaces are the default; dark surfaces override below. */
  --focus-ring: 3px solid var(--navy-700);
  --text: var(--ink-900);
  --text-muted: var(--ink-700);
  --heading: var(--ink-900);
  --link: var(--bronze-700);
  --link-hover: var(--navy-900);
  --rule: var(--gold-500);
  --check: var(--bronze-700);
  /* On light surfaces the secondary button is an outline, so it never outweighs the gold
     primary (Sell / Facebook) button beside or near it. */
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--navy-900);
  --btn-secondary-border: var(--navy-900);
  --btn-secondary-hover: var(--cream-200);
  --btn-ghost-fg: var(--navy-900);
  --btn-ghost-hover: var(--cream-200);
  --notice-bg: var(--cream-100);
  --notice-fg: var(--ink-900);

  color-scheme: light;
}

/* Dark (navy) surfaces. */
.site-header,
.hero,
.page-intro,
.section--dark,
.site-footer,
.action-bar {
  --focus-ring: 3px solid var(--gold-400);
  --text: var(--cream-50);
  --text-muted: var(--cream-200);
  --heading: var(--cream-50);
  --link: var(--gold-300);
  --link-hover: var(--cream-50);
  --check: var(--gold-300);
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--cream-50);
  --btn-secondary-border: var(--gold-400);
  --btn-secondary-hover: var(--navy-800);
  --btn-ghost-fg: var(--cream-50);
  --btn-ghost-hover: var(--navy-800);
  --notice-bg: var(--navy-800);
  --notice-fg: var(--cream-50);
  color: var(--text);
}

/* ---- Base -------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream-50);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-kerning: normal;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
fieldset {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--heading);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
}

h2 {
  font-size: clamp(1.625rem, 1.38rem + 1.1vw, 2.25rem);
  line-height: 1.2;
}

h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
}

h4 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 650;
}

p,
li {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

strong {
  font-weight: 650;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

/* ---- Layout ------------------------------------------------------------------ */

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

@media (min-width: 48rem) {
  :root {
    --gutter: max(2rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
}

/* On a .container these limit the line length of the children while keeping them
   aligned with the container's left edge. */
.narrow {
  max-width: 46rem;
}

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

.container.narrow,
.container.measure {
  max-width: none;
}

.container.narrow > * {
  max-width: 46rem;
}

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

.page-intro .container > h1 {
  max-width: 52rem;
}

.section {
  padding-block: var(--space-7);
}

@media (min-width: 48rem) {
  .section {
    padding-block: var(--space-8);
  }
}

.section--alt {
  background: var(--cream-100);
}

.section--dark {
  background: var(--navy-900);
}

.stack > * + * {
  margin-block-start: var(--space-4);
}

.stack > :is(h2, h3) + * {
  margin-block-start: var(--space-3);
}

/* A subheading (or a titled "what happens next" block) that follows other content gets
   more space above than below, so it groups with what it introduces, not with the button
   or list before it. Directly after a heading the tighter gap above still applies. */
.stack > :not(h2, h3) + :is(h3, .next-steps) {
  margin-block-start: var(--space-6);
}

.split {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-7);
  }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- Type helpers -------------------------------------------------------------- */

.lead {
  font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-muted);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--bronze-700);
}

.section--dark .eyebrow,
.page-intro .eyebrow,
.hero .eyebrow {
  color: var(--link);
}

.text-small {
  font-size: 0.875rem;
  line-height: 1.55;
}

.link-strong {
  font-weight: 650;
}

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

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--gutter);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--gold-400);
  color: var(--navy-950);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 3px solid var(--navy-950);
  outline-offset: 2px;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn--large {
  min-height: 3.25rem;
  padding: 0.8125rem 1.5rem;
  font-size: 1.0625rem;
}

/* On light surfaces the soft gold fill needs a defined edge (gold-700 is 5:1 on cream-50)
   to stay the strongest button on the page. Navy surfaces keep the lighter rim. */
.btn--primary {
  background: var(--gold-400);
  border-color: var(--gold-700);
  color: var(--navy-950);
  box-shadow: 0 1px 2px rgb(11 20 36 / 0.18);
}

.btn--primary:hover {
  background: var(--gold-300);
  color: var(--navy-950);
}

:is(.site-header, .hero, .page-intro, .section--dark, .site-footer, .action-bar) .btn--primary {
  border-color: var(--gold-500);
  box-shadow: none;
}

.btn--secondary {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-fg);
}

.btn--secondary:hover {
  background: var(--btn-secondary-hover);
  color: var(--btn-secondary-fg);
}

.btn--ghost {
  background: transparent;
  color: var(--btn-ghost-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.btn--ghost:hover {
  background: var(--btn-ghost-hover);
  color: var(--btn-ghost-fg);
  text-decoration: underline;
}

/* Beside a main button, a ghost button reads as a text link, so it lines up with the
   text around it when the row wraps. */
.button-row .btn--ghost {
  padding-inline: 0;
}

.button-row .btn--ghost:hover {
  background: transparent;
  text-decoration-thickness: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---- Header and navigation ------------------------------------------------------ */

/* The reeded edge: fine vertical ridges like the rim of a silver coin. */
.site-header::after,
.site-footer::before {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold-300) 0 1px,
    var(--gold-500) 1px 2px,
    var(--gold-700) 2px 3px,
    var(--gold-500) 3px 4px
  );
}

.site-header {
  background: var(--navy-950);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 2.75rem;
  color: var(--heading);
  text-decoration: none;
}

.brand:hover {
  color: var(--heading);
}

.brand__seal img {
  width: 2.75rem;
  height: 2.75rem;
}

.brand__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  line-height: 1.1;
}

.brand__primary {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.brand__secondary {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--link);
}

@media (min-width: 48rem) {
  .brand__seal img {
    width: 3.5rem;
    height: 3.5rem;
  }

  .brand__primary {
    font-size: 1.75rem;
  }

  .brand__secondary {
    font-size: 0.875rem;
  }
}

.site-header__actions {
  display: none;
}

@media (min-width: 48rem) {
  .site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }
}

/* Where the header also holds the Menu button (48-60rem), a long button label is shortened
   on screen ("Message us on Facebook" -> "Message us"); screen readers still get it all. */
@media (max-width: 59.99rem) {
  .site-header__more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--cream-50);
  font-weight: 650;
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--navy-800);
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.15s ease;
}

.nav-toggle__icon::before {
  top: -6px;
}

.nav-toggle__icon::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 22.5rem) {
  .nav-toggle {
    padding-inline: 0.75rem;
  }

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

.site-nav {
  background: var(--navy-900);
  border-top: 1px solid var(--navy-800);
}

.site-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0 var(--space-4);
  padding: var(--space-2) 0;
  list-style: none;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border-left: 3px solid transparent;
  color: var(--cream-50);
  font-weight: 550;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--gold-300);
  text-decoration: underline;
}

.site-nav__link[aria-current="page"] {
  border-left-color: var(--gold-400);
  color: var(--gold-300);
}

.site-nav__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
}

@media (min-width: 48rem) {
  .site-nav__actions {
    display: none;
  }
}

.site-header__phone {
  white-space: nowrap;
}

/* 48-60rem: the header has no room for the phone number beside eBay, Send photos and Menu,
   so it moves into the menu, whose other buttons the header already shows. */
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .site-header__phone {
    display: none;
  }

  .site-nav__actions {
    display: flex;
  }

  .site-nav__actions > :not(.site-nav__phone) {
    display: none;
  }
}

/* Mobile: the menu collapses behind the toggle only when scripting is available, so the
   links stay visible without JavaScript. Until main.js marks the header (.site-header--js),
   the menu is collapsed without display: none, so that if main.js never runs (blocked or
   failed to load) the failsafe animations can show the menu and drop the dead toggle after 4 s. */
@media (max-width: 59.99rem) and (scripting: enabled) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-header:not(.site-header--js) .site-nav {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    border-top-width: 0;
    animation: nav-failsafe-show 0s 4s forwards;
  }

  .site-header:not(.site-header--js) .nav-toggle {
    animation: nav-failsafe-hide 0s 4s forwards;
  }
}

@keyframes nav-failsafe-show {
  to {
    max-height: none;
    visibility: visible;
    border-top-width: 1px;
  }
}

@keyframes nav-failsafe-hide {
  to {
    display: none;
  }
}

@media (max-width: 59.99rem) {
  .site-header--js .nav-toggle {
    display: inline-flex;
  }

  .site-header--js .site-nav {
    display: none;
  }

  .site-header--js.site-header--open .site-nav {
    display: block;
  }
}

@media (min-width: 60rem) {
  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0;
  }

  .site-nav__link {
    padding: var(--space-2) var(--space-3);
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
  }

  .site-nav__link[aria-current="page"] {
    border-bottom-color: var(--gold-400);
  }
}

/* ---- Hero (home) ------------------------------------------------------------- */

/* Phones: spacing is kept tight so the main "Send photos" button fits on the first screen
   of a 375x667 / 390x664 phone. */
.hero {
  background: var(--navy-950);
  padding-top: var(--space-3);
}

.hero__banner img {
  width: 100%;
  max-width: 2075px;
  margin-inline: auto;
}

.hero__content {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-7);
}

.hero__title {
  max-width: 18em;
}

@media (min-width: 48rem) {
  .hero {
    padding-top: var(--space-7);
  }

  .hero__content {
    gap: var(--space-5);
    padding-block: var(--space-7) var(--space-8);
  }
}

@media (min-width: 64rem) {
  .hero__content {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--space-7);
  }

  .hero__title {
    font-size: 3.5rem;
  }
}

/* ---- Inner page intro ------------------------------------------------------------ */

.page-intro {
  background: var(--navy-950);
  padding-block: var(--space-7);
}

.page-intro--tall {
  padding-block: var(--space-8);
}

@media (min-width: 48rem) {
  .page-intro {
    padding-block: var(--space-8);
  }
}

/* ---- Catalog list (what we buy summary) -------------------------------------------- */

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-6) var(--space-6);
  padding: 0;
  list-style: none;
}

.catalog__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 4px double var(--rule);
}

.catalog__title a {
  color: var(--heading);
  text-decoration: none;
}

.catalog__title a:hover {
  color: var(--bronze-700);
  text-decoration: underline;
}

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

/* ---- Entries (what we buy page) ------------------------------------------------------ */

.entries {
  display: grid;
  gap: var(--space-7);
}

.entry {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 4px double var(--rule);
  scroll-margin-top: var(--space-4);
}

.entry__title {
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
}

@media (min-width: 52rem) {
  .entry {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-7);
  }
}

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

.plain-list {
  padding-left: 1.25rem;
}

.plain-list > li + li {
  margin-top: var(--space-2);
}

.plain-list > li::marker {
  color: var(--check);
}

/* ---- Steps (a real sequence, so numbered) --------------------------------------------- */

.steps {
  display: grid;
  gap: var(--space-7);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  position: relative;
  min-height: 3.5rem;
  padding-left: 4.5rem;
  counter-increment: step;
}

/* Numerals sit in a coin-like disc with a double rim. */
.steps__item::before {
  content: counter(step);
  content: counter(step) / "";
  position: absolute;
  top: -0.25rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 4px double var(--gold-400);
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
}

.steps__title {
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  margin-bottom: var(--space-3);
}

.steps .stack,
.steps__item > p {
  max-width: var(--measure);
}

/* Phones: the disc sits beside the step title and the step's text uses the full width. */
@media (max-width: 35.99rem) {
  .steps:not(.steps--compact) .steps__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-4);
    padding-left: 0;
  }

  .steps:not(.steps--compact) .steps__item::before {
    position: static;
  }

  .steps:not(.steps--compact) .steps__title {
    margin-bottom: 0;
  }

  .steps:not(.steps--compact) .steps__item > :not(.steps__title) {
    grid-column: 1 / -1;
    margin-top: var(--space-4);
  }

  .steps:not(.steps--compact) .steps__item > .steps__where {
    justify-self: start;
    margin-block: var(--space-3) 0;
  }
}

.steps--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-6);
}

.steps--compact .steps__item {
  padding-left: 0;
  padding-top: 4.25rem;
}

.steps--compact .steps__item::before {
  top: 0;
}

.steps--compact .steps__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
}

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

/* Phones: the home page's compact steps also put the disc beside the step title. */
@media (max-width: 35.99rem) {
  .steps--compact .steps__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-4);
    padding-top: 0;
  }

  .steps--compact .steps__item::before {
    position: static;
  }

  .steps--compact .steps__title {
    margin-bottom: 0;
  }

  .steps--compact .steps__item > :not(.steps__title) {
    grid-column: 1 / -1;
    margin-top: var(--space-3);
  }
}

/* ---- Cards ------------------------------------------------------------------- */

.card {
  padding: var(--space-5);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.card > * + * {
  margin-top: var(--space-2);
}

.card__title {
  font-size: 1.25rem;
}

.card-grid,
.link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

/* Cards in the last row grow to fill it, so an odd card is never left alone and narrow
   (used where the card count doesn't divide evenly, e.g. the seven kinds of old paper money). */
.card-grid--notes {
  display: flex;
  flex-wrap: wrap;
}

.card-grid--notes > li {
  flex: 1 1 16rem;
}

.card-grid--notes > li p {
  max-width: var(--measure);
}

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

/* ---- Notices ----------------------------------------------------------------- */

.notice {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--navy-700);
  border-radius: var(--radius-sm);
  background: var(--notice-bg);
  color: var(--notice-fg);
}

.notice--info {
  border-left-color: var(--navy-700);
}

.notice--warning {
  border-left-color: var(--bronze-700);
  background: var(--cream-200);
}

.page-intro .notice,
.section--dark .notice,
.hero .notice {
  border-left-color: var(--gold-400);
}

.page-intro .notice--warning,
.section--dark .notice--warning {
  background: var(--navy-800);
}

/* ---- Checklist ----------------------------------------------------------------- */

.checklist {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.checklist > li {
  position: relative;
  padding-left: 1.75rem;
}

.checklist > li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0.3rem;
  width: 0.45rem;
  height: 0.8rem;
  border-right: 2px solid var(--check);
  border-bottom: 2px solid var(--check);
  transform: rotate(45deg);
}

/* ---- Forms (used by the silver calculator) --------------------------------------- */

.field {
  display: grid;
  gap: var(--space-1);
}

.field__label {
  font-weight: 650;
  line-height: 1.35;
}

.field__hint {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-700);
}

.field__error {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--danger-700);
}

.input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-900);
  font-size: 1.0625rem;
  line-height: 1.4;
}

.input:hover {
  border-color: var(--ink-700);
}

.input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--navy-700);
}

.input[aria-invalid="true"] {
  border-color: var(--danger-700);
  border-width: 2px;
}

/* "(required)" / "(optional)" after a label. */
.field__req {
  font-weight: 400;
  color: var(--ink-700);
}

/* ---- Contact form (/contact/#message, src/client/contact-form.ts) ------------------------ */

.contact-form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  border: 1px solid var(--cream-200);
  border-top: 4px double var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
}

@media (min-width: 30rem) {
  .contact-form {
    padding-inline: var(--space-5);
  }
}

/* Without scripting the form can't pass the security check; the <noscript> notice explains
   and gives the email address and Facebook instead. */
@media (scripting: none) {
  .contact-form {
    display: none;
  }
}

/* Empty error lines take no room. Live regions (role="status") stay rendered even when
   empty, or some screen readers miss their first message. */
.contact-form .field__error:empty:not([role]) {
  display: none;
}

.contact-form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40rem) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  /* Side-by-side fields share the row's tracks (label / hint / input / error), so the
     input boxes line up even when one hint is longer or wraps. */
  @supports (grid-template-rows: subgrid) {
    .contact-form__row {
      grid-template-rows: repeat(4, auto);
      row-gap: 0;
      align-items: start;
    }

    .contact-form__row > .field {
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: var(--space-1);
    }

    .contact-form__row > .field > .field__label { grid-row: 1; }
    .contact-form__row > .field > .field__hint { grid-row: 2; }
    .contact-form__row > .field > .input { grid-row: 3; }
    .contact-form__row > .field > .field__error { grid-row: 4; }
  }
}

.contact-form__select {
  cursor: pointer;
}

.contact-form__message {
  min-height: 10rem;
  line-height: 1.55;
  resize: vertical;
}

.contact-form__count,
.contact-form__privacy {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-700);
}

.contact-form__prefill {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--gold-500);
  background: var(--cream-100);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Honeypot: off screen for people (and out of the tab order and accessibility tree). */
.contact-form__hp {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile's "flexible" widget is 100% wide (300px minimum) and 65px tall; narrower
   containers get the 150x140 "compact" widget instead (contact-form-fields.ts). */
.contact-form__turnstile {
  min-height: 4.0625rem;
  max-width: 100%;
}

.contact-form__check-help {
  color: var(--ink-700);
}

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.contact-form__status {
  flex: 1 1 14rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Error summary at the top of the form; it takes focus after a failed check. */
.contact-form__errors {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid var(--danger-700);
  border-left-width: 6px;
  border-radius: var(--radius-sm);
  background: var(--cream-50);
}

.contact-form__errors[hidden],
.contact-form__failure[hidden],
.contact-form__done[hidden] {
  display: none;
}

.contact-form__errors-title,
.contact-form__failure-title,
.contact-form__done-title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
}

.contact-form__errors-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
}

.contact-form__errors-list a {
  color: var(--danger-700);
  font-weight: 600;
}

.contact-form__failure {
  display: grid;
  gap: var(--space-2);
  border-left-color: var(--danger-700);
}

.contact-form__done {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--cream-200);
  border-left: 6px solid var(--success-700);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.contact-form__errors:focus-visible,
.contact-form__failure:focus-visible,
.contact-form__done:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Programmatic focus (after Send) shows the ring too, so it is clear where focus went. */
.contact-form__errors:focus,
.contact-form__failure:focus,
.contact-form__done:focus {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Contact options ------------------------------------------------------------ */

.contact-options__steps {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.25rem;
}

.contact-options__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contact-options__note {
  color: var(--text-muted);
}

.sell-grid {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 56rem) {
  .sell-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
  }
}

.sell-grid__checklist {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--cream-200);
  border-top: 4px double var(--rule);
  background: var(--cream-50);
}

@media (min-width: 30rem) {
  .sell-grid__checklist {
    padding-inline: var(--space-5);
  }
}

/* ---- eBay band ----------------------------------------------------------------- */

.ebay-band {
  padding-block: var(--space-6);
  border-block: 4px double var(--rule);
  background: var(--cream-100);
}

.ebay-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.ebay-band__title {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  max-width: 30ch;
}

/* ---- FAQ ------------------------------------------------------------------------ */

.faq-layout {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 60rem) {
  .faq-layout {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
  }

  /* The question list scrolls on its own when it is taller than the screen, so every link
     stays reachable (and keyboard focus stays visible) on 720-800 px tall laptops. */
  .faq-toc {
    position: sticky;
    top: var(--space-5);
    max-height: calc(100vh - 2 * var(--space-5));
    max-height: calc(100dvh - 2 * var(--space-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.faq-toc {
  padding: var(--space-5);
  border-top: 4px double var(--rule);
  background: var(--cream-100);
}

.faq-toc__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
}

.faq-toc__list {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.faq-toc__list a {
  display: block;
  padding-block: 0.4rem;
}

.faq-list {
  display: grid;
  gap: var(--space-7);
  max-width: 44rem;
}

.faq {
  scroll-margin-top: var(--space-4);
}

.faq__question {
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  margin-bottom: var(--space-3);
}

/* ---- Selling components ------------------------------------------------------------ */

/* Coin pip: a small ringed disc used as the bullet for short statements. */
.trust-list,
.hero__facts {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.trust-list > li,
.hero__facts > li {
  position: relative;
  padding-left: 1.75rem;
}

.trust-list > li::before,
.hero__facts > li::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0.125rem;
  width: 0.8125rem;
  height: 0.8125rem;
  border: 2px solid var(--check);
  border-radius: 50%;
  background: radial-gradient(circle, var(--check) 0 1.5px, transparent 2px);
}

.hero__facts {
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--navy-700);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.hero__heading > .eyebrow + * {
  margin-top: var(--space-3);
}

.hero__link {
  font-size: 1.0625rem;
}

/* "What happens next": short numbered list; the numbers are read out with each item. */
.next-steps__title {
  margin-bottom: var(--space-3);
  font-size: 1.1875rem;
}

.next-steps__list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.next-steps__list > li {
  position: relative;
  min-height: 1.875rem;
  padding-left: 2.75rem;
  counter-increment: next-step;
}

.next-steps__list > li::before {
  content: counter(next-step);
  position: absolute;
  top: -0.0625rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--check);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}

/* "What to send": numbered items in smaller coin discs (numbers are in the markup for
   screen readers, so the discs are decorative). */
.send-list {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: send;
}

.send-list__item {
  position: relative;
  min-height: 2.5rem;
  padding-left: 3.5rem;
  counter-increment: send;
}

.send-list__item::before {
  content: counter(send);
  content: counter(send) / "";
  position: absolute;
  top: -0.125rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 4px double var(--gold-400);
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
}

.send-list__title {
  color: var(--heading);
}

/* Where a step happens ("Messenger" / "In person"), under a step heading. */
.steps__where {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 0.125rem 0.75rem;
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  color: var(--bronze-700);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.5;
}

.steps__title + .steps__where {
  margin-top: calc(-1 * var(--space-1));
}

/* Message starter: an editable note to fill in and copy into Messenger. */
.message-starter {
  display: grid;
  gap: var(--space-3);
}

.message-starter__title {
  font-size: 1.25rem;
}

.message-starter__hint {
  color: var(--text-muted);
}

.message-starter__text {
  min-height: 7.5rem;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--gold-500);
  background: var(--white);
  line-height: 1.55;
  resize: vertical;
  field-sizing: content;
}

.message-starter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.message-starter__status {
  flex: 1 1 14rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Shown by main.js after "Copy my message": where to send it, with the Facebook button. */
.message-starter__next {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-sm);
  background: var(--cream-100);
}

.message-starter__next[hidden] {
  display: none;
}

.message-starter__next-title {
  font-weight: 700;
  color: var(--heading);
}

.message-starter__steps {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
}

.message-starter__next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Disclosure (e.g. photo tips). */
.disclosure {
  border-block: 1px solid var(--cream-200);
}

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding-block: var(--space-2);
  color: var(--heading);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.disclosure__summary::-webkit-details-marker {
  display: none;
}

/* Chevron: points right when closed, down when open. */
.disclosure__summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.25rem 0.125rem;
  border-right: 2px solid var(--check);
  border-bottom: 2px solid var(--check);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.disclosure[open] > .disclosure__summary::before {
  transform: rotate(45deg);
}

.disclosure__summary:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.disclosure__body {
  padding-block: var(--space-2) var(--space-5);
}

/* Callout: a highlighted aside within a section. */
.callout {
  padding: var(--space-5);
  border-top: 4px double var(--rule);
  background: var(--cream-100);
}

.section--alt .callout {
  background: var(--cream-50);
}

.callout > * + * {
  margin-top: var(--space-3);
}

.callout__title {
  font-size: 1.25rem;
}

/* ---- Business hours ------------------------------------------------------------- */
/* Always labelled "Business hours" (there is no storefront). Visible text uses dashes
   ("Mon–Fri 9 AM–5 PM"); a visually hidden copy says "Monday to Friday 9 AM to 5 PM". */

/* About & Contact page: a short definition list. */
.hours-list {
  display: grid;
  gap: var(--space-1);
}

.hours-list__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
}

.hours-list__days {
  min-width: 9.5rem;
  font-weight: 650;
}

/* Footer: one compact line that wraps between day groups, never inside one. */
.hours-line__label {
  font-weight: 650;
  color: var(--text);
}

.hours-line__part {
  white-space: nowrap;
}

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

.site-footer {
  background: var(--navy-950);
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  padding-block: var(--space-7) var(--space-6);
}

@media (min-width: 22rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (min-width: 40rem) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .site-footer__about {
    grid-column: auto;
  }
}

.site-footer__about p {
  max-width: 34rem;
  color: var(--text-muted);
}

.site-footer__about .site-footer__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heading);
}

.site-footer__sell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-2);
}

.site-footer__about .site-footer__note {
  font-size: 0.875rem;
}

.site-footer__heading {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--link);
}

.site-footer__list {
  padding: 0;
  list-style: none;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--link);
  text-decoration: underline;
}

.site-footer__link[aria-current="page"] {
  color: var(--link);
}

/* The address is one long word; let it wrap rather than overflow a narrow column. */
.site-footer__email {
  overflow-wrap: anywhere;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--navy-700);
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ---- Phone action bar -------------------------------------------------------------- */
/* Shown below 48rem (the header shows the Sell button from 48rem). It is the last element in
   <body>; on screens at least 28rem tall `position: sticky` pins it to the bottom of the
   screen while letting it rest after the footer at the end of the page instead of covering
   it. On shorter screens (e.g. 400% zoom) it stays in place at the end so it never takes
   up a large share of the view. scroll-padding keeps focused elements from scrolling
   underneath it (WCAG 2.4.11). */

.action-bar {
  display: none;
}

@media (max-width: 47.99rem) {
  .action-bar {
    display: block;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--navy-950);
  }

  /* The reeded coin edge, as on the header and footer. */
  .action-bar::before {
    content: "";
    display: block;
    height: 4px;
    background: repeating-linear-gradient(
      90deg,
      var(--gold-300) 0 1px,
      var(--gold-500) 1px 2px,
      var(--gold-700) 2px 3px,
      var(--gold-500) 3px 4px
    );
  }

  .action-bar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-2);
  }

  .action-bar__inner--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .action-bar__btn {
    padding-inline: var(--space-2);
  }
}

@media (max-width: 47.99rem) and (min-height: 28rem) {
  .action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    box-shadow: 0 -8px 20px rgb(11 20 36 / 0.18);
  }

  .has-action-bar {
    scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  /* main.js hides the bar while the page's intro "Send photos" button is fully on screen, so
     the same action isn't offered twice. visibility keeps the hidden links out of the tab order. */
  .action-bar--deferred:not(.is-shown) {
    transform: translateY(100%);
    visibility: hidden;
  }

  .action-bar--animated {
    transition: transform 0.2s ease-out, visibility 0s linear;
  }

  .action-bar--animated:not(.is-shown) {
    transition: transform 0.2s ease-in, visibility 0s linear 0.2s;
  }
}

/* ---- Forced colors and print --------------------------------------------------------- */

@media (forced-colors: active) {
  .btn,
  .nav-toggle {
    border: 1px solid ButtonText;
  }

  /* Contrast themes repaint backgrounds as Canvas, which would erase the bar icon. */
  .nav-toggle__icon,
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    forced-color-adjust: none;
    background: ButtonText;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    background: transparent;
  }

  .site-nav__link {
    border-color: Canvas;
  }

  .site-nav__link[aria-current="page"] {
    border-color: Highlight;
    text-decoration: underline;
  }

  .site-footer__link[aria-current="page"] {
    text-decoration: underline;
  }

  .steps__item::before,
  .send-list__item::before,
  .next-steps__list > li::before,
  .trust-list > li::before,
  .hero__facts > li::before {
    border-color: CanvasText;
  }

  .action-bar {
    border-top: 1px solid CanvasText;
  }

  .message-starter__text {
    border-left-color: CanvasText;
  }

  .contact-form__errors,
  .contact-form__failure,
  .contact-form__done,
  .contact-form__prefill {
    border-color: CanvasText;
  }
}

@page {
  margin: 1.5cm;
}

@media print {
  .site-header::after,
  .site-footer::before,
  .nav-toggle,
  .site-nav,
  .site-header__actions,
  .skip-link,
  .action-bar,
  .hero__banner,
  .site-footer__sell .btn,
  .message-starter__actions,
  .message-starter__next {
    display: none !important;
  }

  .site-header,
  .hero,
  .page-intro,
  .section--dark,
  .site-footer {
    background: none;
    color: #000;
    --text: #000;
    --heading: #000;
    --text-muted: #000;
    --link: #000;
    --link-hover: #000;
    --check: #000;
    --rule: #000;
  }

  .site-footer__legal {
    border-top-color: #000;
  }
}