/* Vendor Network. One stylesheet, no build step.
   The design system lives in the style guide; this file implements it.
   Order: tokens, base, chrome, layouts, components, responsive.
   Density comes from spacing and hairlines, never from small type -
   every form field stays 16px so iOS never zooms a form. */

:root {
  --ink: #1a1a1a;    /* chrome and headings; the logotype's own black */
  --nav: #2b2b2b;    /* public nav strip */
  --body: #333333;
  --meta: #767676;
  --rule: #e0e0e0;   /* module borders, section underlines */
  --hair: #ececec;   /* between list rows */
  --faint: #f0f0f0;  /* inside a module or facts grid */
  --wash: #f7f7f7;   /* notice panels */
  --accent: #1464F6;
  --accent-dark: #0e4fd0;
  --good: #1c7a3e;   /* semantic only: won */
  --bad: #b42318;    /* semantic only: errors */
  --col: 1000px;

  /* Vertical rhythm. Before this there were fifteen different gaps in
     use across the public pages - four of them meaning "tight", four
     meaning "medium" - which is what read as wonky margins. Five steps
     carry every page now. Anything off the scale needs a comment
     saying what it is compensating for. */
  --sp-1: 6px;    /* a label and its field; a heading and its own line */
  --sp-2: 12px;   /* inside a group: paragraphs, heading to content */
  --sp-3: 20px;   /* between groups: form groups, rail modules */
  --sp-4: 32px;   /* between sections, and before a primary action */
  --sp-5: 48px;   /* a zone break */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--body);
  font: 14px/1.4 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1 { font-size: 25px; font-weight: bold; color: var(--ink); margin: 0 0 var(--sp-1); line-height: 1.2; }
h2 { font-size: 18px; font-weight: bold; color: var(--ink); margin: var(--sp-4) 0 var(--sp-2); }
h3 { font-size: 16px; font-weight: bold; color: var(--ink); margin: var(--sp-3) 0 var(--sp-1); }
h4 { font-size: 14px; font-weight: bold; color: var(--ink); margin: var(--sp-2) 0 var(--sp-1); }
p { margin: 0 0 var(--sp-2); }
/* Browser defaults for lists are 1em margins and a 40px indent, which sits
   outside the rhythm every other block follows. */
ul, ol { margin: 0 0 var(--sp-2); padding-left: 22px; }
li { margin-bottom: var(--sp-1); }
li:last-child { margin-bottom: 0; }
li > ul, li > ol { margin: var(--sp-1) 0 0; }
small, .meta { font-size: 13px; color: var(--meta); }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-3) 0; }
/* Sections separate themselves. A heading brings its own air, but a section
   opening with a paragraph or a form would otherwise butt against the one
   above it. */
main section + section { margin-top: var(--sp-4); }
main section > :first-child { margin-top: 0; }
main > :last-child, section > :last-child { margin-bottom: 0; }

/* ---------- Chrome ---------- */

/* Every full-width band shares one inner column with <main>, so the logo,
   the nav text, the page content and the footer all start on the same
   line at every width. Without this the bands sit at the viewport edge
   while main is centred, and nothing lines up above 1000px. */
.band { max-width: var(--col); margin: 0 auto; padding: 0 20px; }

.ribbon { background: #0d0d0d; font-size: 13px; }
.ribbon .band { padding-top: 6px; padding-bottom: 6px; }
.ribbon a { color: #bdbdbd; margin-right: 16px; }
.ribbon a:hover { color: #fff; }

.site-header { background: var(--ink); }
.site-header .band {
  display: flex; align-items: center; gap: 18px;
  padding-top: 13px; padding-bottom: 13px;
}
.site-header-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.site-header-brand a { display: block; color: #fff; }
.site-header-brand svg { height: 19px; width: auto; display: block; }
.chrome-label {
  font-size: 12px; font-weight: bold; color: #fff;
  border: 1px solid #5c5c5c; padding: 4px 8px;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.site-header-account {
  margin-left: auto; display: flex; gap: 16px;
  font-size: 13px; white-space: nowrap;
}
.site-header-account a { color: #bdbdbd; }
.site-header-account a:hover { color: #fff; }

/* Header search: one pair, one height. They sit 6px apart rather than
   welded, which reads better on the dark chrome than a single block.
   The heights must match or the seam shows - the mobile 44px tap floor
   lifts the button, so the field is raised with it down below. The
   button label never wraps; a second line is what once pushed it
   taller than the field. */
.site-search { display: flex; flex-grow: 1; max-width: 500px; align-items: stretch; gap: var(--sp-1); }
.site-search input {
  flex-grow: 1; min-width: 0; height: 40px; font-size: 16px;
  padding: 0 10px; margin: 0; border: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.site-search button {
  height: 40px; flex-shrink: 0;
  background: var(--accent); color: #fff; border: 0; border-radius: 0;
  padding: 0 14px; font-size: 14px; font-weight: bold;
  white-space: nowrap; cursor: pointer; margin: 0;
}

/* The nav strip scrolls sideways; it never wraps. A wrapped item breaks
   the active underline away from its own label. The band runs a 7px
   gutter so that 7 plus the link's own 13px lands the TEXT on the same
   20px line as everything else - padding the container to 20px would
   push the first label 13px past it. */
.site-nav { background: var(--nav); }
.site-nav .band {
  padding-left: 7px; padding-right: 7px;
  overflow-x: auto; scrollbar-width: none;
}
.site-nav .band::-webkit-scrollbar { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block; color: #bdbdbd; font-size: 14px;
  padding: 9px 13px; white-space: nowrap;
}
.site-nav a:hover { color: #fff; text-decoration: none; }
.site-nav a.on { color: #fff; font-weight: bold; box-shadow: inset 0 -3px 0 var(--accent); }
.site-nav-vendor { background: var(--accent); }
.site-nav-vendor a { color: #d3e2fd; }
.site-nav-vendor a.on { color: #fff; box-shadow: inset 0 -3px 0 #fff; }

main { max-width: var(--col); margin: 0 auto; padding: 20px; }

/* One row of links on an even gap, then the legal line. Separator dots
   are redundant once the spacing is doing the separating. */
.site-footer { border-top: 1px solid var(--rule); margin-top: var(--sp-5); }
.site-footer .band { padding-top: 20px; padding-bottom: 28px; }
.site-footer ul {
  list-style: none; margin: 0 0 var(--sp-2); padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.site-footer li { margin: 0; }
.site-footer a { font-size: 14px; }
.site-footer-legal { margin: 0; font-size: 13px; color: var(--meta); }

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

/* A + B: main column with a right rail. */
.l-rail { display: flex; gap: 28px; align-items: flex-start; }
.l-main { flex-grow: 1; min-width: 0; }
.l-aside { width: 312px; flex-shrink: 0; }

/* C: one narrow column. */
.l-narrow { max-width: 620px; }

/* E: settings shell - sidebar, content, optional help rail. */
.l-shell { display: flex; gap: 24px; align-items: flex-start; }
.shell-sidebar { width: 196px; flex-shrink: 0; }
.shell-main { flex-grow: 1; min-width: 0; }
.shell-identity { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-2); }
.shell-identity strong { font-size: 16px; color: var(--ink); }
.shell-sidebar ul { list-style: none; margin: 0; padding: 0; line-height: 2.2; }

/* Home hero: dark, left-weighted, full-bleed inside the column. */
.l-hero {
  background: var(--ink); color: #fff;
  margin: -20px -20px var(--sp-3); padding: 34px 20px 30px;
}
.l-hero h1, .l-hero h2 { color: #fff; font-size: 29px; margin-bottom: var(--sp-1); }
.l-hero p { color: #b0b0b0; font-size: 16px; }
.l-hero a { color: #d6d6d6; }
.l-hero .form { display: flex; align-items: stretch; max-width: 560px; margin-bottom: var(--sp-2); }
.l-hero .form input {
  flex-grow: 1; min-width: 0; height: 46px; border: 0; border-radius: 0;
  font-size: 16px; padding: 0 12px; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.l-hero .form button {
  height: 46px; flex-shrink: 0; border-radius: 0;
  font-size: 16px; padding: 0 22px; margin: 0; white-space: nowrap;
}
.l-hero .quick-categories { font-size: 13px; color: #8c8c8c; margin: 0; }

/* ---------- Components ---------- */

button, .btn, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px;
  font: bold 14px/1 Arial, Helvetica, sans-serif;
  color: #fff; background: var(--accent);
  padding: 9px 15px; border: 0; border-radius: 3px; cursor: pointer;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background: var(--accent-dark); text-decoration: none; color: #fff;
}
.btn-lg { font-size: 16px; min-height: 44px; padding: 11px 22px; }
.btn-sm { font-size: 13px; min-height: 30px; padding: 6px 11px; }
.btn-gray, button.btn-gray {
  color: #444; background: #f0f0f0; border: 1px solid #ccc;
}
.btn-gray:hover, button.btn-gray:hover { background: #e6e6e6; color: #444; }

/* Forms: real label above, 16px field, help below. */
.form-group, .form-field { margin-bottom: var(--sp-3); }
.form-group > label, .form-field > label {
  display: block; font-size: 14px; font-weight: bold;
  color: var(--ink); margin-bottom: var(--sp-1);
}
.form-group label em, .form-field label em,
.form-group > label .opt { font-weight: normal; font-style: normal; color: var(--meta); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"],
input[type="date"], select, textarea {
  width: 100%; max-width: 520px;
  font: 16px Arial, Helvetica, sans-serif;
  padding: 9px; border: 1px solid #ccc; border-radius: 2px;
  background: #fff; color: var(--body);
}
textarea { min-height: 90px; }
/* iOS centers the value inside a date input and shrinks it; both of those
   make it read as a label rather than something you can tap and change. */
input[type="date"] {
  text-align: left; -webkit-appearance: none; appearance: none;
  min-height: 40px; max-width: 260px;
}
input[type="file"] { max-width: none; padding: 8px 0; border: 0; font-size: 15px; }

/* An option - one checkbox or radio and its text - is a single row, and
   the whole row is the tap target. The row runs 33px (6 + 21 + 6): the
   control keeps its size and the air around it halves, which is a
   deliberate trade of the 44px touch floor for a list you can read
   without scrolling past it. Flex rather than inline so a label that
   wraps lines up with its own text instead of tucking under the control.
   These lists were written `<label>...</label><br>` back when labels were
   inline; the break is hidden here rather than edited out of nineteen
   places. Where :has() is missing the fallback is the old inline layout,
   which is roomier, not broken. */
.form-group label:has(> input[type="checkbox"]),
.form-group label:has(> input[type="radio"]),
.form-field label:has(> input[type="checkbox"]),
.form-field label:has(> input[type="radio"]),
.choice-list > label,
.service-group > label {
  display: flex; align-items: flex-start; gap: 11px;
  padding: var(--sp-1) 0;
  font-size: 15px; font-weight: normal; line-height: 1.35;
  color: var(--body); cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
  width: 21px; height: 21px; margin: 1px 0 0; flex-shrink: 0;
  accent-color: var(--accent); cursor: pointer;
}
/* The break after an option is spacing the padding now provides. */
.choice-list br, .service-group br,
label:has(> input[type="checkbox"]) + br,
label:has(> input[type="radio"]) + br { display: none; }

/* A paragraph opening a group is that group's label, so it looks like one. */
.form-group > p:first-child,
.service-group > p:first-child,
.choice-list > p:first-child {
  font-size: 14px; font-weight: bold; color: var(--ink); margin: 0 0 var(--sp-1);
}

/* Groups of options need the same bottom margin a form group has, or the
   last option runs straight into the next question. Off the scale on
   purpose: the last option already carries 6px of its own padding, so
   14 more lands the group on the 20px step. */
.service-group, #service-groups > .service-group { margin-bottom: 14px; }
#service-groups { margin-bottom: 0; }
.service-group[hidden] { display: none; }

/* An action never sits flush against the field above it, and its
   explanation never sits flush against the action. */
.form-group + button, .form-group + .btn,
.form-field + button, .form-field + .btn,
#service-groups + button,
input + button, select + button, textarea + button { margin-top: var(--sp-2); }
button + p, .btn + p, button + small, form + p { margin-top: var(--sp-2); }
form + form { margin-top: var(--sp-4); }
.form-group label label, .form-field label label { font-weight: normal; }
.form-help, .form-group p.form-help { font-size: 13px; color: var(--meta); margin: var(--sp-1) 0 0; }

/* Multi-step forms. Fieldsets carry no browser chrome: the step
   breadcrumb and the legend do the work of telling you where you are. */
.multistep fieldset { border: 0; margin: 0; padding: 0; }
.multistep legend {
  display: block; width: 100%; padding: 0;
  font-size: 16px; font-weight: bold; color: var(--ink);
  margin-bottom: var(--sp-3);
}
.step-nav {
  list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 var(--sp-2);
  border-bottom: 1px solid #d8d8d8; font-size: 14px; color: var(--meta);
}
.step-nav li { display: inline; }
.step-nav a { cursor: default; color: var(--meta); }
.step-nav li.done a { color: var(--accent); cursor: pointer; }
.step-nav li.done a:hover { text-decoration: underline; }
.step-nav li.on a { color: var(--ink); font-weight: bold; }

/* Actions row: the primary, then a plain link for the way back. */
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: var(--sp-2); }
.multistep .previous, .form-actions .previous {
  background: none; border: 0; color: var(--accent);
  font-weight: normal; padding: 0; font-size: 14px; cursor: pointer;
}
.multistep .previous:hover, .form-actions .previous:hover {
  background: none; color: var(--accent-dark); text-decoration: underline;
}
.multistep fieldset > button { margin-top: var(--sp-2); }
.multistep fieldset > button.previous { margin-right: 16px; }

/* Options inside a dense surface stay compact: a filter checkbox in the
   rail is not the thing the page is asking you to answer. */
.rail-module label:has(> input[type="checkbox"]),
.rail-module label:has(> input[type="radio"]),
td label:has(> input[type="checkbox"]),
td label:has(> input[type="radio"]) {
  min-height: 0; padding: 4px 0; gap: 8px; font-size: 14px;
}

/* Notices. Errors are the one place --bad appears. */
.error, p.error {
  border-left: 3px solid var(--bad); background: #fdf3f2;
  padding: 11px 13px; margin: 0 0 var(--sp-3); color: var(--ink);
}
.flash-messages { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.flash-messages li {
  background: var(--wash); padding: 11px 13px; margin-bottom: var(--sp-1); font-size: 14px;
}
.notice { background: var(--wash); padding: var(--sp-2); font-size: 14px; margin: 0 0 var(--sp-3); }
.notice strong { display: block; margin-bottom: var(--sp-1); color: var(--ink); }

/* Rail module: the only bordered surface on a page. */
.rail-module { border: 1px solid var(--rule); margin-bottom: var(--sp-3); }
.rail-module:last-child { margin-bottom: 0; }
.rail-module > h3 {
  font-size: 14px; font-weight: bold; margin: 0;
  padding: 9px 11px; border-bottom: 1px solid var(--rule); color: var(--body);
}
.rail-module > *:not(h3) { padding-left: 11px; padding-right: 11px; }
.rail-module > p:first-of-type { padding-top: 11px; }
.rail-module > :last-child { padding-bottom: 11px; }
.rail-module ol, .rail-module ul { margin: 0 0 11px; padding-left: 20px; }  /* 11 = the module's own padding */

/* List rows. min-width:0 on the text column is required, or long names
   push it wider than its share and squeeze the text. */
.row-list { border-top: 1px solid var(--hair); }
.list-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.list-row .rank { font-size: 18px; font-weight: bold; color: #999; width: 20px; flex-shrink: 0; }
.list-row .thumb { width: 70px; height: 70px; background: #e4e4e4; flex-shrink: 0; object-fit: cover; }
.list-row .col { flex-grow: 1; min-width: 0; }
.list-row .head {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; margin-bottom: var(--sp-1);
}
.list-row .name { font-size: 16px; font-weight: bold; }

/* Two-column facts grid: label left in meta, value right in bold. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.facts > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--faint); font-size: 14px;
}
.facts .k { color: var(--meta); }
.facts .v { font-weight: bold; color: var(--ink); text-align: right; }

/* Ratings: solid blocks, never outline icons. */
.stars { display: inline-flex; gap: 2px; vertical-align: -2px; }
.stars i { width: 14px; height: 14px; display: block; background: var(--accent); }
.stars i.off { background: #d8d8d8; }

.tag {
  display: inline-block; font-size: 12px; font-weight: bold;
  color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px;
}
.tag-quiet { color: var(--meta); border-color: #ccc; }
.state-won { font-size: 12px; font-weight: bold; color: var(--good); }
.state-lost { font-size: 12px; font-weight: bold; color: var(--meta); }

/* Dense tables for admin queues and history. */
table { border-collapse: collapse; width: 100%; margin-bottom: var(--sp-3); font-size: 14px; }
th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--meta); border-bottom: 1px solid var(--rule); padding: 0 10px 7px 0;
  white-space: nowrap;
}
td { border-bottom: 1px solid var(--hair); padding: 9px 10px 9px 0; vertical-align: top; }
td:last-child, th:last-child { padding-right: 0; }
.table-wrap { overflow-x: auto; }
.num { font-variant-numeric: tabular-nums; }

/* Section head with an action on the right (a category group, a queue). */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--sp-1); border-bottom: 1px solid #d8d8d8; margin-bottom: var(--sp-2);
}
.section-head .title { font-size: 16px; font-weight: bold; color: var(--ink); }

/* Stage groups in the opportunity pipeline. */
.group-head {
  font-size: 13px; font-weight: bold; color: var(--meta);
  text-transform: uppercase; letter-spacing: .05em;
  padding-bottom: var(--sp-1); border-bottom: 1px solid #d8d8d8; margin-top: var(--sp-4);
}

/* Vendor profile header: logo, identity, contact. */
.profile-head { display: flex; gap: 16px; margin-bottom: var(--sp-3); }
.profile-logo { width: 94px; height: 94px; object-fit: contain; flex-shrink: 0; }
.profile-id { flex-grow: 1; min-width: 0; }
.profile-id p { margin: 0 0 var(--sp-1); }

/* A review: hairline separated, with the vendor's reply set apart. */
.review { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.review:last-of-type { border-bottom: 0; }
.review p { margin: 0 0 var(--sp-1); }
.review-reply {
  background: var(--wash); padding: 10px 12px; margin: var(--sp-1) 0 0; font-size: 14px;
}
.review-reply strong { display: block; color: var(--ink); }

/* The bid form is the one prominent module on a profile. */
.rail-module-lead { border-color: var(--accent); }
.rail-module-lead > h3 { border-bottom-color: var(--accent); }

/* Showcase photos and category tiles. */
.photo-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.photo-grid img { width: 150px; height: 108px; object-fit: cover; display: block; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.tile { display: block; color: var(--body); }
.tile:hover { text-decoration: none; }
.tile:hover span { text-decoration: underline; color: var(--accent); }
.tile img { width: 100%; height: 104px; object-fit: cover; display: block; margin-bottom: var(--sp-1); }
.tile span { font-weight: bold; font-size: 14px; }

/* Link columns: the dense, scannable lists a directory lives on. */
.link-columns { column-count: 3; column-gap: 24px; line-height: 1.9; margin-bottom: var(--sp-2); }
.link-list { list-style: none; margin: 0 0 var(--sp-1); padding: 0; line-height: 1.9; }

/* Opportunity rows: the stage is the group heading above them, so the row
   itself only carries the work and the controls that move it. */
.opp-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--hair);
}
.opp-row .col { flex-grow: 1; min-width: 0; }
.opp-row .name { font-weight: bold; color: var(--ink); }
.opp-row p { margin: var(--sp-1) 0 0; }
.opp-form { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.opp-form select, .opp-form input[type="text"] {
  width: auto; max-width: 150px; font-size: 15px; padding: 6px;
}
.opp-form form { display: inline; }

details { margin-bottom: var(--sp-2); }
summary { cursor: pointer; color: var(--accent); font-size: 14px; }
summary:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }
.hidden { display: none; }

/* Autocomplete dropdown (functional, predates the styling pass). */
.autocomplete {
  background: #fff; z-index: 1000; overflow: auto;
  border: 1px solid #ccc; box-shadow: 0 4px 12px rgba(0,0,0,.12);
  max-height: 300px !important;
}
.autocomplete * { font: inherit; }
.autocomplete > div { padding: 8px 10px; }
.autocomplete .group {
  background: var(--wash); font-weight: bold; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; color: #555;
}
.autocomplete > div:hover:not(.group), .autocomplete > div.selected {
  background: #e8f0fe; cursor: pointer;
}

/* ---------- Responsive ----------
   One breakpoint. Everything collapses to a single column in source
   order, which is why main content comes before the rail in the markup. */
@media (max-width: 760px) {
  .l-rail, .l-shell { display: block; }
  /* Stacked under main, the rail stops being a rail: it is reference
     material sitting after the page's primary action. At 24px it was
     CLOSER to the submit button than the form's own last field (32px),
     so it read as one more step. It gets a zone break instead. */
  .l-aside {
    width: auto; margin-top: var(--sp-4);
    border-top: 1px solid var(--rule); padding-top: 26px;
  }
  /* The section nav sits ABOVE the content it navigates on a phone,
     so the break it needs is below it, not above. It was landing
     flush against main. */
  .shell-sidebar { width: auto; margin-top: var(--sp-3); margin-bottom: var(--sp-4); }
  .facts { grid-template-columns: 1fr; }
  .facts .v { text-align: right; }
  .list-row .thumb { width: 52px; height: 52px; }
  .list-row .head { display: block; }
  .list-row .head .btn, .list-row .head button { margin-top: var(--sp-2); }
  .site-header .band { flex-wrap: wrap; gap: 10px; }
  .site-search { order: 3; max-width: none; flex-basis: 100%; }
  /* The touch floor below raises the button to 44px; the field has to
     come with it or the two halves of one control stop matching. */
  .site-search input, .site-search button { height: 44px; }
  .site-header-account { margin-left: auto; }
  .site-footer ul { gap: 10px 18px; }
  .l-hero h1, .l-hero h2 { font-size: 23px; }
  .l-hero .form { display: block; }
  .l-hero .form input { width: 100%; height: 46px; margin-bottom: var(--sp-1); }
  /* Narrow enough that "Find vendors" costs more than it earns. */
  .site-search button { padding: 0 12px; }
  .link-columns { column-count: 1; }
  .profile-head { display: block; }
  .profile-logo { margin-bottom: var(--sp-2); }
  .photo-grid img { width: 46%; height: auto; }
  /* The controls drop under the work rather than squeezing it. */
  .opp-row { display: block; }
  .opp-form { margin-top: var(--sp-2); }
  .opp-form select, .opp-form input[type="text"] { max-width: none; flex-grow: 1; }
  button, .btn, input[type="submit"] { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .multistep fieldset > button[type="submit"],
  .multistep fieldset > button.next,
  main form > button[type="submit"] { width: 100%; }
  .site-search button { width: auto; }
  .multistep fieldset > button.previous { width: auto; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="search"],
  input[type="date"], select, textarea { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}