/* ============================================================
   Silver Plate Canada v2 stylesheet
   Contract: DESIGN-SPEC.md 2026-07-27. Token system, one card
   primitive, two radii (4px / 999px), borders not shadows,
   gold kept under 5% of any viewport.
   No em dashes in any content strings. Canadian spelling.
   ============================================================ */

/* ---------- 1. Fonts (self-hosted variable WOFF2) ---------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
}
/* Metrics-matched local fallbacks so text does not jump on swap */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 98.5%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken Fallback";
  src: local("Segoe UI");
  size-adjust: 100.5%;
  ascent-override: 102%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* colour */
  --navy-900: #0E1B2C;
  --navy-800: #14243B;
  --navy-700: #16283F;
  --steel: #8B94A3;        /* metadata only, 16px+ */
  --gold-500: #B8912F;     /* on light */
  --gold-550: #A98527;     /* hover darken 6% */
  --gold-300: #D9B65C;     /* on navy only */
  --paper: #F8F5EE;
  --white: #FFFDF9;
  --line: #E3DDD0;
  --ink: #243140;          /* body text, 7:1+ on paper */
  --error: #A4232B;
  --ok: #216E4E;

  /* type */
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
  --font-body: "Hanken Grotesk", "Hanken Fallback", "Segoe UI", system-ui, sans-serif;

  /* spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;

  /* radii: exactly two values sitewide */
  --r: 4px;
  --r-pill: 999px;

  --wrap: 1200px;
  --header-h: 72px;
}

/* ---------- 3. Reset + base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;            /* 18px, never smaller for content */
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  font-variant-ligatures: common-ligatures;
}
img, svg { max-width: 100%; }
[hidden], .hidden { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--navy-700);
  line-height: 1.2;
  margin: 0 0 var(--s-16);
}
h1 { font-size: clamp(2.5rem, 5.5vw, 3.6rem); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; line-height: 1.3; }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 700; }
p { margin: 0 0 var(--s-16); }
.lead { font-size: 1.25rem; line-height: 1.55; }
small, .small { font-size: 1rem; }   /* 16px floor */
.measure { max-width: 65ch; }
.meta { color: var(--steel); font-size: 1rem; }

ul, ol { margin: 0 0 var(--s-16); padding-left: 1.25em; }
li { margin-bottom: var(--s-8); }

/* numbers and prices always tabular */
.num, .price, td.num, [data-price], [data-spot], time {
  font-variant-numeric: tabular-nums;
}

/* body-copy links: underlined, generous targets */
main a {
  color: var(--navy-700);
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-underline-offset: 3px;
}
main a:visited { color: var(--navy-900); }
main a:hover { color: var(--gold-550); }

:focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 2px;
  border-radius: var(--r);
}
.on-navy :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .band-navy :focus-visible {
  outline-color: var(--gold-300);
}
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: var(--white);
  padding: var(--s-12) var(--s-24); border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-24); }

/* 12-col grid helpers for asymmetric compositions */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-32); align-items: start; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-12 { grid-column: span 12; }
@media (max-width: 880px) {
  .grid { display: block; }
  .grid > * + * { margin-top: var(--s-32); }
}

/* section rhythm: deliberately varied */
.section { padding: var(--s-96) 0; }
.section-tight { padding: var(--s-64) 0; }
.section-deep { padding: var(--s-128) 0 var(--s-96); }
.bg-paper { background: var(--paper); }
.bg-white { background: var(--white); }

/* hairline separator with hallmark glyph */
.rule-hallmark {
  border: 0; height: 0; border-top: 1px solid var(--line);
  position: relative; margin: 0 auto; max-width: var(--wrap);
}
.rule-hallmark::after {
  content: "";
  position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
  width: 27px; height: 18px;
  background-color: var(--white);
  background-repeat: no-repeat; background-position: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 18" fill="none"><rect x="1" y="1" width="25" height="16" rx="2" stroke="%238B94A3" stroke-width="1.5"/></svg>');
}
.on-paper.rule-hallmark::after { background-color: var(--paper); }

/* ---------- 4. Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  border-bottom: 1px solid var(--gold-500);
  box-shadow: 0 1px 10px rgba(14, 27, 44, 0.25);  /* one of the two allowed shadows */
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-24);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand svg { display: block; }
/* 20px, not 24px: five links, a phone number and a call to action
   need every pixel between the logo and the right edge of the
   1200px wrap. Measured in the browser, not estimated. See the
   note above NAV_LINKS in app.js for the numbers. */
.site-nav {
  display: flex; align-items: center; gap: 20px;
  margin-left: auto;
}
.site-nav a.nav-link {
  color: #E8ECF2; text-decoration: none; font-size: 1rem; font-weight: 600;
  padding: var(--s-8) 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;   /* overflow loudly rather than wrap quietly */
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.site-nav a.nav-link:hover { color: var(--white); border-bottom-color: var(--gold-300); }
.site-nav a.nav-link[aria-current="page"] { color: var(--white); border-bottom-color: var(--gold-300); }
/* The one nav link that is a question rather than a page name.
   Gold rather than grey, and carrying its own permanent underline,
   so it reads as the different one at a glance.
   Deliberately NOT a bordered pill: the pill cost 34px of a bar
   that has 32px of slack, and it also set up a second button
   competing with the gold call to action two items along. */
.site-nav a.nav-link.nav-feature {
  color: var(--gold-300);
  border-bottom-color: var(--gold-500);
}
.site-nav a.nav-link.nav-feature:hover,
.site-nav a.nav-link.nav-feature[aria-current="page"] {
  color: var(--white); border-bottom-color: var(--gold-300);
}
.nav-phone {
  color: #E8ECF2; text-decoration: none; font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav-phone:hover { color: var(--white); }
.nav-toggle { display: none; }

/* Six links, a phone number and a call to action stop fitting
   before the 1200px wrap does, so the bar folds into the menu
   button earlier than it used to (was 1020px).
   MEASURED, not estimated: with the old 24px gap the bar needed
   exactly 1200px of viewport and had zero slack, so any future
   nav label one word longer would have silently overlapped the
   logo. The gap is now 20px and the bar folds below 1200px, which
   leaves real room. If you add a seventh link, re-measure: take
   .brand width + .site-nav width + the 24px header gap and
   compare it against 1152px, which is all the room the wrap has. */
@media (max-width: 1199px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s-8);
    margin-left: auto;
    background: none; border: 1px solid rgba(232, 236, 242, 0.4); border-radius: var(--r);
    color: #E8ECF2; font: 600 1rem var(--font-body);
    padding: var(--s-8) var(--s-16); min-height: 44px; cursor: pointer;
  }
  .site-nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--navy-900); border-bottom: 1px solid var(--gold-500);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-8) var(--s-24) var(--s-24);
  }
  .site-nav.open { display: flex; }
  .site-nav a.nav-link, .nav-phone { padding: var(--s-12) 0; border-bottom: 1px solid rgba(221, 226, 233, 0.15); }
  .site-nav .btn { margin-top: var(--s-16); }
}

/* ---------- 5. Buttons ---------- */

.btn {
  display: inline-block;
  font: 700 1.125rem/1.2 var(--font-body);
  padding: 14px 28px;
  min-height: 48px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 160ms ease-out, color 160ms ease-out, transform 120ms ease-out;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold-500); color: var(--navy-900); }
.btn-gold:hover { background: var(--gold-550); }
.btn-quiet {
  background: transparent; color: var(--navy-700);
  border-color: var(--navy-700);
}
.btn-quiet:hover { background: var(--navy-700); color: var(--white); }
.btn-block { display: block; width: 100%; }

.link-arrow {
  font-weight: 700; text-decoration: none;
  color: var(--navy-700);
  border-bottom: 2px solid var(--gold-500);
  padding-bottom: 2px;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.link-arrow:hover { color: var(--gold-550); }

/* ---------- 6. The one card primitive ---------- */

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-24);
}
.card::before {
  content: "";
  position: absolute; top: -1px; left: 12px;
  width: 24px; height: 2px;
  background: var(--gold-500);
}
a.card { text-decoration: none; color: inherit; display: block; transition: border-color 160ms ease-out; }
a.card:hover { border-color: var(--navy-700); }
a.card:hover h3 { color: var(--gold-550); }
.card h3 { font-size: 1.25rem; margin-bottom: var(--s-8); transition: color 160ms ease-out; }
.card p { margin-bottom: var(--s-8); font-size: 1rem; }
.card .card-rate { font-weight: 700; color: var(--navy-700); font-size: 1rem; margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- 7. Hero ---------- */

.hero { padding: var(--s-96) 0 var(--s-64); position: relative; }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-48); align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--s-24); }
.hero .lead { margin-bottom: var(--s-24); max-width: 34em; }
.hero-cta-row { display: flex; align-items: center; gap: var(--s-24); flex-wrap: wrap; margin-bottom: var(--s-12); }
.hero-proof { color: var(--ink); font-size: 1rem; font-weight: 600; margin: 0; }
.hero-proof .sep { color: var(--gold-500); padding: 0 var(--s-8); }
.hero-art { position: relative; }
.hero-art svg { display: block; margin: 0 auto; height: auto; }
/* illustration overlaps the boundary into the next section */
.hero-overlap { padding-bottom: 0; }
.hero-overlap .hero-art { margin-bottom: calc(-1 * var(--s-48)); position: relative; z-index: 2; }

/* credibility strip: text, not badges */
.cred-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cred-strip .wrap {
  display: flex; gap: var(--s-16); align-items: center; justify-content: space-between;
  padding-top: var(--s-16); padding-bottom: var(--s-16); flex-wrap: wrap;
}
.cred-strip span { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--navy-700); }
.cred-strip .sep { color: var(--gold-500); }

/* ---------- 8. Process timeline ---------- */

.timeline { list-style: none; padding: 0; margin: var(--s-48) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-32); position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 22px; left: 3%; right: 3%;
  border-top: 1px solid var(--line);
}
.timeline li { position: relative; padding-top: var(--s-48); margin: 0; }
.timeline .t-num {
  position: absolute; top: -14px; right: 6px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 4.5rem; line-height: 1;
  color: var(--navy-700); opacity: 0.08;
  pointer-events: none; user-select: none;
}
.timeline .t-icon {
  position: absolute; top: 0; left: 0;
  width: 44px; height: 44px; border-radius: var(--r);
  background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-700);
}
.timeline h3 { font-size: 1.25rem; margin-bottom: var(--s-8); }
.timeline p { font-size: 1rem; margin: 0; }
@media (max-width: 880px) {
  .timeline { grid-template-columns: 1fr; gap: var(--s-24); }
  .timeline::before { display: none; }
}

/* ---------- 9. Navy guarantee band ---------- */

.band-navy {
  background: linear-gradient(160deg, var(--navy-900) 20%, var(--navy-800) 100%);
  position: relative;
  color: #E8ECF2;
  padding: var(--s-96) 0;
  overflow: hidden;
}
.band-navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.025;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="240" height="240" filter="url(%23n)"/></svg>');
}
.band-navy .wrap { position: relative; }
.band-navy h2 { color: var(--white); }
.band-navy h3 { color: var(--white); font-size: 1.25rem; }
.band-navy a { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold-300); text-underline-offset: 3px; }
.band-navy a:visited { color: #E8ECF2; }
.promise-list { list-style: none; padding: 0; margin: 0; counter-reset: promise; }
.promise-list li {
  counter-increment: promise;
  position: relative; padding-left: 56px; margin-bottom: var(--s-24);
}
.promise-list li::before {
  content: counter(promise);
  position: absolute; left: 0; top: 2px;
  width: 36px; height: 36px;
  border: 1px solid var(--gold-300); border-radius: var(--r);
  color: var(--gold-300);
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.promise-list strong { color: var(--white); }
.promise-list p { margin: 0; font-size: 1.0625rem; }

/* ---------- 10. Price tables ---------- */

.price-table-scroll { overflow-x: auto; }
table.price-table {
  border-collapse: collapse; width: 100%; max-width: 780px;
  margin: 0 0 var(--s-24);
}
table.price-table caption {
  text-align: left; font-family: var(--font-display); font-weight: 600;
  font-size: 1.25rem; color: var(--navy-700); padding-bottom: var(--s-12);
}
.price-table th, .price-table td {
  text-align: left; padding: var(--s-16);
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
}
.price-table thead th {
  font-size: 1rem; font-weight: 700; color: var(--navy-700);
  border-bottom: 1px solid var(--navy-700);
}
.price-table td.num, .price-table th.num {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
}
.price-table td.rate { color: var(--ink); font-size: 1rem; white-space: nowrap; }

.price-stamp { font-size: 1rem; color: var(--ink); }
.price-stamp strong { color: var(--ok); }
.price-warning {
  border: 1px solid var(--gold-500); border-left: 4px solid var(--gold-500);
  background: #FBF6E9; color: #5F4A10;
  border-radius: var(--r);
  padding: var(--s-16) var(--s-24); margin-bottom: var(--s-24);
  font-size: 1.0625rem;
}

/* melt math note + FAQ accordions */
details.melt-math, details.faq-item {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white);
  margin-bottom: var(--s-12);
}
details summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  font-weight: 700; font-size: 1.125rem; color: var(--navy-700);
  min-height: 48px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--gold-500); flex: 0 0 auto;
}
details[open] summary::after { content: "\2212"; } /* minus sign, not a dash in copy */
details[open] { box-shadow: 0 2px 12px rgba(14, 27, 44, 0.08); } /* allowed: open accordion */
details .details-body { padding: 0 var(--s-24) var(--s-24); }
details .details-body > :last-child { margin-bottom: 0; }

/* ---------- 11. Forms ---------- */

.form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-32);
  position: relative;
}
.form-panel::before {
  content: "";
  position: absolute; top: -1px; left: 12px;
  width: 24px; height: 2px;
  background: var(--gold-500);
}
.kit-form .field { margin-bottom: var(--s-24); position: relative; }
.kit-form label { display: block; font-size: 1.125rem; font-weight: 700; color: var(--navy-700); margin-bottom: var(--s-8); }
.kit-form .helper { font-size: 1rem; color: var(--ink); margin: var(--s-4) 0 0; }
.kit-form input[type="text"],
.kit-form input[type="email"],
.kit-form input[type="tel"],
.kit-form input[type="number"],
.kit-form select {
  width: 100%;
  height: 52px;
  padding: 0 var(--s-16);
  font: 500 1.125rem var(--font-body);
  color: var(--ink);
  border: 1px solid var(--steel);
  border-radius: var(--r);
  background: var(--white);
  transition: border-color 160ms ease-out;
}
.kit-form input:focus, .kit-form select:focus, .kit-form textarea:focus {
  border: 2px solid var(--navy-700);
  outline: 3px solid var(--navy-700); outline-offset: 3px;
}
.kit-form select { max-width: 280px; }
.kit-form textarea {
  width: 100%;
  padding: var(--s-12) var(--s-16);
  font: 500 1.125rem var(--font-body);
  color: var(--ink);
  border: 1px solid var(--steel);
  border-radius: var(--r);
  background: var(--white);
  resize: vertical;
}

/* numbered section headings inside the form panel */
.form-panel .form-step {
  font-size: 1.25rem;
  margin: var(--s-32) 0 var(--s-16);
  padding-top: var(--s-16);
  border-top: 1px solid var(--line);
}
.form-panel h2 + p + form .form-step:first-of-type,
.form-panel .form-step:first-of-type {
  border-top: 0; padding-top: 0; margin-top: var(--s-8);
}
.kit-form input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--navy-700); flex: 0 0 auto; }
.kit-form .field label.radio { display: inline-flex; align-items: center; gap: var(--s-8); font-weight: 600; min-height: 44px; cursor: pointer; margin-bottom: 0; }

/* the box repeater: one bordered group per box */
.box-group {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-16); margin: 0 0 var(--s-16);
}
.box-group legend {
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  color: var(--navy-700); padding: 0 var(--s-8);
}
.box-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-12); }
@media (max-width: 560px) { .box-row { grid-template-columns: 1fr 1fr; } }
.box-field label {
  display: block; font-size: 1rem; font-weight: 600;
  color: var(--navy-700); margin-bottom: var(--s-4);
}
.box-field input { height: 48px; padding: 0 var(--s-12); width: 100%; }
.box-group.is-error { border: 2px solid var(--error); }
.box-group .error-msg {
  display: none; color: var(--error); font-size: 1rem; font-weight: 600;
  margin: var(--s-8) 0 0;
}
.box-group.is-error .error-msg { display: block; }

/* stacked radio options (the what-are-you-sending choice) */
.contact-choice .radio-col {
  display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-12);
}
.radio-col label.radio { align-items: flex-start; }
.radio-col input[type="radio"] { flex: 0 0 auto; margin-top: 6px; }
.kit-form .field.is-valid input { border-color: var(--ok); }
.kit-form .field.is-valid::after {
  content: "";
  position: absolute; right: 16px; top: 48px;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok);
  transform: rotate(-45deg);
}
.kit-form .field.is-error input,
.kit-form .field.is-error select { border: 2px solid var(--error); }
.kit-form .error-msg {
  display: none;
  color: var(--error); font-size: 1rem; font-weight: 600; margin-top: var(--s-4);
}
.kit-form .error-msg::before,
.kit-form .step-error:not(:empty)::before {
  content: "";
  display: inline-block; width: 16px; height: 14px;
  margin-right: 6px; vertical-align: -1px;
  background-repeat: no-repeat; background-size: contain;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" fill="none" stroke="%23A4232B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 L22 20 H2 Z"/><path d="M12 9 v5"/><circle cx="12" cy="17" r="0.4" fill="%23A4232B"/></svg>');
}
.kit-form .field.is-error .error-msg { display: block; }

.contact-choice { border: 0; padding: 0; margin: 0 0 var(--s-24); }
.contact-choice legend { font-size: 1.125rem; font-weight: 700; color: var(--navy-700); padding: 0; margin-bottom: var(--s-8); font-family: var(--font-body); }
.contact-choice .radio-row { display: flex; gap: var(--s-24); margin-bottom: var(--s-12); }
.contact-choice label.radio {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-size: 1.125rem; font-weight: 600; color: var(--ink);
  min-height: 44px; cursor: pointer;
}
.contact-choice input[type="radio"] { width: 24px; height: 24px; accent-color: var(--navy-700); }

.form-privacy { font-size: 1rem; margin-top: var(--s-16); }
.form-call { font-size: 1rem; margin-top: var(--s-8); margin-bottom: 0; }

/* honeypot: visually removed, still in DOM for bots.
   SECOND LAYER ONLY. app.js sets the hidden attribute on this
   wrapper, so the field is gone even when this stylesheet does not
   load. Do not delete that attribute and lean on this rule: a
   seller who sees a "Company" box and fills it in has their whole
   request thrown away by the spam trap without being told. */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* ---------- 11b. Stepped form (JS enhancement only) ----------
   Nothing here hides a field on its own: app.js sets the hidden
   attribute on the steps it is not showing. With no JavaScript the
   form stays one long page and these rules never apply. */

.form-progress {
  margin: 0 0 var(--s-24);
  scroll-margin-top: calc(var(--header-h) + var(--s-24));
}
.form-progress-text {
  font-size: 1rem; font-weight: 700; color: var(--navy-700);
  margin: 0 0 var(--s-8); font-variant-numeric: tabular-nums;
}
.form-progress-dots {
  display: flex; gap: var(--s-8); list-style: none; margin: 0; padding: 0;
}
.form-progress-dots li {
  flex: 1 1 0; height: 4px; margin: 0;
  border-radius: var(--r); background: var(--line);
}
.form-progress-dots li.is-done { background: var(--navy-700); }
.form-progress-dots li.is-current { background: var(--gold-500); }

/* sticky header must never sit over the heading we focus */
.form-fieldset { scroll-margin-top: calc(var(--header-h) + var(--s-24)); }
.form-fieldset .form-step:focus {
  outline: 3px solid var(--navy-700); outline-offset: 4px;
}

.step-nav-wrap {
  border-top: 1px solid var(--line);
  margin-top: var(--s-24); padding-top: var(--s-24);
}
.step-nav { display: flex; gap: var(--s-16); flex-wrap: wrap; }
.step-nav .btn { min-width: 150px; }
.kit-form .step-error {
  color: var(--error); font-size: 1rem; font-weight: 600; margin: 0 0 var(--s-16);
}
.kit-form .step-error:empty { margin: 0; }

/* compact CTA block used on secondary pages */
.kit-cta-compact {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-32); position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); flex-wrap: wrap;
}
.kit-cta-compact::before {
  content: ""; position: absolute; top: -1px; left: 12px;
  width: 24px; height: 2px; background: var(--gold-500);
}
.kit-cta-compact h2 { margin: 0 0 var(--s-8); font-size: 1.5rem; }
.kit-cta-compact p { margin: 0; font-size: 1.0625rem; }
.kit-cta-compact .cta-side { flex: 0 0 auto; }

/* drawn arrow motif leading into the form */
.form-lead-arrow { text-align: center; color: var(--steel); padding: var(--s-24) 0 0; }
.form-lead-arrow svg { display: inline-block; }

/* ---------- 12. Page furniture ---------- */

.site-footer {
  background: var(--navy-900);
  border-top: 1px solid var(--gold-500);
  color: #C8CFD9;
  padding: var(--s-64) 0 var(--s-32);
  font-size: 1rem;
}
.footer-cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-48);
  margin-bottom: var(--s-48);
}
@media (max-width: 880px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s-32); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-tagline { color: #C8CFD9; font-size: 1rem; margin: var(--s-8) 0 0; }
.site-footer h4 { color: var(--white); font: 700 1rem var(--font-body); margin-bottom: var(--s-12); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s-8); }
.site-footer a { color: #C8CFD9; text-decoration: none; padding: 2px 0; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold-300); }
.footer-disclosure {
  border-top: 1px solid rgba(221, 226, 233, 0.2);
  padding-top: var(--s-24);
  font-size: 0.9375rem; color: #A9B2BF;
}
.footer-disclosure p { margin-bottom: var(--s-8); }

/* FAQ page items */
.faq-item h3 { font-size: 1.25rem; }

/* callout: reuses the card primitive language */
.callout {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-24); margin: var(--s-24) 0; position: relative;
}
.callout::before {
  content: ""; position: absolute; top: -1px; left: 12px;
  width: 24px; height: 2px; background: var(--gold-500);
}
.callout > :last-child { margin-bottom: 0; }

/* drop-off address block: the <address> element, de-italicised and
   set at the same weight as a card rate so it reads as a fact */
.address-block {
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--navy-700);
  margin: var(--s-12) 0 var(--s-12);
}
.address-phone {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-12);
}
@media (max-width: 560px) {
  .address-block, .address-phone { font-size: 1.0625rem; }
}

/* confirmation page timeline strip */
.confirm-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24);
  margin: var(--s-32) 0;
}
@media (max-width: 880px) { .confirm-strip { grid-template-columns: 1fr; } }

/* mark lists on guide pages */
ul.mark-list { list-style: none; padding: 0; }
ul.mark-list li {
  border-bottom: 1px solid var(--line);
  padding: var(--s-8) 0; margin: 0;
}

/* honeypot: off-screen, never announced. SECOND LAYER ONLY, same as
   .hp-field above. This used to be the only thing hiding the field,
   chosen over display:none because some robots skip hidden fields;
   app.js now sets the hidden attribute as well, so a stylesheet that
   fails to load can no longer show a real seller a "Website" box
   that silently voids their request. Catching a few more naive bots
   is not worth losing one genuine parcel. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* accessible-only text */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* icon inline helper */
.icon-inline { display: inline-flex; vertical-align: -4px; color: var(--navy-700); }

/* ---------- 12b. Drop-off booking calendar ----------
   Borders not shadows, two radii, gold reserved for the one
   confirm button. A chosen day, time or chip fills navy, so the
   selection is never carried by colour alone: it also changes
   weight and gets aria-pressed. */

body.bk-locked { overflow: hidden; }

.bk-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 27, 44, 0.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s-24) var(--s-16);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bk-modal[hidden] { display: none; }
.bk-panel {
  position: relative;
  width: 100%; max-width: 660px;
  margin: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-32);
}
@media (max-width: 560px) { .bk-panel { padding: var(--s-24) var(--s-16); } }
.bk-panel h2 { font-size: 1.75rem; margin-bottom: var(--s-8); padding-right: var(--s-48); }
.bk-panel h2:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 4px; }
.bk-close {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px;
  font: 400 1.75rem/1 var(--font-body);
  color: var(--navy-700);
  background: none; border: 0; border-radius: var(--r);
  cursor: pointer;
}
.bk-close:hover { background: var(--paper); }
.bk-intro { color: var(--ink); margin-bottom: var(--s-16); }
.bk-closed {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-12) var(--s-16); font-size: 1rem; margin-bottom: var(--s-16);
}
.bk-closed[hidden] { display: none; }
.bk-step {
  font-size: 1.125rem;
  margin: var(--s-24) 0 var(--s-12);
  padding-top: var(--s-16);
  border-top: 1px solid var(--line);
}
.bk-step:first-of-type { border-top: 0; padding-top: 0; }

/* what are you bringing */
.bk-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.bk-chip {
  font: 600 1rem var(--font-body);
  color: var(--navy-700); background: var(--white);
  border: 1px solid var(--steel); border-radius: var(--r-pill);
  padding: 10px var(--s-16); min-height: 44px; cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.bk-chip:hover { border-color: var(--navy-700); }
.bk-chip.on { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); font-weight: 700; }

/* the day strip */
.bk-dates {
  display: flex; gap: var(--s-8);
  overflow-x: auto; padding-bottom: var(--s-8);
  scroll-snap-type: x proximity;
}
.bk-date {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 78px; min-height: 84px; gap: 2px;
  background: var(--white); color: var(--navy-700);
  border: 1px solid var(--steel); border-radius: var(--r);
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.bk-date:hover { border-color: var(--navy-700); }
.bk-date .dow { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em; }
.bk-date .dnum { font: 700 1.5rem var(--font-display); font-variant-numeric: tabular-nums; }
.bk-date .mon { font-size: 0.875rem; }
.bk-date.sel { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }

/* the time grid */
.bk-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); }
@media (max-width: 560px) { .bk-slots { grid-template-columns: repeat(3, 1fr); } }
.bk-slot {
  min-height: 48px;
  font: 600 1rem var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--navy-700); background: var(--white);
  border: 1px solid var(--steel); border-radius: var(--r);
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.bk-slot:hover:not(:disabled) { border-color: var(--navy-700); }
.bk-slot.sel { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); font-weight: 700; }
.bk-slot--off, .bk-slot:disabled {
  color: var(--steel); background: var(--paper);
  border-color: var(--line); cursor: not-allowed;
  text-decoration: line-through;
}

/* details fields, same shapes as the label form */
.bk-panel .field { margin-bottom: var(--s-16); }
.bk-panel label { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--navy-700); margin-bottom: var(--s-8); }
.bk-panel .helper { font-size: 1rem; color: var(--ink); margin: var(--s-4) 0 0; }
.bk-panel input[type="text"],
.bk-panel input[type="email"],
.bk-panel input[type="tel"],
.bk-panel select {
  width: 100%; height: 52px; padding: 0 var(--s-16);
  font: 500 1.125rem var(--font-body); color: var(--ink);
  border: 1px solid var(--steel); border-radius: var(--r);
  background: var(--white);
}
.bk-panel select { max-width: 280px; }
.bk-panel textarea {
  width: 100%; padding: var(--s-12) var(--s-16);
  font: 500 1.125rem var(--font-body); color: var(--ink);
  border: 1px solid var(--steel); border-radius: var(--r);
  background: var(--white); resize: vertical;
}
.bk-panel input:focus, .bk-panel select:focus, .bk-panel textarea:focus,
.bk-chip:focus-visible, .bk-date:focus-visible, .bk-slot:focus-visible, .bk-close:focus-visible {
  outline: 3px solid var(--navy-700); outline-offset: 3px;
}
@media (max-width: 560px) { .bk-fields { display: block; } }

.bk-panel .error-msg {
  color: var(--error); font-weight: 700; font-size: 1rem;
  margin: var(--s-16) 0 var(--s-8);
}
.bk-panel .error-msg[hidden] { display: none; }
.bk-panel .btn-block { margin-top: var(--s-16); }
.bk-foot { margin-top: var(--s-16); }

/* the confirmation view */
.bk-done-seal { text-align: center; margin-bottom: var(--s-16); }
.bk-done-when {
  font: 400 1.375rem var(--font-display); color: var(--navy-700);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-16); text-align: center; margin-bottom: var(--s-16);
}

/* ---------- 12b. Homepage valuation band ----------
   The card primitive's language (border, 3px gold top rule) at
   full width, because this one block has to be findable from the
   top of the page without stealing the hero's single gold CTA. */

.worth-band {
  display: grid; grid-template-columns: 7fr 4fr; gap: var(--s-48);
  align-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white);
  padding: var(--s-32);
  position: relative;
}
.worth-band::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
  height: 3px; background: var(--gold-500);
  border-radius: var(--r) var(--r) 0 0;
}
.worth-band h2 { font-size: 1.75rem; margin-bottom: var(--s-8); }
.worth-band p { margin: 0; }
.worth-band-cta .meta { margin: var(--s-8) 0 0; text-align: center; }
@media (max-width: 860px) {
  .worth-band { grid-template-columns: 1fr; gap: var(--s-24); padding: var(--s-24) var(--s-16); }
}

/* ---------- 12c. The mark gallery ("what am I holding?") ----------
   Each mark is a stamp card: the punch drawn at a readable size in
   the site's own hallmark line language, then the plain English
   meaning, then the lane it lands in. The lane chip is the only
   colour cue and it never carries meaning alone: it always spells
   out the lane in words as well. */

.mark-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-24);
  margin: var(--s-32) 0 0;
  padding: 0; list-style: none;
}
.mark-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  padding: var(--s-16);
  margin: 0;
  display: flex; flex-direction: column; gap: var(--s-8);
}
.mark-stamp {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-12);
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
}
.mark-stamp svg { display: block; height: auto; max-width: 100%; }
.mark-card h4 { margin: 0; font-size: 1.0625rem; }
.mark-card p { margin: 0; font-size: 1rem; }
/* the meaning takes the slack, so the lane chips line up across a row
   instead of floating at whatever height the sentence happens to end */
.mark-card > p:first-of-type { flex: 1 1 auto; }
.mark-lane {
  align-self: flex-start;
  font-size: 1rem; font-weight: 700; line-height: 1.35;
  border-radius: var(--r-pill);
  padding: var(--s-4) var(--s-12);
  border: 1px solid var(--line);
  background: var(--paper); color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}
.mark-lane.is-quote { border-color: var(--gold-500); }
.mark-lane.is-none { color: var(--ink); }
.mark-caveat {
  font-size: 1rem; margin: var(--s-8) 0 0;
  border-top: 1px solid var(--line); padding-top: var(--s-8);
}

/* ---------- 12d. The valuator ----------
   Four columns on a desk (category, rate, weight, money) and a
   stacked card on a phone. The money column is tabular so the
   figures line up under each other while they change. */

.val { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-32); align-items: start; }
@media (max-width: 900px) { .val { display: block; } .val .val-out { margin-top: var(--s-32); } }

.val-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  padding: var(--s-32);
  position: relative;
}
@media (max-width: 560px) { .val-panel { padding: var(--s-24) var(--s-16); } }
.val-panel::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px;
  height: 3px; background: var(--gold-500);
  border-radius: var(--r) var(--r) 0 0;
}
.val-panel h2 { font-size: 1.75rem; }
.val-units { margin-top: var(--s-24); }
.val-units legend { font-size: 1.125rem; font-weight: 700; color: var(--navy-700); font-family: var(--font-body); padding: 0; margin-bottom: var(--s-8); }

.val-grid { margin-top: var(--s-24); border-top: 1px solid var(--line); }
.val-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 132px 96px;
  gap: var(--s-12);
  align-items: center;
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--line);
}
.val-row-name label { display: block; font-weight: 700; color: var(--navy-700); font-size: 1.0625rem; margin: 0; }
.val-hint { display: block; font-size: 1rem; color: var(--ink); }
.val-row-rate { font-size: 1rem; font-weight: 700; color: var(--navy-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.val-row-input { display: flex; align-items: center; gap: var(--s-8); }
.val-row-input input {
  width: 100%; height: 48px; min-width: 0;
  padding: 0 var(--s-12);
  font: 400 1.125rem var(--font-body);
  color: var(--ink); background: var(--white);
  border: 1px solid var(--navy-700); border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.val-row-input input:focus { outline: 3px solid var(--navy-700); outline-offset: 2px; }
.val-unit { font-size: 1rem; font-weight: 700; color: var(--navy-700); }
.val-row-money { text-align: right; font-weight: 700; color: var(--navy-700); font-variant-numeric: tabular-nums; min-height: 1.6em; }

.val-row.val-head {
  font-size: 1rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--steel);
  padding-bottom: var(--s-8);
}
.val-row.val-head .val-row-money { text-align: right; }

@media (max-width: 640px) {
  .val-row { grid-template-columns: minmax(0, 1fr) 108px; row-gap: var(--s-8); }
  .val-row.val-head { display: none; }
  .val-row-name { grid-column: 1 / -1; }
  .val-row-rate { grid-column: 1; }
  .val-row-input { grid-column: 2; }
  .val-row-money { grid-column: 1 / -1; text-align: left; }
  .val-row-money:not(:empty)::before { content: "Line total "; font-weight: 400; color: var(--ink); }
}

.val-quote-block { margin-top: var(--s-24); }
.val-quote-block h3 { font-size: 1.25rem; margin-bottom: var(--s-8); }
/* the stacking rule for .radio-col is scoped to .contact-choice, which
   this block is not inside, so the five quote-only options ran together
   on one line. Stack them here rather than widening that selector and
   changing the label form's layout as a side effect. */
.val-quote-block .radio-col {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: var(--s-12);
}
/* the 24px box and 44px row come from .kit-form, which is also a
   selector this block sits outside. Same size here so a thumb on a
   phone hits the same target it does on the label form. */
.val-quote-block .radio-col label.radio {
  display: inline-flex; align-items: center; gap: var(--s-8);
  min-height: 44px; font-weight: 600; cursor: pointer; margin-bottom: 0;
}
.val-quote-block .radio-col input[type="checkbox"] {
  width: 24px; height: 24px; accent-color: var(--navy-700); flex: 0 0 auto;
}
.val-magnet { margin: var(--s-24) 0 0; font-size: 1rem; }

.val-out { position: sticky; top: calc(var(--header-h) + var(--s-24)); }
@media (max-width: 900px) { .val-out { position: static; } }
.val-out-empty, .val-out-live {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); padding: var(--s-24);
}
.val-out-empty h3, .val-out-live h3 { font-size: 1.25rem; margin-bottom: var(--s-8); }
.val-out-empty p { margin: 0; font-size: 1rem; }

.val-table { width: 100%; border-collapse: collapse; margin: var(--s-16) 0; font-size: 1rem; }
.val-table th, .val-table td { text-align: left; padding: var(--s-8) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.val-table td.num, .val-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.val-table thead th { font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--steel); }
.val-table tfoot th { font-weight: 700; color: var(--navy-700); }
.val-table tfoot td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.val-table tr.val-total th, .val-table tr.val-total td {
  border-top: 2px solid var(--navy-700); border-bottom: 0;
  font-size: 1.25rem; color: var(--navy-700); padding-top: var(--s-12);
}
.val-note { font-size: 1rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-12); }
.val-quoted { margin-top: var(--s-16); }
.val-quoted h4 { margin-bottom: var(--s-8); }
.val-quoted ul.mark-list li { font-size: 1rem; }
.val-quoted p { font-size: 1rem; margin: var(--s-8) 0 0; }
/* Same weight as the body copy, never fine print. Canadian advertising
   law reads the general impression of the whole panel, and a
   qualification set in small grey type under a big number is exactly
   the pattern the Competition Bureau says does not work. If you are
   tempted to shrink this to make the panel tidier, shorten the words
   instead. */
.val-disclaim {
  margin-top: var(--s-16); padding-top: var(--s-16);
  border-top: 1px solid var(--line);
  font-size: 1.0625rem; color: var(--ink);
}
.val-disclaim p { margin-bottom: var(--s-12); }
.val-disclaim p:last-child { margin-bottom: 0; }

.val-before { margin-top: var(--s-24); }
.val-before h3 { font-size: 1.25rem; margin-bottom: var(--s-8); }
.val-before ul.mark-list li { font-size: 1rem; }
.val-cta { margin: var(--s-16) 0 var(--s-8); }
.val-cta .btn { width: 100%; text-align: center; }
.val-drift {
  border: 2px solid var(--error); border-radius: var(--r);
  padding: var(--s-12); font-size: 1rem; color: var(--error);
}

/* ---------- 13. Motion ---------- */

.fade-up { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.fade-up.in { opacity: 1; transform: none; }
/* if JS never runs, content must not stay hidden */
.no-js .fade-up { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1; transform: none; }
}

/* ---------- 14. Print (what-we-pay, how-it-works, for-executors) ---------- */

@media print {
  /* ⚠ SITE-WIDE PRINT BUG, fixed 2026-08-18. Every section below the
     fold carries .fade-up, which is opacity:0 until an
     IntersectionObserver adds .in when it scrolls into view. Printing
     does not scroll, so the observer never fires for anything the
     reader has not already looked at, and those sections printed as
     BLANK PAGES. A nine-page guide came out with three empty sheets in
     the middle. Force them visible on paper. This applies to every
     page on the site, not only the mark guide. */
  .fade-up { opacity: 1 !important; transform: none !important; }

  .site-header, .site-footer, .form-panel, .kit-cta-compact, .form-lead-arrow,
  .btn, .nav-toggle, .hero-art, .band-navy, .cred-strip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  h1, h2, h3 { color: #000; }
  main a { color: #000; text-decoration: none; }
  .print-contact { display: block !important; border-top: 1px solid #000; margin-top: 16pt; padding-top: 8pt; font-weight: 700; }
  .price-table th, .price-table td { border-color: #000; }

  /* The mark guide is the one page on this site people will actually
     print: it gets carried to the sideboard and used while sorting a
     drawer, often by someone who would rather hold paper than a phone.
     So it has to survive the printer.
     Four columns of cards become two, nothing splits across a page
     break, and the punch pictures stay put. The calculator itself is
     dropped, because a form you cannot type into is just noise on
     paper, and the published prices are printed in its place. */
  .mark-gallery { grid-template-columns: 1fr 1fr !important; gap: 8pt !important; }
  .mark-card {
    break-inside: avoid; page-break-inside: avoid;
    border: 0.5pt solid #000 !important; padding: 6pt !important;
  }
  .mark-stamp { border: 0 !important; background: none !important; min-height: 0 !important; padding: 0 0 4pt !important; }
  .mark-stamp svg, .mark-stamp img { max-height: 46pt; width: auto; }
  .mark-lane { border: 0.5pt solid #000 !important; background: none !important; }
  .mark-card h4 { font-size: 10pt; }
  .mark-card p, .mark-caveat { font-size: 9pt; }
  .val-panel, .worth-band, .val-out { display: none !important; }
  .val-print-prices { display: block !important; }
  section, .callout { break-inside: auto; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
}
/* on screen this is redundant with the calculator, so it only exists on paper */
.val-print-prices { display: none; }
.print-contact { display: none; }