/* Customer pages on the Capra Connect system (October 2026).
   The customer hub, product pages and sector pages stay light, on Paper and
   Bone, but share Connect's buttons, cards, labels, type, FAQ pattern and
   closing banner. Every rule is scoped to body.customer-v2 so the vendor
   pages and the portal are untouched. Radii stay on 4, 6 and 8px. */

body.customer-v2 {
  --cv-ink: #0e1b2c;
  --cv-paper: #fbfaf6;
  --cv-bone: #f4efe6;
  --cv-muted: rgba(14, 27, 44, 0.7);
  --cv-line: rgba(14, 27, 44, 0.1);
  --cv-line-strong: rgba(14, 27, 44, 0.16);
  --cv-label: #7d5f3c;
  --cv-clay: #a8835b;
  --cv-on-dark: #f4efe6;
  --cv-on-dark-muted: rgba(244, 239, 230, 0.84);
}

/* Hero ----------------------------------------------------------------------- */

body.customer-v2 :is(.product-hero, .customer-hero)::after {
  inset: 0;
  height: auto;
  background:
    linear-gradient(90deg, rgba(14, 27, 44, 0.84) 0%, rgba(14, 27, 44, 0.6) 48%, rgba(14, 27, 44, 0.3) 100%),
    linear-gradient(180deg, rgba(14, 27, 44, 0.4) 0%, rgba(14, 27, 44, 0.12) 40%, rgba(14, 27, 44, 0.88) 100%);
}

body.customer-v2.customer-page .customer-hero::before {
  background-image: url("/images/heroes/customers-telehandler-1600.webp");
  background-position: center 55%;
}

body.customer-v2.hire-purchase-page .product-hero::before {
  background-image: url("/images/heroes/hire-purchase-backhoe-1600.webp");
  background-position: center 60%;
}

body.customer-v2.equipment-leasing-page .product-hero::before {
  background-image: url("/images/heroes/equipment-leasing-gym-1600.webp");
  background-position: center;
}

body.customer-v2.asset-refinance-page .product-hero::before {
  background-image: url("/images/heroes/asset-refinance-loader-1600.webp");
  background-position: center 60%;
}

body.customer-v2.business-loans-page .product-hero::before {
  background-image: url("/images/heroes/business-loans-restaurant-1600.webp");
  background-position: center 40%;
}

body.customer-v2.quick-view-products-page .product-hero::before {
  background-image: url("/images/coffee-hospitality/cafe-interior-2.webp");
  background-position: center;
}

body.customer-v2 :is(.product-hero, .customer-hero) h1 {
  max-width: 16ch;
  font-size: clamp(44px, 3.4vw + 12px, 68px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

body.customer-v2 :is(.product-hero, .customer-hero) h1 span {
  letter-spacing: inherit;
}

/* Buttons -------------------------------------------------------------------- */

body.customer-v2 main :is(
  .sales-primary,
  .sales-secondary,
  .pm-button,
  .dealer-primary-cta,
  .dealer-secondary-cta,
  .product-primary-cta,
  .product-secondary-cta,
  .product-primary-action,
  .customer-calculator-apply,
  .page-closing-primary,
  .page-closing-secondary,
  .quick-button,
  .customer-mobile-button
) {
  min-height: 48px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
}

body.customer-v2 main :is(.sales-primary, .page-closing-primary, .dealer-primary-cta) {
  border-color: var(--cv-on-dark);
  background: var(--cv-on-dark);
  color: var(--cv-ink);
}

body.customer-v2 main :is(.sales-primary, .page-closing-primary, .dealer-primary-cta):hover {
  border-color: #ffffff;
  background: #ffffff;
}

body.customer-v2 main :is(.sales-secondary, .page-closing-secondary, .dealer-secondary-cta) {
  border: 1px solid rgba(244, 239, 230, 0.34);
  background: rgba(8, 18, 29, 0.42);
  color: var(--cv-on-dark);
}

body.customer-v2 main :is(.sales-secondary, .page-closing-secondary, .dealer-secondary-cta):hover {
  border-color: var(--cv-on-dark);
}

body.customer-v2 main :is(.product-primary-action, .customer-calculator-apply, .quick-button) {
  background: var(--cv-ink);
  color: var(--cv-paper);
}

body.customer-v2 main :is(.product-primary-action, .customer-calculator-apply, .quick-button):hover {
  background: #1b2a3e;
}

body.customer-v2 :is(.product-hero, .customer-hero) .quick-button {
  background: var(--cv-on-dark);
  color: var(--cv-ink);
}

body.customer-v2 :is(.product-hero, .customer-hero) .quick-button:hover {
  background: #ffffff;
}

/* Type ----------------------------------------------------------------------- */

body.customer-v2 main section:not(.product-hero):not(.hero) h2 {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

body.customer-v2 main h3 {
  letter-spacing: -0.015em;
}

body.customer-v2 .product-compare-section thead th {
  color: var(--cv-label);
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* Cards ---------------------------------------------------------------------- */

body.customer-v2 main :is(
  .product-enquiry-card,
  .product-detail,
  .service-card,
  .customer-guide-card,
  .approval-note,
  .product-checklist,
  .bank-comparison-wrap
) {
  border-radius: 8px;
  box-shadow: none;
}

@media (min-width: 761px) {
  body.customer-v2 main .bank-comparison-wrap {
    border: 1px solid var(--cv-line);
  }
}

/* Steps: plain numbers, as on the vendor pages -------------------------------- */

body.customer-v2 .product-process-list > li::before {
  content: counter(product-step);
  color: var(--cv-label);
  font-family: var(--f-mono);
  font-size: 13px;
}

body.customer-v2 .customer-mobile-steps li::before {
  content: counter(desktop-step);
  color: var(--cv-label);
  font-family: var(--f-mono);
}

/* FAQ, on the Connect pattern ------------------------------------------------ */

body.customer-v2 .customer-faq-item summary {
  min-height: 64px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

body.customer-v2 .customer-faq-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 0;
  background: none;
}

body.customer-v2 .customer-faq-icon::before,
body.customer-v2 .customer-faq-icon::after {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--cv-clay);
}

body.customer-v2 .customer-faq-item p {
  font-size: 15.5px;
  line-height: 1.65;
}

/* Closing banner, on the Connect pattern ------------------------------------- */

body.customer-v2 .page-closing-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 64px);
  gap: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(14, 27, 44, 0.74) 0%, rgba(14, 27, 44, 0.88) 100%),
    url("/images/business/ready-for-growth.webp") center / cover no-repeat;
  text-align: center;
  isolation: isolate;
}

body.customer-v2 .page-closing-copy {
  max-width: 640px;
}

body.customer-v2 .page-closing-copy h2 {
  font-size: clamp(34px, 2.6vw + 12px, 52px);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

body.customer-v2 .page-closing-copy p {
  max-width: 52ch;
  margin: 16px auto 0;
  color: var(--cv-on-dark-muted);
  font-size: 17px;
  line-height: 1.6;
}

body.customer-v2 .page-closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
  margin-top: 32px;
}

body.customer-v2 .page-closing-actions :is(.page-closing-primary, .page-closing-secondary) {
  width: auto;
  min-width: 200px;
  padding: 0 24px;
}

body.customer-v2 .page-closing-contact {
  flex-basis: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* Vehicles: the van, not a sports car ----------------------------------------- */

body.customer-v2 .service-card-vehicle {
  --service-image: url("/images/transport-vehicles/commercial-van-uk.webp");
}

/* Phone ---------------------------------------------------------------------- */

@media (max-width: 760px) {
  body.customer-v2 :is(.product-hero, .customer-hero)::after {
    background: linear-gradient(180deg, rgba(14, 27, 44, 0.62) 0%, rgba(14, 27, 44, 0.5) 35%, rgba(14, 27, 44, 0.92) 100%);
  }

  body.customer-v2 :is(.product-hero, .customer-hero) h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  body.customer-v2 .page-closing-actions :is(.page-closing-primary, .page-closing-secondary) {
    width: 100%;
  }

  body.customer-v2 .customer-mobile-steps li::before {
    content: counter(customer-step);
  }

  body.customer-v2 .leasing-step-card::before {
    content: counter(mobile-step);
    font-family: var(--f-mono);
  }
}