/* SoCalScrub: shared styles for index.html and thank-you.html */
:root{
  --paper:#FDF9F0; --panel:#FFFFFF; --ink:#2E2718; --muted:#7A6B4F;
  --line:#EED7A6; --air:#EDBB45; --air-soft:#FDEBC0; --gold:#A87712; --mint:#4E8A3E; --danger:#C4412B;
  --gutter:20px; --pad:24px; --radius:18px;
  color-scheme:light only;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
@media (max-width:520px){ :root{ --gutter:16px; --pad:18px; --radius:16px; } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 12px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-tap-highlight-color:transparent; overflow-wrap:break-word;
}
h1,h2,h3{font-family:"Sora","Inter",system-ui,sans-serif;letter-spacing:-.02em;margin:0;line-height:1.05}
button,input,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
img{max-width:100%;height:auto}
a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}

.wrap{
  max-width:1040px; margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
}

/* Hero */
.hero{padding:56px 0 40px;position:relative;overflow:hidden}
.brand{font-family:"Sora","Inter",system-ui,sans-serif;font-weight:700;font-size:1.3rem;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;width:fit-content}
.logo{flex:0 0 auto;display:block;width:70px;height:auto}
.hero h1{font-size:clamp(2.25rem,9vw,5rem);font-weight:700;letter-spacing:-.035em;margin-top:40px;max-width:11ch;position:relative;z-index:1}
.hero p{max-width:44ch;color:var(--muted);font-size:1.15rem;margin:18px 0 0;position:relative;z-index:1;text-wrap:pretty}
.hero p.tagline{max-width:none}
@media (min-width:960px){.hero p.tagline{white-space:nowrap}}
.hero p.tag2{color:var(--ink);font-weight:700;margin-top:10px}
.dust{position:absolute;inset:0;pointer-events:none}
.dust span{position:absolute;border-radius:50%;background:var(--muted);opacity:.18;animation:blow 2.4s cubic-bezier(.2,.6,.3,1) .4s forwards}
@keyframes blow{to{transform:translate(260px,-40px);opacity:0}}
@media (max-width:520px){
  .hero{padding:22px 0 22px}
  .hero h1{margin-top:22px}
  .hero p{font-size:1.05rem;margin-top:12px}
  .brand{font-size:1.15rem}
  .logo{width:56px}
}

/* Layout. minmax(0,1fr) stops the scrolling day strip from widening the page on phones. */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding-bottom:64px;align-items:start}
.layout > *{min-width:0}
@media (max-width:820px){.layout{grid-template-columns:minmax(0,1fr);gap:4px;padding-bottom:32px}}

.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);margin-bottom:16px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 12px)}
.step-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.step-num{font-family:"Sora","Inter",system-ui,sans-serif;font-weight:600;font-size:1.5rem;color:var(--gold)}
.step h2{font-size:1.35rem;font-weight:700}
.step.locked{opacity:.45;pointer-events:none}
.step-intro{margin:-6px 0 14px;color:var(--muted)}
@media (max-width:520px){
  .step{margin-bottom:12px}
  .step-head{margin-bottom:12px}
  .step h2{font-size:1.2rem}
  .step-num{font-size:1.3rem}
}

/* Choice buttons */
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:8px}}
.choice{text-align:left;background:transparent;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;min-height:48px;cursor:pointer;transition:border-color .15s,background .15s}
@media (hover:hover){.choice:hover{border-color:var(--air)}}
.choice[aria-pressed="true"]{border-color:var(--air);background:var(--air-soft)}
.choice b{display:block;font-weight:600}
.choice small{color:var(--muted);display:block;margin-top:2px;line-height:1.35}
.choice .price{float:right;font-weight:600;color:var(--ink)}
@media (max-width:520px){.grid .choice{padding:12px 14px}}

.mode{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode .choice{padding:18px}
.mode svg{width:28px;height:28px;margin-bottom:8px;color:var(--gold)}
@media (max-width:520px){
  .mode{grid-template-columns:1fr;gap:8px}
  .mode .choice{display:grid;grid-template-columns:28px 1fr;column-gap:12px;padding:14px 16px}
  .mode svg{grid-row:1 / span 2;margin:0}
}

.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.day{flex:0 0 auto;width:64px;padding:10px 0;text-align:center;scroll-snap-align:start}
.day b{font-size:1.3rem;font-family:"Sora","Inter",system-ui,sans-serif;font-weight:600}
.day small{margin:0}
.day:disabled{opacity:.35;cursor:not-allowed;border-style:dashed}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:16px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 12px)}
.slot{text-align:center;padding:10px;font-family:"Sora","Inter",system-ui,sans-serif;font-size:.95rem}
.slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
@media (max-width:520px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Form fields: 16px minimum so iPhones don't zoom in when a field is tapped. */
label{display:block;font-weight:500;font-size:.95rem;margin:14px 0 6px}
.row label,.addr label{margin-top:0}
input,textarea{width:100%;padding:12px 13px;font-size:max(16px,1em);border:1.5px solid var(--line);border-radius:10px;background:var(--paper)}
input:focus,textarea:focus{border-color:var(--air);outline:none}
textarea{min-height:84px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row{grid-template-columns:1fr;gap:0}.row > div + div label{margin-top:14px}}
.err{color:var(--danger);font-size:.9rem;margin-top:10px;min-height:1.2em}
.addr{margin-top:18px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 12px)}
.agree{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin-top:16px;color:var(--muted);cursor:pointer}
.agree input{width:22px;height:22px;margin-top:1px;flex:0 0 auto;accent-color:var(--gold)}

.promise{display:flex;gap:7px;align-items:center;margin:0 0 5px;padding:6px 10px;border-radius:8px;background:var(--air-soft);color:var(--ink);font-weight:500;font-size:.86rem;width:fit-content;max-width:100%}
.promise svg{width:15px;height:15px;color:var(--gold);flex:0 0 auto}

/* Summary card */
.summary{position:sticky;top:calc(env(safe-area-inset-top,0px) + 20px);background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:22px}
@media (max-width:820px){.summary{position:static}}
.summary h3{font-size:1.2rem;margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--paper) 18%,transparent);font-size:.95rem}
.sum-row span:first-child{opacity:.7;flex:0 0 auto}
.sum-row span:last-child{text-align:right;min-width:0}
.sum-total{display:flex;justify-content:space-between;font-family:"Sora","Inter",system-ui,sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:14px 0 16px}
.cta{display:block;width:100%;border:0;border-radius:12px;padding:14px;min-height:50px;background:var(--air);color:#2E2718;font-weight:600;font-size:1rem;text-align:center;text-decoration:none;cursor:pointer}
.cta:disabled{opacity:.4;cursor:not-allowed}
.policy{font-size:.85rem;opacity:.7;margin:12px 0 0}

/* Cancel request */
.cancel{padding:8px 0 40px;max-width:420px}
.cancel h2{font-size:1rem;font-weight:600;margin-bottom:2px}
.cancel-sub{color:var(--muted);font-size:.88rem;margin:0 0 8px}
.cancel-row{display:flex;gap:8px}
.cancel-row input{flex:1;min-width:0;padding:10px 12px;border-radius:10px}
.cancel-btn{width:auto;min-height:46px;padding:10px 16px;font-size:.95rem;border-radius:10px;flex:0 0 auto}
.cancel-done{margin-top:2px;font-size:.92rem;font-weight:500}
.cancel .err{margin-top:6px;min-height:0;font-size:.88rem}

/* Honeypot for Netlify spam filtering: invisible to people, tempting to bots */
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Thank-you page */
.badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--mint);color:#fff;margin-top:34px;position:relative;z-index:1;animation:pop .45s ease-out}
.badge svg{width:28px;height:28px}
.badge.wait{background:var(--air);color:var(--ink)}
.badge.wait svg{animation:spin 1s linear infinite}
.badge.warn{background:var(--air);color:var(--ink)}
.hero .badge + h1{margin-top:16px}
.thanks h1{color:var(--ink)}
.thanks .lead{max-width:48ch}
.note{margin:0;color:var(--ink)}
.note + .note{margin-top:10px}
.muted{color:var(--muted)}
.warnbox{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:var(--air-soft);border:1px solid var(--air);color:var(--ink);font-size:.95rem}
.next-promises{margin-top:14px}
.btn2{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border:1.5px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font-weight:600;text-decoration:none}
@media (hover:hover){.btn2:hover{border-color:var(--air)}}
.summary .ref{font-family:"Sora","Inter",system-ui,sans-serif;letter-spacing:.04em}
.summary .cta{margin-top:16px}
@media (max-width:520px){.badge{margin-top:22px;width:46px;height:46px}}

@keyframes pop{from{transform:scale(.9);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .dust span{animation:none;opacity:0}
  .badge,.badge.wait svg{animation:none}
  html{scroll-behavior:auto}
}