/* ==========================================================================
   Pro Hauls — homepage-only components (/)

   Extends assets/prohauls-pages.css with the pieces the root page needs and
   the SEO landing pages do not: the fee banner strip, the old-way/new-way
   comparison, the two-audience split, the partner strip, and the compact
   root footer. Same tokens, same industrial dispatch-board aesthetic.
   ========================================================================== */

/* Fee banner — sits above the sticky masthead. */
.fee-bar {
  padding: 9px var(--gut);
  background: var(--accent);
  color: #111214;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

/* Step titles inside the shared numbered .flow list. */
.flow li b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text);
  margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   Old way vs. Pro Hauls way
   -------------------------------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  width: 100%;
}
.compare > div {
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  padding: 24px 24px 26px;
}
.compare .way-new { border-color: var(--accent-line); }
.compare h3 { margin-bottom: 18px; color: var(--text-4); }
.compare .way-new h3 { color: var(--accent); }
.compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.compare li { position: relative; padding-left: 30px; }
.compare li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.compare .way-old li::before { content: '\2715'; background: #241417; color: #f08a80; }
.compare .way-new li::before { content: '\2713'; background: var(--accent); color: #111214; }
.compare li b {
  display: block;
  color: var(--text-2);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
}
.compare li span { font-size: 13.5px; color: var(--text-4); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Two-audience split — drivers / contractors
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 16px;
  width: 100%;
}
.split article {
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: border-color .2s ease;
}
.split article:hover { border-color: var(--accent-line); }
.split article > p { font-size: 15px; color: var(--text-3); }
.split .ticks { font-size: 14.5px; }
.split .ghost-btn { margin-top: 4px; }

/* Infrastructure partners strip. */
.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.partners li {
  padding: 7px 15px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-4);
}

/* --------------------------------------------------------------------------
   Root footer — compact, centered, single column
   -------------------------------------------------------------------------- */

footer {
  align-items: center;
  text-align: center;
  gap: 14px;
  border-top: 1px solid var(--rule);
}
footer p { font-size: 14.5px; color: var(--text-4); }
footer p strong { color: var(--text); }
footer nav[aria-label="Footer"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 14px;
}
footer nav[aria-label="Footer"] a { color: var(--text-3); font-weight: 600; }
footer nav[aria-label="Footer"] a:hover { color: #fff; }
footer p:last-child { font-size: 13px; color: var(--text-5); font-variant-numeric: tabular-nums; }