@import url('/quotefleet-color-system.css');

/* Phase BR: WeFixTrades-style vertical/product pages. */
.qf-vertical-wft .hero {
  text-align: left;
  padding: 76px 28px 58px;
  background: #181D1F;
}
.qf-vertical-wft .hero .container-narrow {
  max-width: 980px;
}
.qf-vertical-wft .hero h1 {
  max-width: 900px;
  font-size: clamp(42px, 7.2vw, 76px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.06em;
  color: #FFFFFF;
}
.qf-vertical-wft .hero h1 .accent {
  color: #FFFFFF;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.qf-vertical-wft .hero p.lead {
  max-width: 740px;
  margin-left: 0;
  color: #B1C5CE;
}
.qf-vertical-wft .hero-cta {
  justify-content: flex-start;
}
.qf-vertical-wft .section {
  padding: 42px 28px;
  background: #181D1F;
}
.qf-vertical-wft .section-head {
  text-align: left;
  max-width: 960px;
}
.qf-vertical-wft .section-head h2,
.qf-vertical-wft .section h2 {
  color: #FFFFFF;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 900;
  letter-spacing: -.045em;
}
.qf-vertical-wft .features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
}
.qf-vertical-wft .feature-card {
  min-height: 178px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #22282A;
  box-shadow: 0 28px 70px -55px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
  padding: var(--space-2);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.qf-vertical-wft .feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.24);
  background: #22282A;
}
.qf-vertical-wft .feature-card h3 {
  color: #FFFFFF;
  font-size: 17px;
  letter-spacing: -.02em;
}
.qf-vertical-wft .feature-card p {
  color: #B1C5CE;
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 8px;
}
.qf-vertical-wft code {
  color: #181D1F;
  background: #E4EDF1;
  border: 1px solid rgba(13,60,252,.22);
  border-radius: 4px;
  padding: 0 var(--space-0-5);
}
.qf-vertical-wft .section[style*="text-align: center"] .container-narrow {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #22282A;
  padding: var(--space-4) var(--space-3);
  box-shadow: 0 28px 70px -55px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}
@media (max-width: 900px) {
  .qf-vertical-wft .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .qf-vertical-wft .hero { padding-top: var(--space-6); }
  .qf-vertical-wft .features { grid-template-columns: 1fr; }
  .qf-vertical-wft .hero h1 { font-size: 41px; }
}