/* --------------------------------------------------------------------------
   PDRYar Home V4 — responsive storefront
   Scoped to .home-v4 to avoid changing dashboard/admin pages.
   -------------------------------------------------------------------------- */
.home-v4{display:grid;gap:clamp(1.3rem,3vw,2.7rem);padding:clamp(.5rem,1.5vw,1.2rem) 0 2rem;color:#173e46}
.home-v4 *, .home-v4 *::before, .home-v4 *::after{box-sizing:border-box}
.home-v4 svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.home-v4-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy visual";gap:clamp(1.7rem,4vw,5.4rem);align-items:center;min-height:500px;padding:clamp(.35rem,1vw,1rem) 0}
.home-v4-copy{grid-area:copy;min-width:0;padding:.8rem .25rem .5rem}
.home-v4-eyebrow,.home-v4-section-heading>span,.home-v4-provider-cta>div>span,.home-v4-final-cta>div>span{display:inline-flex;align-items:center;gap:.45rem;color:#077e73;font-weight:900;font-size:.82rem}
.home-v4-eyebrow{padding:.42rem .78rem;border:1px solid #cbe8e2;border-radius:999px;background:#f8fffd}
.home-v4-eyebrow i{width:8px;height:8px;border-radius:50%;background:#20b69b;box-shadow:0 0 0 4px rgba(32,182,155,.13)}
.home-v4 h1{max-width:730px;margin:.75rem 0 .8rem;color:#102f37;font-size:clamp(2.15rem,4.35vw,4.35rem);font-weight:900;line-height:1.22;letter-spacing:-.058em}
.home-v4 h1 span{color:#098b80}
.home-v4-copy>p{max-width:635px;margin:0;color:#607780;font-size:clamp(.98rem,1.28vw,1.12rem);line-height:2.05}
.home-v4-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.45rem}
.home-v4-button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:54px;padding:.8rem 1.3rem;border-radius:16px;font-weight:900;font-size:.98rem;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.home-v4-button:hover{transform:translateY(-2px)}
.home-v4-button svg{width:21px;height:21px}
.home-v4-button-primary{color:#fff;background:linear-gradient(135deg,#098b80,#056860);box-shadow:0 16px 28px rgba(5,104,96,.23)}
.home-v4-button-primary:hover{box-shadow:0 19px 34px rgba(5,104,96,.28)}
.home-v4-button-secondary{color:#08776e;border:1px solid #9fcfc7;background:#fff;box-shadow:0 9px 20px rgba(17,46,51,.055)}
.home-v4-button-secondary:hover{background:#f6fffd}
.home-v4-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:670px;margin-top:1.6rem}
.home-v4-benefits>div{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;align-items:center;padding:.2rem .85rem .2rem 0;border-left:1px solid #e1efec}
.home-v4-benefits>div:first-child{border-left:0}
.home-v4-benefit-icon{grid-row:span 2;display:grid;place-items:center;width:39px;height:39px;border-radius:14px;color:#087d72;background:#e9f9f5}
.home-v4-benefit-icon svg{width:19px;height:19px}
.home-v4-benefits strong,.home-v4-benefits small{display:block;line-height:1.45}.home-v4-benefits strong{color:#163f47;font-size:.86rem}.home-v4-benefits small{color:#82969c;font-size:.72rem}

.home-v4-visual{grid-area:visual;position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:360px;overflow:hidden;isolation:isolate;border:1px solid #c8e8e2;border-radius:30px;background:linear-gradient(145deg,#fbfffe 0%,#e9faf7 48%,#d7f1eb 100%);box-shadow:0 20px 46px rgba(14,69,70,.08)}
.home-v4-visual::before{content:"";position:absolute;z-index:-1;right:-10%;bottom:-88%;width:120%;height:155%;border-radius:50%;background:radial-gradient(circle at 48% 31%,rgba(105,205,190,.33) 0,rgba(126,220,204,.13) 45%,transparent 67%)}
.home-v4-visual::after{content:"";position:absolute;z-index:2;right:8%;bottom:12%;left:8%;height:15px;border-radius:50%;background:rgba(35,84,84,.15);filter:blur(12px)}
.home-v4-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none}.home-v4-orb-one{top:-32%;right:-14%;width:66%;aspect-ratio:1;background:rgba(111,209,193,.15)}.home-v4-orb-two{bottom:-43%;left:-18%;width:58%;aspect-ratio:1;background:rgba(255,206,142,.20)}
.home-v4-sedan{position:relative;z-index:1;display:block;width:98%;max-width:760px;height:auto;margin:0 auto 3%;object-fit:contain;filter:drop-shadow(0 16px 12px rgba(10,44,49,.2))}
.home-v4-visual-tag,.home-v4-visual-note{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(204,232,226,.96);background:rgba(255,255,255,.93);box-shadow:0 12px 26px rgba(18,65,66,.10);backdrop-filter:blur(7px)}
.home-v4-visual-tag{top:1.2rem;right:1.2rem;padding:.53rem .78rem;border-radius:15px;color:#1d4d55;font-size:.77rem;font-weight:900}.home-v4-visual-tag svg{width:19px;height:19px;color:#07887d}
.home-v4-visual-note{bottom:1rem;left:1rem;padding:.45rem .7rem;border-radius:999px;color:#08776e;font-size:.7rem;font-weight:800}.home-v4-visual-note svg{width:17px;height:17px;border-radius:50%;color:#159985}

.home-v4-advantages{padding:clamp(1.45rem,3vw,2.3rem);border:1px solid #e0eeeb;border-radius:28px;background:#fff;box-shadow:0 16px 38px rgba(18,52,59,.035)}
.home-v4-section-heading{text-align:center}.home-v4-section-heading h2{margin:.32rem 0 .35rem;color:#173c44;font-size:clamp(1.3rem,2.25vw,2rem);line-height:1.48}.home-v4-section-heading h2::after{content:"";display:block;width:35px;height:2px;margin:.48rem auto 0;border-radius:8px;background:#20b19e}.home-v4-section-heading p{max-width:650px;margin:.7rem auto 0;color:#728b91;font-size:.9rem;line-height:1.9}
.home-v4-advantages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.home-v4-advantage-card{padding:1.25rem 1.15rem;border:1px solid #e1efec;border-radius:21px;background:linear-gradient(145deg,#fff,#fbfefd);transition:transform .18s ease,box-shadow .18s ease}.home-v4-advantage-card:hover{transform:translateY(-3px);box-shadow:0 15px 26px rgba(17,68,69,.07)}
.home-v4-card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;color:#087d72;background:#e9f9f5}.home-v4-card-icon svg{width:24px;height:24px}.home-v4-advantage-card h3{margin:.84rem 0 .38rem;color:#174048;font-size:1rem}.home-v4-advantage-card p{margin:0;color:#728b91;font-size:.82rem;line-height:1.95}

.home-v4-steps{padding:clamp(1.25rem,2.7vw,2.15rem);border:1px solid #e0eeeb;border-radius:28px;background:linear-gradient(150deg,#fff,#f9fdfc)}.home-v4-section-heading-compact{margin-bottom:1.35rem}.home-v4-section-heading-compact p{display:none}
.home-v4-steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}.home-v4-steps-grid li{position:relative;min-height:185px;padding:1.1rem 1rem 1rem;border:1px solid #dfeeea;border-radius:20px;background:#fff}.home-v4-steps-grid li:not(:last-child)::after{content:"←";position:absolute;z-index:2;top:48%;left:-.81rem;color:#b8cecc;font-size:1.5rem;line-height:1}
.home-v4-step-no{position:absolute;top:.8rem;left:.8rem;display:grid;place-items:center;width:27px;height:27px;border-radius:10px;color:#08776e;background:#ddf6ef;font-size:.8rem;font-weight:900}.home-v4-step-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;color:#087d72;background:#eaf9f5}.home-v4-step-icon svg{width:24px;height:24px}.home-v4-steps-grid h3{margin:.78rem 0 .3rem;color:#173f47;font-size:.95rem}.home-v4-steps-grid p{margin:0;color:#748d93;font-size:.79rem;line-height:1.9}

.home-v4-provider-cta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.15rem;padding:clamp(1.25rem,2.7vw,2rem);border-radius:28px;color:#fff;background:radial-gradient(circle at 8% 0,rgba(113,233,208,.26),transparent 36%),linear-gradient(135deg,#07635b,#0a8278);box-shadow:0 18px 38px rgba(5,104,96,.17)}.home-v4-provider-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:rgba(255,255,255,.14);color:#e5fffa}.home-v4-provider-icon svg{width:31px;height:31px}.home-v4-provider-cta>div>span{color:#d6f8f0}.home-v4-provider-cta h2{margin:.35rem 0;color:#fff;font-size:clamp(1.1rem,2.1vw,1.6rem);line-height:1.5}.home-v4-provider-cta p{max-width:700px;margin:0;color:#d4f1ec;font-size:.84rem;line-height:1.85}.home-v4-provider-cta>a{display:inline-flex;align-items:center;gap:.55rem;justify-content:center;padding:.78rem 1.05rem;border-radius:15px;color:#08766d;background:#fff;font-weight:900;box-shadow:0 10px 20px rgba(0,44,40,.14)}.home-v4-provider-cta b{font-size:1.15rem}
.home-v4-final-cta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:clamp(1.35rem,3vw,2.2rem);border-radius:28px;color:#fff;background:linear-gradient(135deg,#0b776d,#0f9689);box-shadow:0 18px 38px rgba(5,104,96,.15)}.home-v4-final-cta>div>span{color:#cdfaf2}.home-v4-final-cta h2{margin:.35rem 0;color:#fff;font-size:clamp(1.28rem,2.4vw,1.9rem);line-height:1.45}.home-v4-final-cta p{margin:0;color:#dbf7f2;font-size:.9rem;line-height:1.85}.home-v4-button-light{flex:0 0 auto;color:#08766d;background:#fff;box-shadow:0 13px 25px rgba(0,58,53,.18)}

@media (max-width:980px){.home-v4-hero{grid-template-columns:minmax(0,1fr) minmax(0,.93fr);gap:1.5rem;min-height:440px}.home-v4-visual{min-height:320px}.home-v4-sedan{width:102%;margin-bottom:5%}.home-v4-benefits>div{padding-right:.55rem}.home-v4-benefits small{font-size:.66rem}.home-v4-steps-grid{gap:.7rem}.home-v4-steps-grid li{padding:.95rem .8rem}.home-v4-steps-grid p{font-size:.72rem}}
@media (max-width:760px){.home-v4{gap:1.15rem;padding:.4rem 0 1.5rem}.home-v4-hero{grid-template-columns:1fr;grid-template-areas:"copy" "visual";gap:1rem;min-height:0;padding:.25rem 0}.home-v4-copy{padding:.2rem .2rem;text-align:center}.home-v4-eyebrow{margin-inline:auto;font-size:.71rem}.home-v4 h1{margin:.68rem auto .55rem;font-size:clamp(2.05rem,9vw,3.05rem);line-height:1.29}.home-v4-copy>p{margin-inline:auto;font-size:.9rem;line-height:1.95}.home-v4-actions{justify-content:center;margin-top:1.15rem}.home-v4-button{flex:1 1 170px;min-height:51px;padding:.72rem 1rem;font-size:.9rem}.home-v4-benefits{margin:1.2rem -.1rem 0}.home-v4-benefits>div{grid-template-columns:1fr;justify-items:center;padding:.1rem .25rem;text-align:center}.home-v4-benefit-icon{width:36px;height:36px;border-radius:12px}.home-v4-benefit-icon svg{width:18px;height:18px}.home-v4-benefits strong{margin-top:.34rem;font-size:.73rem}.home-v4-benefits small{font-size:.62rem;line-height:1.45}.home-v4-visual{min-height:0;aspect-ratio:1.54/1;border-radius:23px}.home-v4-sedan{width:104%;max-width:none;margin-bottom:7%}.home-v4-visual-tag{top:.72rem;right:.72rem;padding:.44rem .58rem;border-radius:13px;font-size:.65rem}.home-v4-visual-tag svg{width:17px;height:17px}.home-v4-visual-note{bottom:.68rem;left:.68rem;padding:.34rem .5rem;font-size:.57rem}.home-v4-visual-note svg{width:15px;height:15px}.home-v4-advantages,.home-v4-steps{padding:1.1rem .78rem;border-radius:22px}.home-v4-section-heading h2{font-size:1.25rem}.home-v4-section-heading p{font-size:.8rem;line-height:1.85}.home-v4-advantages-grid{grid-template-columns:1fr;gap:.66rem;margin-top:1rem}.home-v4-advantage-card{padding:1rem;border-radius:17px}.home-v4-card-icon{width:42px;height:42px;border-radius:14px}.home-v4-advantage-card h3{margin:.63rem 0 .22rem;font-size:.9rem}.home-v4-advantage-card p{font-size:.76rem;line-height:1.82}.home-v4-section-heading-compact{margin-bottom:1rem}.home-v4-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.62rem}.home-v4-steps-grid li{min-height:155px;padding:.84rem .68rem .65rem;border-radius:16px}.home-v4-steps-grid li::after{display:none}.home-v4-step-no{top:.6rem;left:.6rem;width:23px;height:23px;border-radius:8px;font-size:.69rem}.home-v4-step-icon{width:39px;height:39px;border-radius:13px}.home-v4-step-icon svg{width:20px;height:20px}.home-v4-steps-grid h3{margin:.56rem 0 .2rem;font-size:.8rem}.home-v4-steps-grid p{font-size:.66rem;line-height:1.72}.home-v4-provider-cta{grid-template-columns:auto 1fr;padding:1.12rem 1rem;border-radius:22px}.home-v4-provider-icon{width:52px;height:52px;border-radius:17px}.home-v4-provider-icon svg{width:27px;height:27px}.home-v4-provider-cta h2{font-size:1rem}.home-v4-provider-cta p{font-size:.75rem;line-height:1.75}.home-v4-provider-cta>a{grid-column:1/-1;width:100%;margin-top:.15rem;font-size:.84rem}.home-v4-final-cta{display:grid;padding:1.25rem 1rem;border-radius:22px;text-align:center}.home-v4-final-cta h2{font-size:1.25rem}.home-v4-final-cta p{font-size:.8rem}.home-v4-button-light{width:100%}}
@media (max-width:390px){.home-v4-actions{display:grid;grid-template-columns:1fr}.home-v4-benefits small{display:none}.home-v4-visual{aspect-ratio:1.42/1}.home-v4-sedan{width:107%;margin-bottom:9%}}


/* PDRYAR-CAR-CONTAIN-HOTFIX-START
   Keep the entire transparent sedan inside the visual card at every viewport.
   This is appended after home-v4.css by apply-on-server.sh.
*/
.home-v4 .home-v4-visual{
  /* A stable canvas: changing viewport width changes both dimensions together. */
  --sedan-inline-padding: clamp(12px, 3.25vw, 34px);
  --sedan-bottom-padding: clamp(34px, 7.25vw, 66px);
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(18px, 3vw, 32px) var(--sedan-inline-padding) var(--sedan-bottom-padding);
}

.home-v4 .home-v4-sedan{
  /* Never enlarge beyond the usable canvas; transparent image stays fully visible. */
  display: block;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  max-block-size: none !important;
  min-inline-size: 0;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
}

/* Keep overlay labels away from the car's front/rear edges. */
.home-v4 .home-v4-visual-tag{
  top: clamp(.75rem, 2vw, 1.2rem);
  right: clamp(.75rem, 2vw, 1.2rem);
}
.home-v4 .home-v4-visual-note{
  bottom: clamp(.7rem, 1.8vw, 1rem);
  left: clamp(.7rem, 1.8vw, 1rem);
  max-inline-size: calc(100% - 1.4rem);
}

@media (max-width: 980px){
  .home-v4 .home-v4-visual{
    --sedan-inline-padding: clamp(10px, 2.8vw, 24px);
    --sedan-bottom-padding: clamp(30px, 6.5vw, 52px);
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 760px){
  .home-v4 .home-v4-visual{
    /* Stable mobile frame; no width above 100%, so neither bumper can be clipped. */
    --sedan-inline-padding: 10px;
    --sedan-bottom-padding: clamp(36px, 10vw, 54px);
    aspect-ratio: 5 / 4;
    padding-top: clamp(16px, 5vw, 28px);
  }
  .home-v4 .home-v4-sedan{
    inline-size: 100% !important;
  }
}

@media (max-width: 390px){
  .home-v4 .home-v4-visual{
    --sedan-inline-padding: 8px;
    --sedan-bottom-padding: 42px;
    aspect-ratio: 5 / 4;
  }
  .home-v4 .home-v4-visual-tag{font-size: .59rem;}
  .home-v4 .home-v4-visual-note{font-size: .53rem;}
}
/* PDRYAR-CAR-CONTAIN-HOTFIX-END */