/* ============================================================
   Uber Concrete — static site styles
   Design tokens mirror the original React/Tailwind build.
   ============================================================ */
:root {
  --ink: #0e1113;
  --ink-2: #1a1f22;
  --green: #2fa84f;
  --green-600: #26903f;
  --steel: #6b7280;
  --line: #e3e3df;
  --paper: #f6f6f3;
  --text: #14181b;
  --white: #ffffff;
  --font-display: "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --wrap: 1200px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -0.02em; font-weight: 800; }
svg { display: inline-block; vertical-align: middle; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.75rem;
}
.text-green { color: var(--green); }
.reveal { opacity: 0; transform: translateY(24px); animation: reveal 0.7s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 10px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s; text-align: center;
  font-family: var(--font-body); line-height: 1.2;
}
.btn svg { width: 1.25rem; height: 1.25rem; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn-md { padding: 0.875rem 1.5rem; font-size: 0.875rem; }
.btn-sm { padding: 0.625rem 1rem; font-size: 0.875rem; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-600); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: rgba(255,255,255,.9); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-2); }
.btn-outline-light { border-color: rgba(255,255,255,.25); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); }
.btn-outline-light-2 { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-light-2:hover { background: rgba(255,255,255,.1); }
.btn-outline-dark { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline-dark:hover { background: #fff; }

/* Nav -------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); transition: background .2s, border-color .2s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(14,17,19,.95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; padding-bottom: .75rem; }
.brand { display: flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.brand img { height: 44px; width: 44px; border-radius: 9999px; }
.brand-text { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; line-height: 1; color: #fff; }
.brand-text span { color: var(--green); }
.nav-links { display: none; align-items: center; gap: 1.25rem; }
.nav-links a { font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.8); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.nav-actions { display: none; align-items: center; gap: .75rem; }
.nav-call { display: flex; align-items: center; gap: .375rem; white-space: nowrap; font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.8); }
.nav-call:hover { color: #fff; }
.nav-call svg { width: 1rem; height: 1rem; }
.nav-toggle { background: none; border: none; color: #fff; cursor: pointer; display: inline-flex; }
.nav-toggle svg { width: 1.75rem; height: 1.75rem; }
.mobile-menu { display: none; border-top: 1px solid rgba(255,255,255,.1); background: var(--ink); }
.mobile-menu.open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; padding: .75rem 20px; max-width: var(--wrap); margin: 0 auto; }
.mobile-menu a { border-bottom: 1px solid rgba(255,255,255,.06); padding: .75rem 0; font-size: 1rem; font-weight: 500; color: rgba(255,255,255,.85); }
@media (min-width: 1280px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile bottom bar ----------------------------------------- */
.mobile-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.1); background: var(--ink); }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .875rem; font-size: .875rem; font-weight: 700; color: #fff; }
.mobile-bar a svg { width: 1rem; height: 1rem; }
.mobile-bar a.primary { background: var(--green); }
@media (min-width: 1280px) { .mobile-bar { display: none; } }

/* Sections & typography ------------------------------------- */
.section { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .section { padding-top: 7rem; padding-bottom: 7rem; } }
.section-sm { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .section-sm { padding-top: 5rem; padding-bottom: 5rem; } }
.bg-ink { background: var(--ink); color: #fff; }
.bg-white { background: #fff; }
.bg-paper { background: var(--paper); }
.bg-green { background: var(--green); }

.h1 { font-size: 2.25rem; font-weight: 900; line-height: 1.03; }
.h2 { font-size: 1.875rem; font-weight: 800; }
.h3 { font-size: 1.25rem; font-weight: 700; }
.lead { font-size: 1.125rem; line-height: 1.65; }
.muted { color: var(--steel); }
.max-2xl { max-width: 42rem; }
.max-xl { max-width: 36rem; }
.max-3xl { max-width: 48rem; }
.mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }
@media (min-width: 640px) { .h1 { font-size: 3rem; } }
@media (min-width: 768px) {
  .h1 { font-size: 3.75rem; }
  .h2 { font-size: 2.25rem; }
}

/* Page hero -------------------------------------------------- */
.page-hero { background: var(--ink); color: #fff; padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .page-hero { padding-top: 5rem; padding-bottom: 5rem; } }
.page-hero h1 { max-width: 48rem; margin-top: .75rem; font-size: 1.875rem; font-weight: 900; line-height: 1.15; }
.page-hero p { margin-top: 1.25rem; max-width: 42rem; line-height: 1.65; color: rgba(255,255,255,.7); }
@media (min-width: 768px) { .page-hero h1 { font-size: 3rem; } }

/* Home hero -------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--ink); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { height: 100%; width: 100%; object-fit: cover; opacity: .4; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, var(--ink), rgba(14,17,19,.85) 55%, rgba(14,17,19,.4)); }
.hero-inner { position: relative; padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .hero-inner { padding-top: 8rem; padding-bottom: 8rem; } }
.hero h1 { margin-top: 1rem; color: #fff; }
.hero .lead { margin-top: 1.5rem; color: rgba(255,255,255,.75); }
.hero-note { margin-top: 1.5rem; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.6); }

/* Grids ------------------------------------------------------ */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } }

/* Cards ------------------------------------------------------ */
.card { border-radius: 1rem; border: 1px solid var(--line); background: #fff; padding: 1.75rem; }
.card-hover { transition: box-shadow .2s; }
.card-hover:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.card .icon, .icon-green { color: var(--green); }
.icon-7 { width: 1.75rem; height: 1.75rem; }
.icon-8 { width: 2rem; height: 2rem; }
.icon-6 { width: 1.5rem; height: 1.5rem; }
.card h3, .card h2 { color: var(--ink); }
.card p { margin-top: .625rem; font-size: 15px; line-height: 1.6; color: var(--steel); }
.card-title { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.card-title-sm { margin-top: 1rem; font-size: 1.125rem; font-weight: 700; color: var(--ink); }

/* Numbered step card */
.step-num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 900; color: rgba(47,168,79,.25); }
.step-head { display: flex; align-items: center; justify-content: space-between; }

/* Process (how it works) row */
.step-row { display: flex; flex-direction: column; gap: 1.25rem; border-radius: 1rem; border: 1px solid var(--line); background: #fff; padding: 1.75rem; }
@media (min-width: 768px) { .step-row { flex-direction: row; align-items: center; padding: 2rem; } }
.step-row .big-num { font-family: var(--font-display); font-size: 3rem; font-weight: 900; color: rgba(47,168,79,.25); }
.step-row .step-title-row { display: flex; align-items: center; gap: .75rem; }

/* Lists ------------------------------------------------------ */
.benefits { display: grid; gap: .75rem 1.5rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2,1fr); } }
.benefits li { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: rgba(255,255,255,.85); list-style: none; }
.benefits li .dot { margin-top: .375rem; height: 6px; width: 6px; flex-shrink: 0; border-radius: 9999px; background: var(--green); }

/* Communities chips */
.chip { display: flex; align-items: center; gap: .5rem; border-radius: .75rem; border: 1px solid var(--line); background: var(--paper); padding: .75rem 1rem; font-size: .875rem; font-weight: 600; color: var(--ink); }
.chip svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--green); }
.chip-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
@media (min-width: 640px) { .chip-grid { grid-template-columns: repeat(3,1fr); } }
.chip-grid-5 { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
@media (min-width: 640px) { .chip-grid-5 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .chip-grid-5 { grid-template-columns: repeat(5,1fr); } }

/* Two-column feature */
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } .split-areas { grid-template-columns: 1fr 1.1fr; } }
.rounded-img { overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); }
.rounded-img img { height: 100%; width: 100%; object-fit: cover; }
.link-green { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: var(--green); }
.link-green:hover { color: #fff; }
.link-green svg { width: 1rem; height: 1rem; }
.link-ink { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 700; color: var(--ink); }
.link-ink:hover { color: var(--green); }
.link-ink svg { width: 1rem; height: 1rem; }

.callout { margin-top: 1rem; border-radius: .75rem; border: 1px solid var(--line); background: var(--paper); padding: 1rem; font-size: .875rem; font-weight: 500; color: var(--ink); }

/* CTA band --------------------------------------------------- */
.cta-band { background: var(--green); }
.cta-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .cta-inner { flex-direction: row; align-items: center; } }
.cta-band h2 { color: #fff; font-size: 1.5rem; font-weight: 800; }
@media (min-width: 768px) { .cta-band h2 { font-size: 1.875rem; } }
.cta-band p { margin-top: .5rem; color: rgba(255,255,255,.85); }
.btn-row { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .btn-row { flex-direction: row; } }

/* Section head with link */
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }

/* Footer ----------------------------------------------------- */
.site-footer { background: var(--ink); color: #fff; padding-top: 4rem; padding-bottom: 6rem; }
@media (min-width: 1024px) { .site-footer { padding-bottom: 4rem; } }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4,1fr); } }
.footer-about { }
@media (min-width: 768px) { .footer-about { grid-column: span 2; padding-right: 2rem; } }
.footer-brand { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.footer-brand img { height: 44px; width: 44px; border-radius: 9999px; }
.footer-about p { max-width: 24rem; font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.65); }
.footer-contact { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.8); }
.footer-contact a, .footer-contact p { display: flex; align-items: flex-start; gap: .5rem; }
.footer-contact a:hover { color: var(--green); }
.footer-contact svg { width: 1rem; height: 1rem; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.footer-col h4 { margin-bottom: 1rem; color: var(--green); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.footer-col a { font-size: .875rem; color: rgba(255,255,255,.7); }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: 3rem; display: flex; flex-direction: column; gap: .75rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; font-size: .75rem; color: rgba(255,255,255,.45); }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-legal a:hover { color: rgba(255,255,255,.8); }
.footer-fine { margin-top: 1rem; max-width: 48rem; font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.35); }

/* Landing page ---------------------------------------------- */
.landing-hero { background: var(--ink); color: #fff; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .landing-hero { padding-top: 4rem; padding-bottom: 4rem; } }
.landing-hero h1 { margin-top: .75rem; max-width: 48rem; font-size: 1.875rem; font-weight: 900; line-height: 1.15; }
@media (min-width: 768px) { .landing-hero h1 { font-size: 3rem; } }
.landing-hero p { margin-top: 1.25rem; max-width: 42rem; line-height: 1.65; color: rgba(255,255,255,.7); }
.landing-body { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .landing-body { grid-template-columns: 1.4fr 1fr; } }
.landing-body .prose p { line-height: 1.7; color: var(--steel); }
.landing-body .prose p + p { margin-top: 1rem; }
.hl-grid { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .hl-grid { grid-template-columns: repeat(3,1fr); } }
.hl-card { border-radius: 1rem; border: 1px solid var(--line); background: #fff; padding: 1.25rem; }
.hl-card svg { width: 1.5rem; height: 1.5rem; color: var(--green); }
.hl-card h3 { margin-top: .75rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.hl-card p { margin-top: .375rem; font-size: .875rem; line-height: 1.6; color: var(--steel); }
.aside-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.aside-ink { border-radius: 1rem; background: var(--ink); color: #fff; padding: 1.5rem; }
.aside-ink h3 { font-size: 1.125rem; font-weight: 700; }
.aside-ink p { margin-top: .5rem; font-size: .875rem; color: rgba(255,255,255,.7); }
.aside-note { border-radius: 1rem; border: 1px solid var(--line); background: var(--paper); padding: 1.5rem; }
.aside-note h3 { font-size: 1rem; font-weight: 700; color: var(--ink); }
.aside-note p { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: var(--steel); }
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }
.faq-item + .faq-item { margin-top: 1.5rem; }
.faq-item h3 { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.faq-item p { margin-top: .5rem; line-height: 1.65; color: var(--steel); }
.related-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .related-grid { grid-template-columns: repeat(4,1fr); } }
.related-card { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: 1rem; border: 1px solid var(--line); background: #fff; padding: 1.25rem; }
.related-card:hover { border-color: var(--green); }
.related-card span { font-size: .875rem; font-weight: 700; color: var(--ink); }
.related-card svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--steel); }
.related-card:hover svg { color: var(--green); }

/* Service-area cards */
.area-grid { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .area-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .area-grid { grid-template-columns: repeat(3,1fr); } }
.area-card { display: flex; flex-direction: column; border-radius: 1rem; border: 1px solid var(--line); background: #fff; padding: 1.5rem; transition: border-color .2s, box-shadow .2s; }
.area-card:hover { border-color: var(--green); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.area-card .top { display: flex; align-items: center; justify-content: space-between; }
.area-card .name { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 800; color: var(--ink); }
.area-card .name svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--green); }
.area-card .top .arrow { width: 1.25rem; height: 1.25rem; color: var(--steel); }
.area-card:hover .top .arrow { color: var(--green); }
.area-card .desc { margin-top: .75rem; flex: 1; font-size: .875rem; line-height: 1.6; color: var(--steel); }
.area-card .go { margin-top: 1rem; font-size: .875rem; font-weight: 700; color: var(--green); }

/* Contact cards */
.contact-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3,1fr); } }
.contact-box-ink { margin-top: 2.5rem; border-radius: 1rem; background: var(--ink); color: #fff; padding: 2rem; }
.contact-box-ink h2 { font-size: 1.5rem; font-weight: 800; }
.contact-box-ink p { margin-top: .5rem; max-width: 36rem; color: rgba(255,255,255,.7); }

/* Bid form --------------------------------------------------- */
.bid-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .bid-layout { grid-template-columns: 1.6fr 1fr; } }
.bid-form { border-radius: 1rem; border: 1px solid var(--line); background: #fff; padding: 1.5rem; }
@media (min-width: 768px) { .bid-form { padding: 2rem; } }
.bid-form > h2 { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.bid-form > h2:not(:first-child) { margin-top: 2rem; }
.bid-form .fields { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .bid-form .fields { grid-template-columns: repeat(2,1fr); } }
.bid-form .col-span-2 { grid-column: 1 / -1; }
.bid-form label { margin-bottom: .375rem; display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.bid-form input, .bid-form select, .bid-form textarea {
  width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #fff;
  padding: .75rem 1rem; font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .2s; font-family: var(--font-body);
}
.bid-form input:focus, .bid-form select:focus, .bid-form textarea:focus { border-color: var(--green); }
.bid-form .req { color: var(--green); }
.bid-form .file-field { margin-top: 1rem; }
.bid-form .file-field label.dz {
  display: flex; align-items: center; gap: .75rem; cursor: pointer; border-radius: 10px;
  border: 1px dashed var(--line); background: var(--paper); padding: 1rem; font-size: .875rem;
  color: var(--steel); transition: border-color .2s; font-weight: 400; margin: 0;
}
.bid-form .file-field label.dz:hover { border-color: var(--green); }
.bid-form .file-field label.dz svg { width: 1.25rem; height: 1.25rem; color: var(--green); }
.bid-form .radio-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.bid-form .radio-row label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 400; color: var(--ink); margin: 0; }
.bid-form input[type="radio"], .bid-form input[type="checkbox"] { width: auto; accent-color: var(--green); }
.bid-form .block { margin-top: 2rem; }
.bid-form .consent { margin-top: 1.5rem; display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; font-weight: 400; color: var(--steel); }
.bid-form .consent input { margin-top: 2px; width: 1rem; height: 1rem; flex-shrink: 0; }
.bid-form .btn-submit {
  margin-top: 1.5rem; width: 100%; border: none; border-radius: 10px; background: var(--green);
  color: #fff; padding: 1rem 1.75rem; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background-color .2s; font-family: var(--font-body);
}
.bid-form .btn-submit:hover { background: var(--green-600); }
@media (min-width: 640px) { .bid-form .btn-submit { width: auto; } }

/* Bid sidebar */
.bid-side { display: flex; flex-direction: column; gap: 1.5rem; }
.bid-side .steps { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; list-style: none; }
.bid-side .steps li { display: flex; gap: .75rem; font-size: .875rem; color: var(--steel); }
.bid-side .steps .n { display: flex; height: 1.5rem; width: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: var(--green); font-size: .75rem; font-weight: 700; color: #fff; }

/* Thank you / 404 ------------------------------------------- */
.centered { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .centered { padding-top: 8rem; padding-bottom: 8rem; } }
.centered.narrow { max-width: 680px; padding-top: 7rem; padding-bottom: 7rem; }
.badge-circle { display: flex; height: 4rem; width: 4rem; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(47,168,79,.1); }
.badge-circle svg { width: 2.25rem; height: 2.25rem; color: var(--green); }
.centered h1 { margin-top: 1.5rem; font-size: 1.875rem; font-weight: 900; color: var(--ink); }
@media (min-width: 768px) { .centered h1 { font-size: 2.25rem; } }
.centered p { margin-top: 1rem; max-width: 36rem; line-height: 1.65; color: var(--steel); }
.centered .fine { margin-top: 1rem; font-size: .875rem; }
.big-404 { font-family: var(--font-display); font-size: 4.5rem; font-weight: 900; color: var(--green); }

/* Legal pages */
.legal-body { max-width: 820px; margin: 0 auto; }
.legal-section + .legal-section { margin-top: 2rem; }
.legal-section h2 { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.legal-section p { margin-top: .75rem; line-height: 1.65; color: var(--steel); }

/* Utilities */
.stack-lg > * + * { margin-top: 1.5rem; }
.text-center { text-align: center; }