/* Homepage parts and care sections (templates/pt/_home_parts.html, _home_care.html).
   The parts card and the care calculator are light app screens rebuilt in HTML with
   the app's colours; they animate once homepage-imagine.mjs adds .is-in, and
   homepage-parts.js counts the numbers and cycles the care tabs. Reduced motion
   (homepage-imagine.css) stops the animation and everything shows at once. */
.home-parts{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center;padding-block:100px}
.home-parts h2,.home-care h2{font:600 clamp(34px,3.8vw,54px)/1.05 var(--pt-font);letter-spacing:-.02em}
.home-parts h2{color:var(--pt-ink)}
.home-parts-copy>p{margin-top:20px;font-size:17.5px;line-height:1.65;color:var(--pt-muted);max-width:44ch}
.home-parts .refined-checklist{margin:26px 0 0}
.home-parts-photo{margin:0}
.home-parts-photo img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:var(--pt-shadow)}

.home-parts-card{margin:0;padding:24px 28px 22px;border-radius:18px;background:#f7fafc;border:1px solid #c8d7e3;box-shadow:0 30px 70px -28px rgba(25,56,79,.4);color:#19384f;font-family:var(--pt-font)}
.parts-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.parts-head b{font-size:24px;font-weight:650;letter-spacing:-.02em}
.parts-head span{font-size:14px;color:#506779}
.parts-label{margin:16px 0 6px;font-size:14px;font-weight:650;color:#19384f}
.parts-rows{list-style:none;margin:0;padding:0}
.parts-rows li{display:grid;grid-template-columns:52px minmax(0,1fr) auto 24px;gap:14px;align-items:center;padding:9px 0;border-top:1px solid #dde7ef}
.parts-rows img{width:52px;height:52px;object-fit:contain;border-radius:8px;border:1.5px solid #326b98;background:#fff}
.parts-rows b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.parts-rows span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:#506779}
.parts-rows strong{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.parts-rows small{font-size:12px;font-weight:600;color:#506779;text-align:right;white-space:nowrap}
.parts-shot{width:52px;height:52px;box-sizing:border-box;border-radius:8px;border:1.5px dashed #9fb4c4;background:#fff}
.parts-rows i{width:24px;height:24px;border-radius:50%;background:#1f7a4d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2 6.5 11 12.5 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.parts-total{display:flex;align-items:baseline;gap:10px;padding:14px 0 2px;border-top:1px solid #c8d7e3}
.parts-total span{font-size:19px;font-weight:700}
.parts-total strong{font-size:24px;font-weight:750;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.parts-total small{margin-left:auto;font-size:12px;font-weight:600;color:#506779}
.parts-addons{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.parts-addons li{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid #c8d7e3;font-size:13px;font-weight:550}
.parts-addons b{margin-left:6px;font-weight:700;color:#326b98;font-variant-numeric:tabular-nums}
.parts-rock{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:16px;padding-top:14px;border-top:1px solid #dde7ef}
.parts-rock span{display:block;font-size:12px;font-weight:600;color:#506779}
.parts-rock b{font-size:19px;font-weight:700;color:#326b98;font-variant-numeric:tabular-nums}

@keyframes parts-row{from{opacity:0;transform:translateX(26px)}}
@keyframes parts-pop{from{opacity:0;transform:scale(.4)}}
@keyframes parts-fade{from{opacity:0}}
.im-js .home-parts-card.is-in .parts-rows li{animation:parts-row .55s calc(.35s + var(--i) * .16s) cubic-bezier(.16,1,.3,1) both}
.im-js .home-parts-card.is-in .parts-rows i{animation:parts-pop .35s calc(.62s + var(--i) * .16s) ease-out both}
.im-js .home-parts-card.is-in .parts-total{animation:parts-fade .4s 1.4s ease-out both}
.im-js .home-parts-card.is-in .parts-addons li{animation:parts-pop .4s calc(2.2s + var(--i) * .09s) ease-out both}
.im-js .home-parts-card.is-in .parts-label:last-of-type,.im-js .home-parts-card.is-in .parts-rock{animation:parts-fade .5s 2.05s ease-out both}

/* Pond care: a navy band like the other navy sections. */
.home-care{padding-block:88px 100px;background:#0e1c27;color:#ecf6fb}
.home-care h2{color:#fff}
.home-care-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:44px}
.home-care-head p{font-size:17.5px;line-height:1.65;color:#a7c0cf;max-width:48ch}
.home-care-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"photo calc" "tabs tabs";gap:36px 48px;align-items:center}
.care-photo{grid-area:photo;margin:0}
.care-photo img{display:block;width:100%;height:auto;border-radius:8px}
.care-calc{grid-area:calc;margin:0;border-radius:14px;overflow:hidden;background:#f7fafc;border:1px solid #c8d7e3;color:#19384f;font-family:var(--pt-font);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.care-bar{display:flex;align-items:center;height:44px;padding:0 16px;background:#eef4f9;border-bottom:1px solid #c8d7e3;font-size:14px}
.care-panel{display:none;padding:18px 20px 22px}
.care-panel.is-active{display:block}
.care-title{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em}
.care-sub{margin-top:6px;font-size:13.5px;font-weight:600;color:#506779}
.care-body{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.care-fields{display:grid;gap:12px;margin:0}
.care-fields dt{margin-bottom:6px;font-size:13px;font-weight:600}
.care-fields dd{position:relative;display:flex;align-items:center;height:40px;margin:0;padding:0 10px;border-radius:8px;border:1px solid #c8d7e3;background:#fff;font-size:14px}
.care-select::after{content:'';position:absolute;right:13px;top:14px;width:7px;height:7px;border-right:1.5px solid #19384f;border-bottom:1.5px solid #19384f;transform:rotate(45deg)}
.care-result{padding:16px;border-radius:8px;border:1px solid #c8d7e3;background:#eef4f9}
.care-result span{font-size:14px}
.care-result strong{display:block;margin-top:8px;font-size:34px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.care-result em{font-style:normal}
.care-result p{margin-top:12px;font-size:13.5px;line-height:1.55;color:#506779}
.care-tabs{grid-area:tabs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.care-tabs button{position:relative;display:block;width:100%;padding:20px 0 4px;align-self:start;text-align:left;font:inherit;color:#a7c0cf;background:none;border:0;border-top:1px solid rgba(143,211,255,.14);border-radius:0;cursor:pointer}
.care-tabs b{display:block;font-size:22px;font-weight:600;letter-spacing:-.025em;transition:color .3s}
.care-tabs span{display:block;margin-top:8px;max-width:36ch;font-size:15px;line-height:1.6;opacity:.75;transition:opacity .3s}
.care-tabs button:hover b,.care-tabs button[aria-selected=true] b{color:#fff}
.care-tabs button[aria-selected=true] span{opacity:1}
.care-tabs button:focus-visible{outline:2px solid #8cc0e6;outline-offset:4px}
.care-tab-bar{position:absolute;left:0;top:-1px;width:0;height:2px;background:#8cc0e6}
.care-tabs button[aria-selected=true] .care-tab-bar{width:100%}
@keyframes care-bar{from{width:0}to{width:100%}}
@keyframes care-in{from{opacity:0;transform:translateY(6px)}}
.home-care-grid.is-cycling .care-tabs button[aria-selected=true] .care-tab-bar{animation:care-bar 5.5s linear both}
.im-js .care-panel.is-active{animation:care-in .45s ease-out both}

@media(max-width:1000px){
 .home-parts{grid-template-columns:minmax(0,1fr);gap:40px}
 .home-care-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"photo" "tabs" "calc";gap:24px}
 .home-care-head{grid-template-columns:minmax(0,1fr)}
 .care-tabs{gap:12px}
 .care-tabs button{padding:14px 0 4px}
 .care-tabs b{font-size:17px}
 .care-tabs span{display:none}
}
@media(max-width:760px){
 .home-parts{padding-block:56px}
 .home-care{padding-block:56px 64px}
 .home-care-head{margin-bottom:28px}
 .home-parts-card{padding:18px 16px 16px;border-radius:14px}
 .parts-head b{font-size:20px}
 .parts-rows li{grid-template-columns:40px minmax(0,1fr) auto;gap:10px}
 .parts-rows img,.parts-shot{width:40px;height:40px}
 .parts-rows i{display:none}
 .parts-rows b{font-size:14px}
 .parts-rows span{font-size:12px}
 .care-body{grid-template-columns:minmax(0,1fr)}
 .care-tabs b{font-size:14px}
}