/* Pricing card styles, lifted verbatim from page-paint-protection-film.css so the
   starting-price card on each service page is the same component the Clear PPF page uses.
   Loaded only on pages that publish a price (see inc/service-pricing.php). */
.ppf-tiers{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.ppf-tier{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:border-color .3s ease,transform .3s ease}
.ppf-tier::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;background:linear-gradient(90deg,var(--blue),#cfff00,rgba(255,255,255,.86));opacity:0;transition:opacity .3s ease}
.ppf-tier:hover{border-color:rgba(255,255,255,.28);transform:translateY(-4px)}
.ppf-tier:hover::before{opacity:1}
.ppf-tier-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#f2f2f2}
.ppf-tier-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ppf-tier:hover .ppf-tier-media img{transform:scale(1.05)}
.ppf-tier-level{position:absolute;top:14px;left:14px;background:rgba(5,5,5,.72);border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.14em;padding:7px 14px;text-transform:uppercase}
.ppf-tier-body{display:flex;flex-direction:column;gap:12px;padding:26px 24px 28px}
.ppf-tier-body h3{align-items:baseline;display:flex;flex-wrap:wrap;font-size:1.3rem;gap:8px;margin:0}
.ppf-tier-fin{color:var(--soft);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:none}
.ppf-tier-price{color:var(--soft);font-size:.95rem;margin:0}
.ppf-tier-price strong{color:var(--ink);font-size:1.25rem}
.ppf-tier-plus{color:var(--ink);font-size:.9rem;font-weight:700;margin:4px 0 0}
.ppf-tier-list{color:var(--soft);display:flex;flex-direction:column;gap:7px;list-style:none;margin:0;padding:0}
.ppf-tier-list li{padding-left:22px;position:relative}
.ppf-tier-list li::before{color:#7ee081;content:"+";font-weight:900;left:4px;position:absolute}
.ppf-tier-addon{align-self:flex-start;margin-top:auto;background:rgba(28,105,212,.12);border:1px solid rgba(28,105,212,.32);border-radius:999px;color:#9cc4ff;font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:6px 13px;text-transform:uppercase}
.ppf-tier-cta{display:flex;justify-content:center;margin-top:44px}
.ppf-tier-cta .btn{min-width:320px}
@media (max-width:860px){.ppf-tiers{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
/* Single-price pages: the shared card becomes a full width panel, photo on the left and the
   detail beside it. One narrow card centred on its own reads adrift; a panel reads deliberate
   and gives the price room to carry the section. */
.wr-single-tier .ppf-tiers{grid-template-columns:1fr;max-width:none;margin:0}
.wr-single-tier .ppf-tier{flex-direction:row;align-items:stretch}
.wr-single-tier .ppf-tier-media{flex:0 0 46%;aspect-ratio:auto;min-height:360px}
.wr-single-tier .ppf-tier-body{flex:1;justify-content:center;gap:14px;padding:clamp(28px,3.4vw,46px)}
.wr-single-tier .ppf-tier-body h3{font-size:1.7rem}
.wr-single-tier .ppf-tier-price{font-size:1rem;margin-top:2px}
.wr-single-tier .ppf-tier-price strong{display:block;font-size:2.4rem;line-height:1.05;margin-top:4px}
.wr-single-tier .ppf-tier-list{gap:9px;margin-top:4px}
.wr-single-tier .ppf-tier-addon{margin-top:10px}
@media (max-width:860px){.wr-single-tier .ppf-tier{flex-direction:column}.wr-single-tier .ppf-tier-media{flex:none;aspect-ratio:16/9;min-height:0}}
/* Teal, not green: teal is the brand accent used for numbers and marks across the site. */
.ppf-tier-list li::before{color:var(--brand-teal,#17b0a6)}