/* Restoration Register — the whole stylesheet.

   One file, no build step, no framework. Every page on the site loads this and
   nothing else. Kept small deliberately: the pages that earn traffic are read
   on phones, often on a job site, and Softr's version shipped ~1 MB of
   JavaScript before a single word of copy appeared.

   The 2026 facelift (design_handoff_site_facelift): brick on warm white,
   Figtree for text and UI, Source Serif 4 for headlines and the numbers people
   came for. Colours are only ever the tokens below. */

/* ---- fonts ----

   Self-hosted, so the CSP stays default-src 'self' - no Google Fonts request,
   no third party at all. Latin subset only. Figtree is one variable file
   covering 400-700; Source Serif 4 is two static files at the display optical
   size, because it is only ever used large.

   The url()s must stay double-quoted root paths: scripts/fingerprint.js
   rewrites exactly that form to the hashed /h/ address when it copies this
   file, which is what gives the fonts their year-long cache. See the note by
   the fingerprint call in scripts/build.js. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/h/4ba7d3d096/assets/fonts/figtree-latin.woff2") format("woff2");
  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: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/h/8634160623/assets/fonts/source-serif-4-500-latin.woff2") format("woff2");
  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: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/h/e62ebf4d41/assets/fonts/source-serif-4-600-latin.woff2") format("woff2");
  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 ----

   Contrast, checked against WCAG's 4.5:1 for body text:
     --ink-2 passes on every background here (6.9:1 on --blush at worst).
     --ink-3 passes on white and --paper (5.0:1) but NOT on --blush (4.36) or
       --segment (4.44), so text on those two backgrounds uses --ink-2.
     --ink-4 is 3.3:1 on white and is not used for text at all.
     --link 5.2:1 on --blush; white on --brick 5.0:1. */

:root {
  --paper: #fffdfb; --blush: #f8ece4; --card: #fff; --segment: #f6efe9;
  --ink: #1f1a17; --ink-dark-2: #2b241f; --ink-2: #5a4e46; --ink-3: #7a6c62; --ink-4: #9a8b80; --on-dark-2: #d8c9bd;
  --rule: #efe6df; --rule-warm: #efe0d5;
  --brick: #b4532f; --brick-hover: #963f20; --link: #a3482a; --link-hover: #7c3419;
  --serif: "Source Serif 4", Georgia, serif; --sans: "Figtree", system-ui, sans-serif;
  --max: 1160px; --r-card: 14px; --r-panel: 18px; --r-input: 14px; --r-btn: 10px;
  --narrow: 820px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

/* Focus, on every interactive element, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}

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

.wrap.narrow { max-width: var(--narrow); }

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

.skip {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 10;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  font-weight: 600;
}
.skip:focus { top: 12px; color: #fff; }

/* ---- header / nav ---- */

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

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--ink); }
.logo { flex: none; display: block; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  font-size: 15px;
  font-weight: 500;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  transition: color .15s, background-color .15s;
}
.site-nav a:hover { color: var(--link); }

.site-nav a[aria-current="page"]:not(.nav-pill) {
  text-decoration: underline;
  text-decoration-color: var(--brick);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.site-nav .nav-pill {
  background: var(--ink);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
}
.site-nav .nav-pill:hover,
.site-nav .nav-pill[aria-current="page"] { background: var(--brick); color: #fff; }

/* ---- buttons ---- */

.btn,
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--brick);
  color: #fff;
  font: 600 16px/1.2 var(--sans);
  padding: 13px 22px;
  border: 0;
  border-radius: var(--r-btn);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}
.btn:hover,
.cta:hover { background: var(--brick-hover); color: #fff; }

/* ---- homepage: hero ---- */

.hero { background: var(--blush); }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 64px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
}
.eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brick);
}

.hero h1 {
  font: 600 clamp(40px, 5.6vw, 64px)/1.04 var(--serif);
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.hero .lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 520px;
  margin: 0 0 28px;
  text-wrap: pretty;
}

.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  background: #fff;
  border-radius: var(--r-input);
  padding: 6px 6px 6px 18px;
  box-shadow: 0 1px 0 #e3d3c7, 0 12px 32px -12px rgba(120, 60, 30, .28);
}

.hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  font: inherit;
  font-size: 17px;
  padding: 13px 0;
  background: transparent;
  color: var(--ink);
}
.hero-search input::placeholder { color: var(--ink-3); }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat {
  display: block;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule-warm);
  border-radius: var(--r-panel);
  padding: 22px;
  transition: border-color .15s, background-color .15s;
}
.stat:hover { border-color: var(--brick); color: var(--ink); }

.stat-num {
  display: block;
  font: 600 38px/1 var(--serif);
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-2);
}

.stat.primary {
  grid-column: 1 / -1;
  background: var(--brick);
  border-color: var(--brick);
  color: #fff;
  padding: 24px;
}
.stat.primary:hover { background: var(--brick-hover); border-color: var(--brick-hover); color: #fff; }
.stat.primary .stat-num { font-size: 48px; }
.stat.primary .stat-label { color: #fff; font-size: 16px; font-weight: 500; }

/* ---- homepage sections ---- */

.section { padding-top: 56px; padding-bottom: 56px; }

/* The sticky header would otherwise cover the list heading after "Find grants". */
#grants { scroll-margin-top: 84px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}
.section-head--bare { justify-content: flex-end; margin-bottom: 12px; }

.section-head h2 {
  font: 600 34px/1.15 var(--serif);
  margin: 0 0 6px;
}
.section-head p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* The "All / Names an amount" control. Rendered hidden; search.js shows it.
   Inactive text is --ink-2 rather than the mock's --ink-3, which is 4.4:1 on
   --segment - just under the line. */
.segment {
  display: flex;
  gap: 6px;
  background: var(--segment);
  padding: 4px;
  border-radius: 999px;
}

.segment button {
  font: 600 14px/1.2 var(--sans);
  border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .15s;
}
.segment button[aria-pressed="true"] { background: #fff; color: var(--ink); }

/* ---- the grants list ---- */

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  gap: 6px 20px;
  align-items: center;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 18px 20px;
  transition: border-color .15s;
}
.row:hover { border-color: var(--brick); color: var(--ink); }

.row-main, .row-end { display: flex; flex-direction: column; min-width: 0; }
.row-end { text-align: right; align-items: flex-end; max-width: 30rem; }

.row-name { font-weight: 600; font-size: 18px; line-height: 1.35; }
.row-sub { font-size: 14px; color: var(--ink-3); }

.row-amt {
  font: 600 22px/1.25 var(--serif);
  color: var(--link);
}
/* No figure published: the record's own words, quieter. --ink-3, not the
   mock's --ink-4, which fails contrast on white. */
.row-amt.none { font-size: 18px; color: var(--ink-3); }

.row-note { font-size: 13px; color: var(--ink-3); }

.list-count { margin: 0 0 12px; }
.list-count:empty { display: none; }

.list-foot {
  margin: 20px 0 0;
  max-width: 760px;
  font-size: 14px;
  color: var(--ink-3);
}

/* ---- homepage: directories band ---- */

.band { background: var(--ink); color: #f3e9e1; }

.band h2 {
  font: 600 34px/1.15 var(--serif);
  color: #fff;
  margin: 0 0 24px;
}

.dir-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}

.dir-card {
  display: block;
  color: #fff;
  text-decoration: none;
  background: var(--ink-dark-2);
  border-radius: 16px;
  padding: 24px;
  transition: background-color .15s;
}
.dir-card:hover { background: var(--brick); color: #fff; }

.dir-card-title { display: block; font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.dir-card-body { display: block; font-size: 15px; line-height: 1.5; color: var(--on-dark-2); }
/* --on-dark-2 on --brick is too faint; the hover state goes white. */
.dir-card:hover .dir-card-body { color: #fff; }

/* ---- homepage: trust strip ---- */

.trust-wrap { padding-top: 40px; padding-bottom: 40px; }

.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--blush);
  border-radius: 16px;
  padding: 22px 26px;
}
.trust p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 680px; }
.trust a { font-weight: 600; font-size: 15px; }

/* ---- inner pages: the intro band ---- */

.page-head { background: var(--blush); }
.page-head .wrap { padding-top: 32px; padding-bottom: 40px; }

.crumbs {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--link-hover); }

h1 {
  font: 600 clamp(32px, 4.4vw, 48px)/1.08 var(--serif);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 680px;
  margin: 0;
}

.head-cta { margin: 24px 0 0; }
.head-tag { margin: 0 0 14px; }

.page-body { padding-top: 40px; padding-bottom: 56px; }

.page-body h2 {
  font: 600 28px/1.2 var(--serif);
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
}
.page-body > :first-child { margin-top: 0; }

h3 { font-size: 17px; font-weight: 600; margin: 24px 0 6px; }

.page-body p,
.page-body li { max-width: 720px; }

.meta { font-size: 14px; color: var(--ink-3); }

.disclosure { margin: 0 0 20px; }

.see-also { margin-top: 32px; }

/* ---- the headline number on a grant page ----
   HANDOFF.md is emphatic that the dollar amount and the review date are the
   two things a visitor came for. They get their own block, above everything:
   a white card on the blush intro band. No left-border stripe. */

.headline-amount {
  background: #fff;
  border: 1px solid var(--rule-warm);
  border-radius: var(--r-panel);
  padding: 22px 24px;
  margin: 0 0 24px;
}

.headline-amount .amount {
  display: block;
  font: 600 40px/1.12 var(--serif);
  letter-spacing: -0.01em;
  color: var(--link);
}

.headline-amount .amount.none {
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink-2);
}

.headline-amount .reviewed {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-3);
}

/* ---- fact rows ----
   Still a <table>: scripts/health-check.js reads the review date from
   `Last reviewed</th><td>`, so the markup shape is part of the contract. */

.facts {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 24px;
  font-size: 16px;
  border-top: 1px solid var(--rule);
}

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

.facts th {
  width: 12rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}

.facts td { overflow-wrap: anywhere; }

/* ---- listing cards ---- */

.cards {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 18px 20px;
  transition: border-color .15s;
}
.card:hover,
.card:focus-within { border-color: var(--brick); }

.card h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.35; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--link); }

/* The whole card is the link's hit area. One link, one tab stop, and the tap
   target is the card rather than a line of text. */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}

.card p { margin: 4px 0; font-size: 14px; color: var(--ink-2); max-width: none; }
.card .meta { color: var(--ink-3); }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tags. Featured is a paid placement, and says so in words: the label text is
   the disclosure, the colour is only emphasis. */
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--segment);
  color: var(--ink-2);
}

.tag.featured { background: var(--blush); color: var(--link); }
/* On the blush intro band the pill needs its own ground to be seen. */
.page-head .tag.featured { background: #fff; }

/* ---- the client-side filter (/directory) ---- */

.filter { margin: 0 0 16px; }

.filter label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.filter input {
  width: 100%;
  max-width: 520px;
  font: inherit;
  font-size: 17px;
  padding: 12px 16px;
  border: 1px solid var(--rule-warm);
  border-radius: var(--r-input);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 #e3d3c7, 0 12px 32px -18px rgba(120, 60, 30, .28);
}
.filter input::placeholder { color: var(--ink-3); }

.filter-count {
  font-size: 14px;
  color: var(--ink-3);
  margin: 8px 0 0;
}

/* Rows and cards the filter has ruled out. Set by search.js. */
[hidden] { display: none !important; }

/* ---- prose ---- */

.prose p { margin: 0 0 16px; font-size: 17px; line-height: 1.65; }

.asks { margin: 10px 0 24px; padding-left: 1.3rem; }
.asks li { margin-bottom: 10px; }

.note {
  background: var(--segment);
  border-radius: var(--r-card);
  padding: 18px 20px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--ink-2);
}
.page-body .note { max-width: 760px; }
.note strong { display: block; margin-bottom: 4px; color: var(--ink); }
.note p { margin: 0 0 8px; }
.note p:last-child { margin-bottom: 0; }
.workbook { border-left: 4px solid var(--brick); }
.workbook .cta { margin-top: 6px; }
.workbook-line { border-left: 4px solid var(--brick); padding-left: 12px; }
.workbook-line a { font-weight: 600; }

.sponsor {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: 18px 20px;
  margin: 0 0 24px;
  font-size: 15px;
}
.sponsor p { margin: 4px 0; }
.sponsor img { max-width: 180px; height: auto; display: block; margin-bottom: 10px; }

/* ---- the correction block that every listing carries ---- */

.correct {
  margin-top: 48px;
  background: var(--blush);
  border-radius: 16px;
  padding: 22px 26px;
  font-size: 15px;
  color: var(--ink-2);
}
.correct p { margin: 0; }
.correct strong { color: var(--ink); }

/* ---- footer ---- */

.site-foot {
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-3);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 28px;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.foot-links a { color: var(--ink-3); }
.foot-links a:hover { color: var(--link-hover); }

.foot-note {
  margin: 14px 0 0;
  padding-bottom: 28px;
  max-width: 820px;
  font-size: 13px;
}
.foot-note a { color: var(--ink-3); }

/* ---- /advertise pricing blocks ----

   Deliberately not a three-across pricing grid. The three tiers are for three
   different buyers, not three sizes of the same thing, so a comparison table
   would invite a comparison that makes no sense - a supplier cannot buy the
   $50 trade tier, there is no listing of theirs to feature. Stacked blocks,
   read top to bottom, each one addressed to whoever it is for. */

.tier {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  padding: 26px 28px 24px;
  margin: 20px 0;
}

.page-body .tier h2 { margin: 0 0 8px; font-size: 26px; }

.tier-price { margin: 0 0 12px; color: var(--ink-3); font-size: 15px; }

.tier-price strong {
  font: 600 40px/1 var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 4px;
}

.tier-who { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; }

.tier-gets { margin: 0 0 20px; padding-left: 1.3rem; font-size: 16px; }
.tier-gets li { margin-bottom: 8px; }

.tier .cta { margin-bottom: 4px; }

/* ---- small screens ----
   Grids collapse on their own (auto-fit/minmax). Below 560px: the header stops
   being sticky - with the nav wrapped under the logo it would be ~150px, a
   quarter of a phone screen, on every scroll - and anything tappable gets a
   44px target. */

@media (max-width: 560px) {
  .site-head { position: static; }
  .head-row { gap: 4px 18px; padding-top: 10px; padding-bottom: 10px; }
  .site-nav { gap: 0 18px; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav .nav-pill { min-height: 44px; }
  #grants { scroll-margin-top: 12px; }

  .hero-grid { padding-top: 44px; padding-bottom: 44px; gap: 32px; }
  .hero .lede { font-size: 18px; }
  .hero-search .btn { padding: 13px 16px; }

  .section { padding-top: 44px; padding-bottom: 44px; }
  .section-head h2, .band h2 { font-size: 28px; }
  .segment button { min-height: 44px; }

  .row { grid-template-columns: minmax(0, 1fr); }
  .row-end { text-align: left; align-items: flex-start; max-width: none; }

  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .crumbs { margin-bottom: 8px; }
  .page-head .wrap { padding-top: 12px; padding-bottom: 32px; }
  .page-body h2 { font-size: 24px; }
  .headline-amount .amount { font-size: 32px; }

  .facts th { width: auto; display: block; border: 0; padding-bottom: 0; }
  .facts td { display: block; padding-top: 2px; }
  /* Phone, email and website are the links people tap on a job site. */
  .facts td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

  .trust, .correct { padding: 20px; }
  .trust a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .see-also a { display: inline-block; padding: 10px 0; }
}

/* ---- profile badge link, /badge/, /directory/ intro --------------------- */
.badge-link { margin: 6px 0 0; font-size: 13px; }
.badge-link a { color: var(--ink-3); }
.badge-link a:hover { color: var(--link-hover); }
.badge-preview { margin: 8px 0 24px; }
.snippet {
  overflow-x: auto; padding: 14px 16px; margin: 0 0 14px;
  background: var(--segment); border: 1px solid var(--rule); border-radius: var(--r-input);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
}
.intro p { max-width: 72ch; margin: 0 0 18px; color: var(--ink-2); }

/* ---- the quote-request form (quoteForm() in build.js) ---- */

.quote {
  margin: 40px 0 0;
  background: #fff;
  border: 1px solid var(--rule-warm);
  border-radius: var(--r-panel);
  padding: 24px 26px;
}
.quote h2 { margin-top: 0; }
.quote > p { color: var(--ink-2); margin: 0 0 18px; }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
}
.quote label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.quote .opt { font-weight: 400; color: var(--ink-3); }
.quote input:not([type="checkbox"]),
.quote select,
.quote textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 10px 12px;
  border: 1px solid var(--rule-warm);
  border-radius: var(--r-btn);
  background: var(--paper);
  color: var(--ink);
}
.quote textarea { resize: vertical; }
.quote-wide { margin-top: 14px; }
.quote-consent {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 18px;
  font-weight: 400 !important;
  line-height: 1.5;
}
.quote-consent input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.quote .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) { .quote { padding: 20px 16px; } }