/* ==========================================================================
   Truck Lease Program — landing page styles (loaded only on the template)
   Relies on brand tokens from main.css (:root --color-*, --radius*, --shadow*).
   ========================================================================== */

.pava-lp { background: #fff; }
.lp-main { display: block; }

/* ---------- Naked header ---------- */
.lp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; box-shadow: var(--shadow-sm); }
.lp-header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.lp-header__logo img { height: 38px; width: auto; display: block; }
.lp-header__actions { display: flex; align-items: center; gap: 14px; }
.lp-header__phone { display: flex; align-items: center; gap: 8px; color: var(--color-primary); font-weight: 700; text-decoration: none; }
.lp-header__phone svg { color: var(--color-accent); }
.lp-header__live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--color-accent); text-transform: uppercase; letter-spacing: .5px; }
.lp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: lp-pulse 1.8s infinite; }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55);} 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }
.lp-header__number { font-size: 15px; }
@media (max-width: 640px) {
    .lp-header__live, .lp-header__number { display: none; }
    .lp-header__phone svg { width: 22px; height: 22px; }
}

/* ---------- Shared section heads ---------- */
.lease-section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.lease-section-head h2 { font-family: var(--font-heading); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--color-dark); margin: 10px 0 12px; line-height: 1.15; }
.lease-section-head p { color: var(--color-text-light); font-size: 1.05rem; }
.lease-tag { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; color: var(--color-accent); }

/* ---------- A. Hero ---------- */
.lease-hero { position: relative; overflow: hidden; padding: 116px 0 56px; color: #fff; }
.lease-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.lease-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(90,0,43,.94) 0%, rgba(119,0,57,.86) 55%, rgba(119,0,57,.74) 100%); z-index: 1; }
.lease-hero .container { position: relative; z-index: 2; }
.lease-hero__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.lease-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; margin: 14px 0 14px; color: #fff; }
.lease-hero__sub { font-size: clamp(1rem, 2.4vw, 1.18rem); color: rgba(255,255,255,.9); max-width: 560px; }
.lease-hero__pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.lease-pill { background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.22); padding: 7px 14px; border-radius: 50px; font-size: 13px; font-weight: 600; }
.lease-hero .lease-tag { color: #ffc1da; }
.lease-hero__call { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; margin-top: 4px; }
.lease-hero__call svg { color: #fff; background: var(--color-accent); padding: 9px; border-radius: 50%; width: 42px; height: 42px; flex: none; }
.lease-hero__call strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.lease-hero__call small { display: block; font-size: 13px; color: rgba(255,255,255,.92); }
.lease-hero__scroll { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; color: rgba(255,255,255,.92); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 2px; }
.lease-hero__scroll:hover { color: #fff; }

/* Hero form card */
.lease-hero__formwrap { width: 100%; }
.lease-form { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; color: var(--color-text); }
.lease-form__head { background: var(--color-primary); color: #fff; padding: 18px 22px; }
.lease-form__head h3 { font-family: var(--font-heading); font-size: 1.25rem; margin: 0 0 4px; color: #fff; }
.lease-form__head p { font-size: 13px; margin: 0; color: rgba(255,255,255,.85); }
.lease-form .form-group { padding: 0 22px; margin: 14px 0 0; }
.lease-form label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 5px; }
.lease-form input, .lease-form select { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 15px; font-family: inherit; background: #fff; }
.lease-form input:focus, .lease-form select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(155,0,74,.12); }
.lease-form__submit { margin: 18px 22px 6px; width: calc(100% - 44px); }
.lease-form__note { font-size: 12px; color: var(--color-text-light); text-align: center; padding: 0 22px 18px; margin: 6px 0 0; }
.lease-form .form-message { margin: 0 22px 18px; }
.lease-form .form-message:empty { display: none; }

/* ---------- B. Trust bar ---------- */
.lease-trust { border-bottom: 1px solid var(--color-border); background: #fff; }
.lease-trust__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 22px 0; }
.lease-trust__item { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lease-trust__item svg { width: 30px; height: 30px; color: var(--color-primary); flex: none; }
.lease-trust__item span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--color-text-light); line-height: 1.3; }
.lease-trust__item strong { font-size: 15px; color: var(--color-dark); }

/* ---------- C. Calculator ---------- */
.lease-calc__card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; max-width: 980px; margin: 0 auto; }
.lease-calc__inputs { padding: 28px; }
.lease-calc__field { margin-bottom: 22px; }
.lease-calc__field:last-child { margin-bottom: 0; }
.lease-calc__field label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--color-dark); margin-bottom: 10px; }
.lease-calc__field output { font-size: 1.15rem; font-weight: 700; color: var(--color-accent); }
.lease-calc__field input[type=range] { width: 100%; accent-color: var(--color-accent); height: 24px; cursor: pointer; }
.lease-calc__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-light); margin-top: 4px; }
.lease-calc__result { background: var(--color-gray-50); padding: 28px; border-top: 1px solid var(--color-border); }
.lease-calc__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--color-text); padding: 6px 0; }
.lease-calc__row--minus span:last-child { color: var(--color-text-light); }
.lease-calc__total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 14px; border-top: 2px dashed var(--color-border); }
.lease-calc__total span { font-weight: 600; color: var(--color-dark); }
.lease-calc__total span small { display: block; font-size: 11px; font-weight: 500; color: var(--color-text-light); }
.lease-calc__total strong { font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--color-primary); font-family: var(--font-heading); }
.lease-calc__result .btn { margin-top: 4px; }
.lease-calc__disclaimer { font-size: 12px; color: var(--color-text-light); margin-top: 14px; margin-bottom: 14px; line-height: 1.55; }

/* ---------- D. 19% fee ---------- */
.lease-fee__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.lease-fee__intro h2 { font-family: var(--font-heading); font-size: clamp(1.7rem,4vw,2.4rem); color: var(--color-dark); margin: 10px 0 12px; line-height: 1.12; }
.lease-fee__intro p { color: var(--color-text-light); font-size: 1.05rem; }
.lease-fee__big { display: inline-flex; flex-direction: column; align-items: center; margin-top: 22px; margin-bottom: 28px; font-family: var(--font-heading); font-weight: 700; font-size: 3.4rem; color: var(--color-primary); line-height: 1; }
.lease-fee__big small { font-size: .85rem; font-weight: 600; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.lease-fee__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.lease-fee__list li { display: flex; align-items: center; gap: 12px; background: var(--color-accent-light); border-radius: var(--radius); padding: 14px 16px; font-weight: 600; color: var(--color-dark); }
.lease-fee__list svg { width: 20px; height: 20px; color: var(--color-accent); flex: none; }

/* ---------- E. Steps ---------- */
.lease-steps__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.lease-step { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 22px; position: relative; }
.lease-step__num { width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }
.lease-step h3 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-dark); margin: 0 0 6px; }
.lease-step p { font-size: .92rem; color: var(--color-text-light); margin: 0; }

/* ---------- F. Benefits ---------- */
.lease-benefits__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.lease-benefit { background: var(--color-gray-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 24px; transition: var(--transition); }
@media (hover: hover) {
    .lease-benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
    .lease-benefit:hover .lease-benefit__ic { background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary)); box-shadow: none; color: #fff; }
}
/* Icon chip — matches .lease-fee__list: accent-light tile, inset accent edge, bordeaux line icon. */
.lease-benefit__ic { width: 52px; height: 52px; border-radius: var(--radius); background: var(--color-accent-light); box-shadow: inset 0 0 0 1px rgba(155,0,74,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--color-primary); transition: background-color 160ms cubic-bezier(.7,0,.2,1), color 160ms cubic-bezier(.7,0,.2,1), box-shadow 160ms cubic-bezier(.7,0,.2,1); }
.lease-benefit__ic svg { width: 26px; height: 26px; display: block; }
.lease-benefit h3 { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.3; color: var(--color-dark); margin: 0 0 6px; }
.lease-benefit p { font-size: .92rem; color: var(--color-text-light); margin: 0; }

/* ---------- G. Trucks (real units, grid of per-card galleries) ---------- */
.lease-trucks__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.lease-truck { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; }
.lease-truck__media { position: relative; }
/* native swipe gallery — no JS library */
.lease-truck__gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.lease-truck__gallery::-webkit-scrollbar { display: none; }
.lease-truck__slide { flex: 0 0 100%; scroll-snap-align: start; }
.lease-truck__slide img { width: 100%; height: 220px; object-fit: cover; display: block; background: var(--color-gray-100); }
.lease-truck__count { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 50px; background: rgba(26,26,46,.72); color: #fff; font-size: 12px; font-weight: 600; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; }
.lease-truck__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--color-dark); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0; transition: var(--transition); z-index: 2; }
.lease-truck__nav--prev { left: 10px; }
.lease-truck__nav--next { right: 10px; }
.lease-truck__media:hover .lease-truck__nav { opacity: 1; }
.lease-truck__nav:focus-visible { opacity: 1; outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lease-truck__nav { display: inline-flex; } }
.lease-truck__cap { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.lease-truck__cap strong { font-weight: 600; color: var(--color-dark); line-height: 1.3; }
.lease-truck__tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--color-accent); background: var(--color-accent-light); padding: 3px 10px; border-radius: 50px; }
.lease-trucks__cta { text-align: center; margin-top: 28px; }

/* ---------- I. Stats ---------- */
.lease-stats { background: var(--color-primary); color: #fff; padding: 48px 0; }
.lease-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; text-align: center; }
.lease-stat strong { display: block; font-family: var(--font-heading); font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; }
.lease-stat span { display: block; margin-top: 6px; font-size: .9rem; color: rgba(255,255,255,.92); }

/* ---------- J. Testimonials ---------- */
.lease-reviews__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.lease-review { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.lease-review__stars { color: var(--color-accent); letter-spacing: 2px; font-size: 1.05rem; }
.lease-review p { color: var(--color-text); font-size: .98rem; line-height: 1.6; margin: 12px 0 18px; }
.lease-review__author { display: flex; align-items: center; gap: 12px; }
.lease-review__ava { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.lease-review__author strong { display: block; color: var(--color-dark); font-size: .95rem; }
.lease-review__author small { display: block; color: var(--color-text-light); font-size: 12px; }

/* ---------- K. FAQ ---------- */
.lease-faq__list { display: flex; flex-direction: column; gap: 12px; }
.lease-faq__item { border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.lease-faq__item summary { cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--color-dark); list-style: none; position: relative; padding-right: 44px; }
.lease-faq__item summary::-webkit-details-marker { display: none; }
.lease-faq__item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--color-accent); line-height: 1; }
.lease-faq__item[open] summary::after { content: "−"; }
.lease-faq__item[open] summary { color: var(--color-primary); }
.lease-faq__item > div { padding: 0 18px 16px; color: var(--color-text-light); font-size: .95rem; line-height: 1.6; }

/* ---------- L. Final CTA ---------- */
.lease-final { background: linear-gradient(120deg, var(--color-primary-dark, #5a002b), var(--color-primary, #770039)); color: #fff; padding: 64px 0; }
.lease-final__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.lease-final__copy h2 { font-family: var(--font-heading); font-size: clamp(1.8rem,5vw,2.6rem); margin: 0 0 12px; line-height: 1.12; color: #fff; }
.lease-final__copy > p { color: rgba(255,255,255,.8); font-size: 1.05rem; }
.lease-final__perks { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.lease-final__perks li { color: rgba(255,255,255,.92); font-size: .98rem; }
.lease-final__call { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1rem; margin-top: 6px; }
.lease-final__call svg { color: var(--color-accent); }
.lease-final__call strong { color: #fff; }

/* ---------- S. Sticky mobile CTA ---------- */
.lease-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; gap: 10px; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.12); border-top: 1px solid var(--color-border); }
.lease-sticky .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; }
.lease-sticky .lease-sticky__apply { flex: 1.3; }

/* ---------- Minimal footer ---------- */
.lp-footer { background: var(--color-primary-dark, #5a002b); color: rgba(255,255,255,.8); padding: 26px 0; }
.lp-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.lp-footer__logo { height: 28px; width: auto; }
.lp-footer__legal { font-size: 13px; margin: 0; }
.lp-footer__links { font-size: 13px; margin: 0; display: flex; gap: 8px; }
.lp-footer__links a { color: #fff; text-decoration: none; }
.lp-footer__links a:hover { text-decoration: underline; }

/* ---------- Thank-you page ---------- */
.lease-ty { padding: 130px 0 80px; background: var(--color-gray-50); min-height: 70vh; display: flex; align-items: center; }
.lease-ty__card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 48px 32px; text-align: center; }
.lease-ty__check { width: 72px; height: 72px; border-radius: 50%; background: #ecfdf5; color: #16a34a; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.lease-ty__check svg { width: 38px; height: 38px; }
.lease-ty h1 { font-family: var(--font-heading); font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--color-dark); margin: 0 0 14px; }
.lease-ty p { color: var(--color-text-light); font-size: 1.08rem; max-width: 520px; margin: 0 auto 12px; }
.lease-ty__call { margin: 22px 0 8px; display: inline-flex; align-items: center; gap: 10px; }
.lease-ty__small { font-size: 13px; }

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 768px) {
    .lease-trust__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lease-fee__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lease-steps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lease-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lease-stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lease-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lease-calc__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .lease-calc__result { border-top: none; border-left: 1px solid var(--color-border); }
    .lease-trucks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .lease-hero { padding: 150px 0 80px; }
    .lease-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
    .lease-fee__grid { grid-template-columns: 1fr 1fr; }
    .lease-final__grid { grid-template-columns: 1.1fr .9fr; }
    .lease-trucks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* sticky bar only on mobile */
@media (max-width: 767px) {
    .lease-sticky { display: flex; }
    body.pava-lp { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .lease-hero__call strong { font-size: 1.2rem; }
    /* 16px prevents iOS Safari from zooming the page on input focus */
    .lease-form input, .lease-form select { font-size: 16px; }
}

/* Calculator on small phones: relax interior padding and keep value text
   from colliding with the labels/amounts once the grid no longer clips. */
@media (max-width: 480px) {
    .lease-calc__inputs, .lease-calc__result { padding: 18px; }
    .lease-calc__field label { gap: 12px; }
    .lease-calc__field label > :first-child { min-width: 0; }
    .lease-calc__row, .lease-calc__total { gap: 12px; }
    .lease-calc__row > span:last-child,
    .lease-calc__total strong { flex: none; white-space: nowrap; }
    .lease-calc__total > span { min-width: 0; }
}

/* ---------- Accessibility: focus + reduced motion ---------- */
.lease-form a:focus-visible,
.lp-scroll:focus-visible,
.lease-hero__call:focus-visible,
.lease-hero__scroll:focus-visible,
.lease-final__call:focus-visible,
.lease-faq__item summary:focus-visible,
.lease-calc__field input[type=range]:focus-visible,
.lease-sticky .btn:focus-visible,
.lease-truck__gallery:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
    .lp-live-dot { animation: none; }
    .lease-benefit, .lease-benefit__ic, .btn, .lease-faq__item summary { transition: none; }
    .lease-benefit:hover { transform: none; }
    html { scroll-behavior: auto; }
}