/* LaundryPad – page sections below the hero.
   Kept separate from animation.css so the hero stays exactly as it is. */
.lp{--ink:#4A4A4A;--ink2:#2B3446;--soft:#6B6B6B;--line:#E6E6E6;--tint:#F5F6F7;--blue2:var(--blue,#187adb)}
.lp .box,.foot .box{width:min(1120px,calc(100% - 48px));margin:0 auto}
.lp .sec{padding:clamp(56px,7vw,96px) 0}
.lp h2{font-family:'Merriweather',Georgia,serif;font-weight:400;color:var(--ink);font-size:clamp(28px,3.1vw,42px);line-height:1.22;letter-spacing:.005em;text-wrap:balance}
.lp h3{font-family:Lato,'Helvetica Neue',Arial,sans-serif;font-weight:700;color:var(--ink2)}
.lp .eyebrow{font-family:Lato,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue2);margin-bottom:14px}
.lp .center{text-align:center}
.lp .lead{font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--ink);margin-top:18px;max-width:34em}
.lp img{display:block;max-width:100%;height:auto}

/* How it works */
.how h2{margin-bottom:clamp(36px,4.5vw,60px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.step-head{display:flex;align-items:center;gap:12px}
.step .num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink2);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center}
.step h3{font-size:clamp(18px,1.5vw,21px)}
.step p{margin:10px 0 0 42px;font-size:15.5px;line-height:1.55;color:var(--soft);max-width:19em;min-height:4.7em}
.step img{width:100%;margin-top:clamp(26px,3vw,42px)}
.step-van{position:relative;margin-top:clamp(26px,3vw,42px)}
.step-van img{margin-top:0}
.step-van .van{position:absolute;width:84%;left:8%;bottom:7.4%}

/* split rows */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.app{background:var(--tint)}
.app .art img{width:min(100%,500px);margin:0 auto}

/* feature icon rows */
.feats{list-style:none;display:grid;gap:18px;margin-top:30px;text-align:center}
.feats.four{grid-template-columns:repeat(4,1fr);max-width:540px}
.feats.three{grid-template-columns:repeat(3,1fr);max-width:470px}
.feats li{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:10px}
.feats svg{width:36px;height:36px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s,stroke .25s}
.feats li:hover svg{transform:translateY(-3px);stroke:var(--blue2)}

/* More time: the hero's bench girl + cat in a park */
.park{position:relative}
.park-scene{width:100%}

/* Real care */
.care .art img{width:100%;border-radius:4px}
/* LaundryIllustration: native inline SVG (see tools/art_laundry.py) */
.laundry-illustration{display:block;width:100%;height:auto;border-radius:4px}
.laundry-illustration .drum{transform-box:view-box;animation:li-spin 2.2s linear infinite}
.laundry-illustration .drum.d2{animation-duration:3.1s;animation-direction:reverse}
@keyframes li-spin{to{transform:rotate(360deg)}}
.laundry-illustration .arm-left{animation:li-fold 5s ease-in-out infinite}
.laundry-illustration .arm-right{animation:li-fold 5s ease-in-out -2.5s infinite}
@keyframes li-fold{0%,100%{transform:translateY(0)}50%{transform:translateY(1.2px)}}
.laundry-illustration .towel-settle{animation:li-settle 5s ease-in-out infinite}
@keyframes li-settle{0%,100%{transform:translateY(0)}50%{transform:translateY(.8px)}}
/* his head turns gently while he folds (pivot on the neck, under the chin) */
.laundry-illustration .head{transform-box:view-box;transform-origin:0 0;animation:li-head 4.8s ease-in-out infinite}@keyframes li-head{0%{transform:translate(258px,100px) rotate(0deg) translate(-258px,-100px)}12%{transform:translate(258px,100px) rotate(-2.6deg) translate(-258px,-100px)}24%{transform:translate(258px,100px) rotate(2.2deg) translate(-258px,-100px)}36%{transform:translate(258px,100px) rotate(-1.6deg) translate(-258px,-100px)}48%{transform:translate(258px,100px) rotate(1.2deg) translate(-258px,-100px)}60%{transform:translate(258px,100px) rotate(0deg) translate(-258px,-100px)}100%{transform:translate(258px,100px) rotate(0deg) translate(-258px,-100px)}}
@media (prefers-reduced-motion:reduce){.laundry-illustration *{animation:none!important}}

/* Pricing */
.price-split{grid-template-columns:1.9fr 1fr}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.plan{position:relative;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:26px 16px 22px;text-align:center;transition:transform .25s,box-shadow .25s}
.plan:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(20,32,58,.35)}
.plan h3{font-size:16px;font-weight:700}
.plan .price{font-family:Lato,sans-serif;font-weight:900;font-size:clamp(40px,4vw,54px);line-height:1;color:var(--ink2);margin-top:14px}
.plan .price sup{font-size:.4em;vertical-align:top;position:relative;top:.35em;margin-right:2px}
.plan .per{font-weight:700;font-size:14px;color:var(--ink2);margin-top:6px}
.plan .note{font-size:14px;line-height:1.45;color:var(--soft);margin-top:12px}
.plan.hot{border-color:#9CCAF4;background:#EEF6FE}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue2);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;white-space:nowrap}
.bubble img{width:min(100%,360px);margin:0 auto}

/* Closing CTA with the skyline */
.lp .cta-city{position:relative;padding:clamp(40px,5vw,64px) 0 0;overflow:hidden;text-align:center}
.cta-city .city{width:max(100%,980px);max-width:none;margin:calc(-1 * clamp(96px,11vw,190px) - max(100%,980px) * .04375) 0 0;position:relative;left:50%;transform:translateX(-50%);z-index:0}
.cta-copy{position:relative;z-index:1;padding:0 24px}
.cta-copy .lead{margin:14px auto 0;max-width:26em}
.pill{display:inline-block;margin-top:26px;background:var(--blue2);color:#fff;font-family:Lato,sans-serif;font-weight:700;font-size:17px;padding:15px 40px;border-radius:999px;text-decoration:none;box-shadow:0 12px 26px -10px rgba(24,122,219,.6);transition:background .2s,transform .2s}
.pill:hover{background:#1771ca}
.pill:active{transform:translateY(1px)}

/* Footer */
.foot{background:#FAFAFA;padding:22px 0 24px;font-family:Lato,sans-serif}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .logo img{height:30px;width:auto;display:block}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;height:auto;position:static}
.foot-links a,.legal a{color:#4A4A4A;text-decoration:none;font-size:14px}
.foot-links a:hover,.legal a:hover{color:var(--blue,#187adb)}
.social{display:flex;gap:16px}
.social a{display:grid;place-items:center;width:28px;height:28px;color:#3A3F4A}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social .dot{fill:currentColor;stroke:none}
.social .solid{fill:currentColor;stroke:none}
.social .knock{stroke:#fff;stroke-width:2}
.social a:hover{color:var(--blue,#187adb)}
.legal{text-align:right;font-size:13px;color:#8A8A8A}
.legal .sep{margin:0 6px;color:#CFCFCF}
.legal .copy-r{margin-top:6px;font-size:12px}

/* scroll reveal (only when JS is running) */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* ---------- tablet ---------- */
@media (max-width:980px){
  .price-split{grid-template-columns:1fr}
  .bubble img{width:min(70%,300px)}
  .plans{gap:14px}
}
@media (max-width:860px){
  .steps{gap:18px}
  .step p{margin-left:0;font-size:14.5px}
  .step-head{align-items:flex-start}
  .split{grid-template-columns:1fr}
  .split .text{order:1}
  .split .art{order:2}
  .lp .lead{max-width:none}
  .app .text,.care .text{text-align:left}
  .feats.four,.feats.three{max-width:none}
  .foot-row{flex-direction:column;text-align:center;gap:16px}
  .legal{text-align:center}
}
/* ---------- phone ---------- */
@media (max-width:640px){
  .steps{grid-template-columns:1fr;max-width:460px;margin:0 auto;gap:44px}
  .step p{min-height:0;margin-left:42px}
}
@media (max-width:560px){
  .lp .box,.foot .box{width:calc(100% - 32px)}
  .plans{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}
  .plan.hot{margin-top:8px}
  .feats.four{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .feats li{font-size:13px}
  .cta-copy{padding:0 20px 8px}
  .cta-city .city{width:100%;height:200px;object-fit:cover;object-position:14% 100%;margin-top:6px;left:0;transform:none}
  .foot-links{justify-content:center;gap:18px}
}

/* ======================= round-2 client feedback ======================= */
/* navigation: stays at the top while you scroll (like lemonade.com) */
body>nav{position:sticky;top:0;background:#fff;z-index:60;transition:box-shadow .25s ease}
body>nav.scrolled{box-shadow:0 1px 0 rgba(20,32,58,.06),0 8px 20px -14px rgba(20,32,58,.35)}
.lp section[id],.foot[id]{scroll-margin-top:72px}
/* the hero's grey road melts into the white page, so there is no hard band before "How it works" */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(36px,6vh,72px);background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;z-index:4}

/* mobile menu: a sidebar that slides in from the right, over a dimmed page */
.nav-scrim{position:fixed;inset:0;background:rgba(20,32,58,.38);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:65}
.drawer-head,.drawer-cta{display:none}
@media (max-width:820px){
  body>nav .links{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(86vw,360px);height:100vh;height:100dvh;max-height:none;
    display:flex;flex-direction:column;gap:0;background:#fff;padding:0 0 28px;overflow-y:auto;transform:translateX(104%);
    transition:transform .34s cubic-bezier(.2,.8,.2,1);box-shadow:-20px 0 44px -22px rgba(20,32,58,.45);z-index:70;visibility:hidden}
  body>nav.open .links{transform:none;visibility:visible}
  body>nav .links a{padding:15px 28px;border-top:1px solid #F1F2F4;font-family:Lato,sans-serif;font-size:18px;font-weight:700;color:#2B3446}
  body>nav .links a:hover{color:var(--blue,#187adb)}
  body>nav .links .drawer-head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px 0 28px;border-top:0}
  body>nav .links .drawer-head img{height:24px;width:auto}
  body>nav .links .drawer-close{width:40px;height:40px;border:0;background:none;cursor:pointer;border-radius:8px;display:grid;place-items:center;color:#2B3446}
  body>nav .links .drawer-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
  body>nav .links .drawer-cta{display:block;margin:22px 28px 0;padding:14px 18px;border:0;border-radius:999px;background:var(--blue,#187adb);color:#fff;
    text-align:center;font-size:16px;font-weight:700}
  body>nav .links .drawer-cta:hover{color:#fff;background:#1771ca}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
}

/* tighter, wider layout like the mockup and lemonade.com */
.lp .box,.foot .box{width:min(1600px,calc(100% - 64px))}
.lp .sec{padding:clamp(40px,4.6vw,72px) 0}
.how h2{margin-bottom:clamp(26px,3.2vw,44px)}
.step img,.step-van{margin-top:clamp(4px,.8vw,12px)}
.step-van img{margin-top:0}
.step p{min-height:3.2em}
.step .num{background:var(--blue2)}

/* pricing: on smaller screens the basket sits beside the heading instead of floating alone under the plans */
@media (max-width:980px){
  .pricing .price-split{position:relative}
  .pricing .bubble{position:absolute;top:-6px;right:0;width:clamp(128px,28vw,230px);margin:0}
  .pricing .bubble img{width:100%}
  .pricing .eyebrow,.pricing h2{padding-right:clamp(132px,30vw,240px)}
}

/* closing CTA: less space above, skyline capped on very wide screens and faded at its ends */
.lp .cta-city{padding-top:clamp(12px,2vw,28px);padding-bottom:0}
.cta-city{--cw:min(max(100%,980px),1680px)}
.cta-city .city{width:var(--cw);margin-top:calc(-1 * clamp(96px,11vw,190px) - var(--cw) * .04375)}
@media (min-width:1681px){.cta-city .city{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}}

/* footer: logo | links | social on one row, legal line underneath; stacks neatly on phones */
.foot{padding:26px 0 22px}
.foot-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo links social" "legal legal legal";align-items:center;gap:18px 32px}
.foot .logo{grid-area:logo}
.foot-links{grid-area:links;justify-content:center}
.social{grid-area:social}
.legal{grid-area:legal;display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;border-top:1px solid #ECECEC;padding-top:14px;text-align:left}
.legal p{margin:0}
.legal .copy-r{margin-top:0}
@media (max-width:860px){
  .foot-row{grid-template-columns:1fr;grid-template-areas:"logo" "links" "social" "legal";justify-items:center;text-align:center;gap:18px}
  .foot-links{justify-content:center;gap:10px 22px}
  .legal{flex-direction:column;justify-content:center;width:100%;gap:6px;text-align:center}
}
@media (max-width:560px){.lp .box,.foot .box{width:calc(100% - 32px)}}
.feats svg .wheel{fill:#fff}
.feats svg .spark{stroke:var(--blue2)}

/* footer: tighter, and its logo lines up exactly with the header logo */
.foot{padding:14px 0 12px}
.foot .box{width:calc(100% - 80px);max-width:none}
.foot-row{gap:10px 32px}
.legal{padding-top:10px}
@media (max-width:860px){.foot-row{gap:12px}}
@media (max-width:640px){.foot .box{width:calc(100% - 32px)}}
.foot .logo img{height:34px}
@media (max-width:860px){
  .foot-row{justify-items:start;text-align:left}
  .foot-links{justify-content:flex-start}
  .legal{align-items:flex-start;text-align:left}
}
@media (max-width:640px){.foot .logo img{height:26px}}
@media (max-width:860px){.social{margin-left:-4px}}
.step-van .van{bottom:5.9%}

/* header scrolls away with the first page (not pinned) */
body>nav{position:relative;box-shadow:none}
body>nav.scrolled{box-shadow:none}

/* ---- responsive fixes (round 3) ---- */
/* pricing on tablets and phones: the basket sits beside the heading, the plans run full width underneath */
@media (max-width:980px){
  .pricing .price-split{display:grid;grid-template-columns:1fr clamp(120px,28vw,230px);grid-template-areas:"eye art" "head art" "plans plans";
    column-gap:16px;align-items:end;position:static}
  .pricing .price-split>.text{display:contents}
  .pricing .eyebrow{grid-area:eye;padding-right:0}
  .pricing h2{grid-area:head;padding-right:0}
  .pricing .plans{grid-area:plans}
  .pricing .bubble{grid-area:art;position:static;width:100%;margin:0;align-self:center}
  .pricing .bubble img{width:100%}
}
/* footer on tablets and phones: logo with the social icons on the same row, links below, legal line last */
@media (max-width:860px){
  .foot-row{grid-template-columns:1fr auto;grid-template-areas:"logo social" "links links" "legal legal";justify-items:stretch;text-align:left;gap:14px 16px}
  .foot .logo{justify-self:start}
  .social{justify-self:end;margin-left:0}
  .foot-links{justify-content:flex-start;gap:10px 22px}
  .legal{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}
}
@media (max-width:480px){
  .legal{flex-direction:column;align-items:flex-start;gap:4px}
  .social{gap:10px}
}
@media (max-width:980px){
  .pricing .eyebrow{align-self:end;margin-bottom:10px}
  .pricing h2{align-self:start;margin:0}
  .pricing .plans{margin-top:clamp(18px,4vw,30px)}
}

/* pricing: one pay-per-load package (replaces the three plans) */
.price-sub{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--soft);margin-top:10px}
.pricing .plans.single{display:block;max-width:620px;margin-top:clamp(20px,2.4vw,30px)}
.pricing .plans.single .plan{padding:clamp(22px,2.4vw,30px) 20px clamp(20px,2.2vw,26px)}
.pricing .plans.single .plan h3{font-size:clamp(19px,1.6vw,23px)}
.pricing .plans.single .from{font-weight:700;font-size:15px;color:var(--ink2);margin-top:10px}
.pricing .plans.single .price{color:var(--blue2);font-size:clamp(58px,5.6vw,78px);margin-top:6px}
.pricing .plans.single .price .star{font-size:.36em;vertical-align:top;position:relative;top:-.05em;margin-left:2px}
.pricing .plans.single .per{font-size:clamp(16px,1.35vw,19px);margin-top:4px}
.pricing .plans.single .note{font-size:clamp(15px,1.2vw,17px);margin-top:14px}
.pricing .fine{font-size:12.5px;line-height:1.5;color:var(--soft);margin-top:12px}
@media (max-width:980px){
  .pricing .price-split{grid-template-areas:"eye art" "head art" "sub sub" "plans plans"}
  .pricing .price-sub{grid-area:sub;margin-top:-16px}
  .pricing .plans.single{max-width:none;margin-top:-6px}
}
@media (max-width:560px){.pricing .plans.single{max-width:none}}
@media (min-width:600px) and (max-width:980px){.pricing .price-split{grid-template-areas:"eye art" "head art" "sub art" "plans plans"}.pricing .price-sub{align-self:start}}