/* British Columbia Auto Loans — inspired by bcautoloanapproved, CD colors */

.bc-hero {
  background: linear-gradient(180deg, var(--blue-50) 0%, #fff 70%);
  padding: 48px 0 40px;
}
.bc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .bc-hero__grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
  }
}
.bc-hero__eyebrow {
  margin: 0 0 10px;
  color: var(--blue-400);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bc-hero__copy h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.12;
  color: var(--gray-500);
}
.bc-hero__copy > p {
  margin: 0 0 24px;
  max-width: 560px;
  color: var(--gray-400);
  font-size: 17px;
  line-height: 1.55;
}
.bc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bc-hero__panel {
  background: linear-gradient(145deg, var(--blue-400), var(--blue-500));
  color: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 12px 32px rgba(7, 154, 223, 0.25);
}
.bc-hero__panel h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 24px;
}
.bc-hero__panel > p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}
.bc-hero__bullets {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.bc-hero__bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: #fff;
  font-size: 15px;
}
.bc-hero__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  font-weight: 800;
}
.bc-hero__panel .btn-hero-light {
  color: var(--blue-500);
}

.bc-features {
  padding: 28px 0 48px;
  background: #fff;
}
.bc-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 600px) {
  .bc-features__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .bc-features__grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}
.bc-feature {
  background: var(--gray-100);
  border: 1px solid #e8eaed;
  border-radius: 999px;
  padding: 12px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
  line-height: 1.3;
}

.bc-guarantee {
  background: var(--gray-100);
  padding: 56px 0;
  text-align: center;
}
.bc-guarantee__inner {
  max-width: 760px;
}
.bc-guarantee h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 40px);
}
.bc-guarantee p {
  margin: 0 0 24px;
  color: var(--gray-400);
  font-size: 17px;
  line-height: 1.55;
}

.bc-helped {
  padding: 56px 0;
  background: #fff;
}
.bc-helped h2 {
  text-align: center;
  margin: 0 0 28px;
  font-size: clamp(26px, 3.5vw, 36px);
  max-width: 720px;
  margin-inline: auto 28px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
}
.bc-helped__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 600px) {
  .bc-helped__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.bc-helped__card {
  display: grid;
  gap: 4px;
  padding: 20px 16px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.bc-helped__card:hover {
  border-color: var(--blue-300);
  box-shadow: 0 8px 20px rgba(7, 163, 238, 0.12);
  transform: translateY(-1px);
}
.bc-helped__card strong {
  color: var(--gray-500);
  font-size: 16px;
}
.bc-helped__card span {
  color: var(--blue-400);
  font-size: 13px;
  font-weight: 600;
}

.bc-about {
  background: var(--blue-50);
  padding: 56px 0;
}
.bc-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .bc-about__grid {
    grid-template-columns: 1.3fr 0.7fr;
    gap: 48px;
  }
}
.bc-about h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.5vw, 36px);
}
.bc-about p {
  color: var(--gray-400);
  line-height: 1.55;
}
.bc-about__stats {
  display: grid;
  gap: 12px;
}
.bc-about__stats > div {
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  border: 1px solid #e5e7eb;
  text-align: center;
}
.bc-about__stats strong {
  display: block;
  font-size: 28px;
  color: var(--blue-400);
  line-height: 1.2;
  margin-bottom: 4px;
}
.bc-about__stats span {
  color: var(--gray-400);
  font-size: 14px;
}

.bc-process {
  padding: 56px 0;
  background: #fff;
}
.bc-process__title {
  text-align: center;
  margin: 0 0 32px;
  font-size: clamp(26px, 3.5vw, 36px);
}
.bc-process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px) {
  .bc-process__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .bc-process__list { grid-template-columns: repeat(4, 1fr); }
}
.bc-process__list li {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.bc-process__num {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--blue-400);
  margin-bottom: 10px;
  line-height: 1;
}
.bc-process__list h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.bc-process__list p {
  margin: 0;
  color: var(--gray-400);
  font-size: 14px;
  line-height: 1.45;
}

.bc-reviews {
  background: var(--gray-100);
  padding: 56px 0;
}
.bc-reviews h2 {
  text-align: center;
  margin: 0 0 28px;
  font-size: clamp(26px, 3.5vw, 36px);
}
.bc-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 800px) {
  .bc-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}
.bc-review {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 22px;
}
.bc-review p {
  margin: 12px 0 14px;
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bc-review footer {
  display: grid;
  gap: 2px;
}
.bc-review strong { font-size: 14px; color: var(--gray-500); }
.bc-review span { font-size: 12px; color: var(--gray-400); }
.bc-reviews__cta { text-align: center; margin-top: 28px; }

.bc-why {
  padding: 56px 0;
  background: #fff;
}
.bc-why__title {
  text-align: center;
  margin: 0 0 28px;
  font-size: clamp(26px, 3.5vw, 36px);
}
.bc-why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 800px) {
  .bc-why__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.bc-why__col {
  border-radius: 18px;
  padding: 28px 24px;
  border: 1px solid #e5e7eb;
}
.bc-why__col--with {
  background: linear-gradient(180deg, var(--blue-50), #fff);
  border-color: #cfeaf8;
}
.bc-why__col--without {
  background: var(--gray-100);
}
.bc-why__col h3 {
  margin: 0 0 18px;
  font-size: 22px;
  color: var(--gray-500);
}
.bc-why__col--with h3 { color: var(--blue-500); }
.bc-why__col article {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.bc-why__col article:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.bc-why__col h4 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--gray-500);
}
.bc-why__col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-400);
}

.bc-cities {
  padding: 40px 0 20px;
  text-align: center;
}
.bc-cities h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 3vw, 32px);
}

.bc-faq {
  padding: 20px 0 48px;
}
.bc-faq .content-card {
  margin-bottom: 0;
}

.bc-apply {
  background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
  padding: 56px 0;
  text-align: center;
  color: #fff;
}
.bc-apply__inner {
  max-width: 720px;
}
.bc-apply h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(26px, 3.5vw, 36px);
}
.bc-apply p {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
}
.bc-apply .btn-hero-light {
  color: var(--blue-500);
}