/* Home Beautification planner — scoped to .hbp so it can sit inside any page */
.hbp{--sky:#E4F0F5;--white:#FFFFFF;--ink:#26343A;--muted:#56666E;--line:#C5DAE2;--soft:#E1ECF1;--gold:#C9A227;--gold-pale:#F5ECCF;--gold-wash:#FBF6E6;--gold-ink:#7A5E0B;--wa:#25D366;
  font-family:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);font-size:16px;line-height:1.55;display:flex;flex-direction:column;scroll-margin-top:100px}
.hbp *,.hbp *::before,.hbp *::after{box-sizing:border-box;margin:0;padding:0}
.hbp button{font-family:inherit;cursor:pointer;color:inherit}
.hbp a{color:inherit;text-decoration:none}
.hbp button:focus-visible,.hbp a:focus-visible,.hbp input:focus-visible,.hbp textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hbp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.hbp-back{width:44px;height:44px;border-radius:50%;background:var(--sky);border:none;display:flex;align-items:center;justify-content:center}
.hbp-back[hidden]{visibility:hidden;display:flex}
.hbp-count{font-size:13px;color:var(--muted)}
.hbp-logo img{width:52px;height:52px;display:block}
.hbp-prog{height:3px;background:var(--line);border-radius:2px;margin:12px 0 18px}
.hbp-prog i{display:block;height:100%;background:var(--gold);border-radius:2px;transition:width .3s}
.hbp-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;background:var(--sky);border-radius:999px;font-size:13px;margin-bottom:12px}
.hbp h2.q{font-size:clamp(24px,3vw,28px);font-weight:300;line-height:1.2;letter-spacing:-.01em;text-wrap:balance;margin:0}
.hbp .sub{margin-top:6px;font-size:15px;color:var(--muted)}
.hbp .body{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.hbp .lbl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hbp .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hbp .opt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:13px;border-radius:16px;background:var(--sky);border:1px solid transparent;font-size:15px;min-height:62px;transition:border-color .15s,background .15s}
.hbp .opt small{font-size:12.5px;color:var(--muted);line-height:1.35}
.hbp .opt svg{margin-bottom:4px}
.hbp .opt[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash)}
.hbp .opt[aria-pressed="true"] svg{color:var(--gold-ink)}
.hbp .opt.wide{flex-direction:row;align-items:center;gap:14px}
.hbp .opt.wide svg{margin:0;flex-shrink:0}
.hbp .chips{display:flex;flex-wrap:wrap;gap:8px}
.hbp .chip{min-height:42px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-size:14px}
.hbp .chip[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-pale)}
.hbp .tabs{display:flex;flex-wrap:wrap;gap:8px}
.hbp .tab{min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:transparent;font-size:14px}
.hbp .tab[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.hbp .items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hbp .item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:100px;padding:10px 6px;border-radius:14px;border:1px solid transparent;background:var(--sky);font-size:13px;line-height:1.25;text-align:center}
.hbp .item[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash);color:var(--gold-ink)}
.hbp .photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hbp .photo{position:relative;border-radius:14px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--sky);aspect-ratio:4/3;max-width:100%}
.hbp .photo img{width:100%;height:100%;object-fit:cover;display:block}
.hbp .photo span{position:absolute;left:6px;bottom:6px;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--white)}
.hbp .photo[aria-pressed="true"]{border-color:var(--gold)}
.hbp .photo[aria-pressed="true"]::after{content:"✓";position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.hbp .card{background:var(--sky);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.hbp .field{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hbp .field input,.hbp .field textarea{font-family:inherit;font-size:17px;color:var(--ink);padding:10px 0;border:none;border-bottom:1px solid var(--line);background:transparent;letter-spacing:0;text-transform:none;border-radius:0;width:100%}
.hbp .field textarea{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:16px;background:var(--white)}
.hbp .phone{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.hbp .phone span{font-size:17px;color:var(--ink);letter-spacing:0}
.hbp .phone input{flex:1;min-width:0;border-bottom:none}
.hbp .err{font-size:13.5px;color:#A1361F;min-height:1.2em}
.hbp .note{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5}
.hbp .note svg{flex-shrink:0;margin-top:2px}
.hbp .tip{font-size:13.5px;color:var(--muted);background:var(--sky);border-radius:14px;padding:12px 14px;border-left:3px solid var(--gold)}
.hbp .level{display:flex;flex-direction:column;gap:5px;width:100%;padding:14px 16px;border-radius:16px;background:var(--sky);border:1px solid transparent;text-align:left}
.hbp .level[aria-pressed="true"]{border-color:var(--gold);background:#FFFDF6}
.hbp .level b{font-size:17px;font-weight:500}
.hbp .level small{font-size:13.5px;color:var(--muted)}
.hbp .level ul{display:none;list-style:none;font-size:13.5px;gap:4px;padding-top:8px;border-top:1px solid #EADFBD}
.hbp .level[aria-pressed="true"] ul{display:grid}
.hbp .days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.hbp .day{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:70px;justify-content:center;border-radius:14px;background:var(--sky);border:1px solid transparent;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.hbp .day b{font-size:20px;font-weight:400;letter-spacing:0}
.hbp .day[aria-pressed="true"]{background:var(--ink);color:#fff}
.hbp .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hbp .slot{min-height:46px;border-radius:14px;border:1px solid var(--line);background:transparent;font-size:14px}
.hbp .slot[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-pale)}
.hbp .sum{display:flex;flex-direction:column;background:var(--sky);border-radius:18px;padding:2px 14px;max-height:320px;overflow:auto}
.hbp .sum div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.hbp .sum div:last-child{border-bottom:none}
.hbp .sum span:first-child{color:var(--muted);font-size:13px}
.hbp-foot{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:8px}
.hbp .go{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:16px;background:var(--gold);color:var(--ink);font-size:15.5px;font-weight:500;letter-spacing:.03em;border:none;width:100%}
.hbp .go:disabled{opacity:.45;cursor:default}
.hbp .alt{text-align:center;font-size:13.5px;color:var(--muted);background:none;border:none;padding:8px}
.hbp .done{text-align:center;align-items:center}
.hbp .big{width:72px;height:72px;border-radius:50%;background:var(--gold-pale);display:flex;align-items:center;justify-content:center;color:var(--gold-ink);margin:6px auto}
.hbp .wabtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:16px;background:var(--wa);color:#fff;font-size:15.5px;font-weight:500;width:100%}
@media (max-width:600px){.hbp .photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.hbp *{transition:none!important}}