:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: quiz "stage" card on the left, sticky live cart on the right; on phones the cart becomes a bottom bar + sheet */
:root{
  --bg:#F2F4EC;
  --surface:#FFFFFF;
  --ink:#1D2E24;
  --muted:#5C6B60;
  --line:#DCE1D3;
  --forest:#2E5B44;
  --forest-ink:#FFFFFF;
  --gold:#A87C2E;
  --gold-soft:#F4EAD3;
  --tint:#E7EEE3;
  --danger:#B3412E;
  --shadow:0 1px 2px rgba(29,46,36,.06),0 12px 32px -12px rgba(29,46,36,.18);
  --display:"Young Serif",Georgia,"Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* Single light look by design */
:root{color-scheme:light;--blush:#EBC3B4}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* gingham band */
.gingham{height:14px;background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--forest) 28%,transparent) 0 14px,transparent 14px 28px),
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--forest) 28%,transparent) 0 7px,transparent 7px 14px);
  background-color:color-mix(in srgb,var(--forest) 8%,var(--bg))}

header.top{padding-inline:20px;padding-block:18px 10px;max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.25rem;letter-spacing:.01em}
.brand svg{color:var(--gold)}
.stepcount{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.progress{max-width:1140px;margin:0 auto;padding-inline:20px}
.track{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--forest),var(--gold));border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.steplabels{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;color:var(--muted);letter-spacing:.04em;gap:4px}
.steplabels span.on{color:var(--ink);font-weight:600}
@media (max-width:640px){.steplabels{display:none}}

.shell{max-width:1140px;margin:0 auto;padding-inline:20px;padding-block:24px 140px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
@media (max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}}

.stage{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(20px,4vw,40px);min-width:0}
.step{animation:in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:.0;transform:translateY(10px)}to{opacity:1;transform:none}}
.eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 8px}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0 0 10px}
h1{font-size:clamp(2rem,5vw,2.9rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.2rem)}
.lede{color:var(--muted);max-width:56ch;margin:0 0 26px}

/* fields */
.fields{display:grid;gap:16px;max-width:560px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
label.f{display:grid;gap:6px;font-size:.85rem;font-weight:600}
.f input{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-size:1rem;transition:border-color .2s,background .2s}
.f input:focus{outline:none;border-color:var(--forest);background:var(--surface)}
.f input.bad{border-color:var(--danger)}
.f select{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-size:1rem;color:var(--ink)}
.f select:focus{outline:none;border-color:var(--forest);background:var(--surface)}
.f select.bad{border-color:var(--danger)}
.pickupbox{margin-bottom:18px;text-align:left}
.pickupback{margin:6px 2px 0;font-size:.82rem;color:var(--muted)}
.err{color:var(--danger);font-size:.85rem;min-height:1.2em;margin-top:10px;font-weight:500}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:.85rem}
.trust span{display:flex;align-items:center;gap:6px}
.trust svg{color:var(--forest)}

/* option cards */
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.opt{position:relative;text-align:left;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:6px;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.opt:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--forest) 45%,var(--line));box-shadow:var(--shadow)}
.opt[aria-pressed="true"]{border-color:var(--forest);background:var(--tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--forest) 18%,transparent)}
.opt .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);margin-bottom:6px}
.opt[aria-pressed="true"] .ic{background:var(--forest);color:var(--forest-ink)}
.opt .t{font-weight:700;font-size:1.02rem}
.opt .d{color:var(--muted);font-size:.86rem;line-height:1.4}
.opt .p{font-weight:700;color:var(--forest);margin-top:4px}
.opt .p small{color:var(--muted);font-weight:500}
.opt .tick{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:all .2s}
.opt[aria-pressed="true"] .tick{background:var(--forest);border-color:var(--forest);color:var(--forest-ink)}
.opt .tick svg{opacity:0;transition:opacity .2s}
.opt[aria-pressed="true"] .tick svg{opacity:1}
.badge{display:inline-block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:var(--gold);color:var(--surface);padding:3px 8px;border-radius:99px;justify-self:start}

.followup{margin-top:22px;max-width:560px}
/* "Steal our locations" (Dejon, Oct 26, his Picnic setting step design) */
.spots{margin-top:36px;text-align:left}
.spots-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.spots-head h3{margin:0;font:400 1.5rem/1.2 var(--display);color:var(--ink)}
.spots-hint{font-size:.82rem;color:var(--muted)}
.spot-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.spot{position:relative;display:block;width:100%;margin:0;padding:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#DFE6D2,#C9D6BD);border:1px solid var(--line);cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,box-shadow .15s}
.spot .spimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .4s ease}
.spot:hover .spimg{transform:scale(1.04)}
.spot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,34,27,.72) 0%,rgba(20,34,27,0) 55%);pointer-events:none}
.spot .spname{position:absolute;left:14px;right:44px;bottom:12px;z-index:1;color:#fff;font-weight:600;font-size:.95rem;line-height:1.25}
.spot .tick{position:absolute;top:10px;right:10px;z-index:1;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);background:rgba(20,34,27,.25);display:grid;place-items:center;color:#fff;transition:all .2s}
.spot .tick svg{opacity:0;transition:opacity .2s}
.spot[aria-pressed="true"]{border-color:var(--forest);box-shadow:0 0 0 3px var(--forest)}
.spot[aria-pressed="true"] .tick{background:var(--forest);border-color:var(--forest)}
.spot[aria-pressed="true"] .tick svg{opacity:1}
@media (max-width:520px){.spots-head{flex-direction:column;align-items:flex-start;gap:2px}}
@media (prefers-reduced-motion:reduce){.spot .spimg{transition:none}}

/* guests */
.guests{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:6px 0 18px}
/* Dejon's 3D guest table (Oct 25, his guest-table.html) */
.gt-stage{position:relative;height:340px;border-radius:18px;background:radial-gradient(120% 90% at 50% 35%,#FBF9F4 0%,#F6F3EC 55%,#EFEBE1 100%);overflow:hidden;margin:0 0 22px;touch-action:none}
.gt-stage canvas{display:block;width:100%!important;height:100%!important;cursor:grab}
.gt-stage canvas:active{cursor:grabbing}
.gt-badge{position:absolute;left:14px;top:12px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--forest)}
.gt-badge:empty{display:none}
.gt-hint{position:absolute;right:14px;bottom:10px;font-size:12px;color:#8C8F86;pointer-events:none;transition:opacity .6s}
@media (max-width:560px){.gt-stage{height:260px}}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:99px;overflow:hidden;background:var(--bg)}
.stepper button{width:56px;height:56px;border:0;background:transparent;font-size:1.6rem;cursor:pointer}
.stepper button:hover{background:var(--tint)}
.stepper output{min-width:76px;text-align:center;font-family:var(--display);font-size:2.2rem}
input[type=range]{width:100%;max-width:560px;accent-color:var(--forest)}
.note{background:var(--tint);border-radius:12px;padding:12px 16px;font-size:.9rem;color:var(--ink);max-width:560px}
.note b{color:var(--forest)}

/* addons */
.adds{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.add{display:flex;gap:14px;align-items:center;text-align:left;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .18s,background .18s,transform .18s}
.add:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--forest) 45%,var(--line))}
.add[aria-pressed="true"]{border-color:var(--forest);background:var(--tint)}
.add .box{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--forest-ink);transition:all .2s}
.add[aria-pressed="true"] .box{background:var(--forest);border-color:var(--forest)}
.add .box svg{opacity:0}.add[aria-pressed="true"] .box svg{opacity:1}
.add .txt{flex:1;min-width:0}
.add .addimg{flex:none;width:64px;height:64px;border-radius:10px;background-size:cover;background-position:center}
.add .t{font-weight:600;display:block}
.add .d{font-size:.8rem;color:var(--muted)}
.add .p{font-weight:700;color:var(--forest);white-space:nowrap;text-align:right}
.add .p small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.btn{border:0;cursor:pointer;border-radius:99px;padding:15px 26px;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:10px;transition:transform .15s,box-shadow .2s,background .2s}
.btn.primary{background:var(--forest);color:var(--forest-ink);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--forest) 70%,transparent)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.primary:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--muted);padding-inline:6px}
.btn.ghost:hover{color:var(--ink)}
.btn.ghost[disabled]{display:none}

/* checkout */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
@media (max-width:760px){.co{grid-template-columns:minmax(0,1fr)}}
.paychoice{display:grid;gap:10px;margin-bottom:18px}
.pay{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;cursor:pointer;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface)}
.pay[aria-pressed="true"]{border-color:var(--forest);background:var(--tint)}
.pay .t{font-weight:700}.pay .d{font-size:.82rem;color:var(--muted)}
.pay .amt{font-weight:700;color:var(--forest)}
.recap{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px}
.recap h3{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 10px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem;margin:0 0 14px}
.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.secure{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.8rem;margin-top:12px}
.add.nothanks .txt .t{font-weight:600}
.add.nothanks{border-style:dashed}
.add.nothanks[aria-pressed="true"]{border-style:solid}
.pay .ddin{display:block;font-size:.76rem;color:var(--forest);margin-top:3px}
.agree{color:var(--muted);font-size:.8rem;line-height:1.5;margin:8px 0 0}
/* Self Pickup's rental agreement: read it, then the box above the checkout button */
.agreebox{margin-top:18px;padding:16px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface)}
.agreebox.err{border-color:var(--danger,#B3412E)}
.btn.agreeread{background:transparent;color:var(--forest);border:1.5px solid var(--forest)}
.btn.agreeread:hover{background:color-mix(in srgb,var(--forest) 8%,transparent)}
.agreecheck{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:.88rem;line-height:1.5;cursor:pointer}
.agreecheck input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--forest);cursor:pointer}
.agreecheck input:disabled{cursor:not-allowed}
.agreecheck input:disabled+span{opacity:.6}
.agreehint{margin:8px 0 0 32px;font-size:.78rem;color:var(--muted)}
body.agopen{overflow:hidden}
.agmodal{position:fixed;inset:0;z-index:80;background:rgba(20,28,22,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.agmodal[hidden]{display:none}
.agpanel{background:#FFFFFF;border-radius:20px;width:min(820px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);overflow:hidden}
.aghead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #E4E2D6;color:#2F4A35;font-family:Georgia,"Times New Roman",serif}
.agx{border:0;background:transparent;font-size:28px;line-height:1;color:#5F665F;cursor:pointer;width:40px;height:40px;border-radius:50%}
.agx:hover{background:#F1F0E6}
.agbody{overflow:auto;padding:8px 28px 20px;overscroll-behavior:contain}
.agfoot{padding:12px 18px;border-top:1px solid #E4E2D6;display:flex;justify-content:flex-end}
@media (max-width:560px){.agbody{padding:6px 16px 16px}.agmodal{padding:0;align-items:stretch}.agpanel{border-radius:0;max-height:100dvh}}
.agree a,.legal a{color:inherit;text-underline-offset:3px}
.agree a:hover,.legal a:hover{color:var(--forest)}
.legal{max-width:640px;margin:16px auto 0;text-align:center;color:var(--muted);font-size:.8rem}

/* cart */
.cart{position:sticky;top:calc(env(safe-area-inset-top,0px) + 20px);background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
@media (max-width:900px){.cart{display:none}}
.cart .head{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--line)}
.cart .head h3{margin:0;font-family:var(--display);font-weight:400;font-size:1.2rem}
.count{font-size:.75rem;font-weight:700;background:var(--gold-soft);color:var(--gold);padding:3px 10px;border-radius:99px}
.lines{list-style:none;margin:0;padding:10px 20px;display:grid;gap:2px;max-height:46vh;overflow:auto}
.lines li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:.9rem;animation:pop .35s ease}
.lines li span:first-child{min-width:0}
.lines li small{display:block;color:var(--muted);font-size:.75rem}
.lines li .a{font-weight:600;white-space:nowrap}
.lines .empty{color:var(--muted);font-style:italic;justify-content:flex-start}
@keyframes pop{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.totalrow{position:relative;padding:18px 20px;background:var(--tint);display:flex;justify-content:space-between;align-items:baseline}
.totalrow .lbl{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.big{font-family:var(--display);font-size:2.1rem;color:var(--forest);line-height:1}
.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.12)}}
.plus{position:absolute;right:20px;top:-6px;font-weight:700;color:var(--gold);font-size:.95rem;pointer-events:none;animation:rise 1.1s ease forwards}
@keyframes rise{from{opacity:0;transform:translateY(8px)}20%{opacity:1}to{opacity:0;transform:translateY(-26px)}}
.cart .foot{padding:12px 20px 18px;font-size:.78rem;color:var(--muted)}

/* mobile bar */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35);padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){.mbar{display:block}}
.mbar .inner{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px}
.mbar button.toggle{border:0;background:transparent;cursor:pointer;display:flex;align-items:center;gap:10px;padding:4px 0;text-align:left}
.mbar .big{font-size:1.7rem}
.mbar .plus{right:auto;left:110px;top:-10px}
.sheet .lines{max-height:40vh;padding-inline:0}
.sheet{margin-top:10px;border-top:1px dashed var(--line)}

/* confirmation */
.confirm{text-align:center;padding-block:10px}
.seal{width:92px;height:92px;margin:0 auto 18px;border-radius:50%;background:var(--forest);color:var(--forest-ink);display:grid;place-items:center;animation:seal .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes seal{from{transform:scale(.3) rotate(-30deg);opacity:0}}
.ref{display:inline-block;font-weight:700;letter-spacing:.12em;background:var(--gold-soft);color:var(--gold);padding:6px 14px;border-radius:99px;margin-bottom:22px}
.confirm .recap{text-align:left;max-width:520px;margin:0 auto 24px}
.next{list-style:none;padding:0;margin:0 auto;max-width:520px;display:grid;gap:12px;text-align:left}
.next li{display:flex;gap:14px;align-items:flex-start}
.next .dot{flex:none;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--forest);font-weight:700;display:grid;place-items:center;font-size:.85rem}
.next b{display:block}
.next span{color:var(--muted);font-size:.9rem}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30}

/* style cards */
.styles{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.opt.styl{padding:0 0 16px;overflow:hidden}
.opt.styl>*:not(.scene):not(.tick){margin-inline:16px}
.opt.styl .badge{margin-top:2px}
.scene{display:block;aspect-ratio:200/120;max-width:100%;overflow:hidden;border-bottom:1px solid var(--line);margin-bottom:8px}
.scene svg{width:100%;height:100%;display:block;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.opt.styl:hover .scene svg,.opt.styl[aria-pressed="true"] .scene svg{transform:scale(1.07)}
.bloom{transform-origin:100px 72px;transform-box:view-box}
.opt.styl:hover .bloom,.opt.styl[aria-pressed="true"] .bloom{animation:sway 1.6s ease-in-out infinite}
@keyframes sway{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.flame{animation:flick 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flick{50%{transform:scaleY(1.25) scaleX(.85)}}
.opt.styl .tick{background:var(--surface)}
.opt.styl[aria-pressed="true"] .tick{background:var(--forest)}

/* calendar */
.cal{max-width:440px;background:var(--bg);border:1.5px solid var(--line);border-radius:18px;padding:16px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font-family:var(--display);font-size:1.3rem}
.cal-nav{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-size:1.3rem;cursor:pointer;transition:transform .2s,border-color .2s}
.cal-nav:hover:not(:disabled){transform:scale(1.08);border-color:var(--forest)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-dow span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-bottom:6px}
.cal-grid.slide-l{animation:inR .4s cubic-bezier(.2,.9,.25,1)}
.cal-grid.slide-r{animation:inL .4s cubic-bezier(.2,.9,.25,1)}
.day{position:relative;aspect-ratio:1;max-width:100%;border:0;border-radius:12px;background:transparent;cursor:pointer;font-weight:600;font-size:.95rem;transition:background .15s,transform .15s,color .15s}
.day:hover:not(:disabled){background:var(--tint);transform:scale(1.08)}
.day:disabled{color:var(--line);cursor:default;text-decoration:line-through}
.day.today{box-shadow:inset 0 0 0 1.5px var(--line)}
.day.blocked:disabled{color:color-mix(in srgb,var(--muted) 55%,transparent);background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--line) 70%,transparent) 5px 6px)}
.day.full:disabled{color:color-mix(in srgb,var(--muted) 55%,transparent)}
.cal-legend .na{width:12px;height:12px;border-radius:3px;background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line) 3px 4px);box-shadow:inset 0 0 0 1px var(--line)}
.scene img,.bigprev img,.thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* centerpiece photos (set in the admin); the box has no content of its own, so it is stretched to the card */
.cpscene{width:100%;justify-self:stretch}
.cpimg{display:block;width:100%;height:100%;background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.opt.styl:hover .cpimg,.opt.styl[aria-pressed="true"] .cpimg{transform:scale(1.05)}
.bigprev img{animation:photoin .5s ease}
@keyframes photoin{from{opacity:.3;transform:scale(1.03)}to{opacity:1;transform:none}}
.day.wknd:not(:disabled)::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.day[aria-pressed="true"]{background:var(--forest);color:var(--forest-ink);animation:tickpop .4s cubic-bezier(.3,1.8,.5,1)}
.day[aria-pressed="true"]::after{background:var(--forest-ink)!important}
.cal-picked{margin:12px 0 0;font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-picked b{color:var(--forest)}
.cal-legend{font-size:.75rem;color:var(--muted);margin-left:auto;display:flex;align-items:center;gap:6px}
.cal-legend i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}

/* ---------- fun layer ---------- */
body{position:relative;overflow-x:hidden}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0}
header.top,.progress,.shell{position:relative;z-index:1}

/* direction-aware step transitions */
.step.fwd{animation:inR .55s cubic-bezier(.2,.9,.25,1)}
.step.bwd{animation:inL .55s cubic-bezier(.2,.9,.25,1)}
@keyframes inR{from{opacity:0;transform:translateX(40px) rotate(.6deg)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translateX(-40px) rotate(-.6deg)}to{opacity:1;transform:none}}

/* staggered entrances for cards, fields and headings */
.stagger>*{animation:rise-in .6s cubic-bezier(.2,1.2,.35,1) both;animation-delay:calc(var(--i,0)*70ms + 120ms)}
@keyframes rise-in{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.step h1 .w,.step h2 .w{display:inline-block;animation:word .7s cubic-bezier(.2,1.3,.35,1) both;animation-delay:calc(var(--i)*55ms)}
@keyframes word{from{opacity:0;transform:translateY(.5em) rotate(4deg)}to{opacity:1;transform:none}}

/* selection pop + icon wiggle */
.opt.picked{animation:picked .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes picked{35%{transform:scale(1.045) translateY(-3px)}}
.opt:hover .ic{animation:wiggle .6s ease}
@keyframes wiggle{25%{transform:rotate(-10deg) scale(1.08)}60%{transform:rotate(8deg) scale(1.08)}}
.opt[aria-pressed="true"] .tick{animation:tickpop .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes tickpop{from{transform:scale(0)}}
.add[aria-pressed="true"] .box{animation:tickpop .35s cubic-bezier(.3,1.8,.5,1)}
.add.picked{animation:picked .45s cubic-bezier(.3,1.6,.5,1)}

/* sparkle burst + flying item */
.spark{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:40}
.flyer{position:fixed;z-index:45;pointer-events:none;padding:5px 11px;border-radius:99px;background:var(--gold);color:#fff;font-weight:700;font-size:.85rem;box-shadow:0 8px 20px -6px rgba(168,124,46,.6)}

/* reaction toast */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 18px);z-index:50;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:99px;font-weight:600;font-size:.95rem;box-shadow:0 14px 30px -10px rgba(29,46,36,.5);display:flex;gap:10px;align-items:center;white-space:nowrap;max-width:calc(100vw - 32px);animation:toast 2.4s cubic-bezier(.2,1.2,.35,1) forwards}
.toast svg{color:var(--gold);flex:none}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-24px) scale(.9)}12%{opacity:1;transform:translate(-50%,0) scale(1)}82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}

/* progress shimmer + traveling basket */
.track{position:relative;overflow:visible}
.fill{position:relative;overflow:hidden}
.fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);animation:shimmer 2.2s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.walker{position:absolute;top:50%;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--surface);border:2px solid var(--gold);display:grid;place-items:center;color:var(--gold);box-shadow:var(--shadow);transition:left .6s cubic-bezier(.3,1.4,.5,1)}
.walker.hop{animation:hop .6s ease}
@keyframes hop{40%{transform:translateY(-10px) rotate(-12deg)}}

/* buttons */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .6s}
.btn.primary:hover::after{left:130%}
.btn.primary .arr{display:inline-block;transition:transform .25s}
.btn.primary:hover .arr{transform:translateX(5px)}
.btn.primary.ready{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--forest) 14%,transparent),0 8px 20px -8px color-mix(in srgb,var(--forest) 70%,transparent)}}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* guests number flip */
.flip{animation:flip .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes flip{from{transform:translateY(-40%) scale(.7);opacity:.2}}
.people{display:flex;flex-wrap:wrap;gap:6px;max-width:560px;margin:4px 0 18px;min-height:30px}
.people span{width:24px;height:24px;border-radius:50% 50% 45% 45%;background:var(--gold-soft);color:var(--gold);display:grid;place-items:center;animation:tickpop .35s cubic-bezier(.3,1.8,.5,1) both}
.people span.inc{background:var(--tint);color:var(--forest)}

/* cart extras */
.cart{transition:transform .3s}
.cart.jiggle{animation:jig .5s ease}
@keyframes jig{30%{transform:rotate(-1.2deg) scale(1.01)}60%{transform:rotate(1deg)}}
.meter{padding:4px 20px 16px;background:var(--tint)}
.mhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.mt{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.mamt{font-size:.78rem;color:var(--muted)}.mamt b{color:var(--ink)}
.meter .bar,.mmeter .bar{position:relative;height:8px;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.meter .bar i,.mmeter .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--forest),var(--gold));transition:width .7s cubic-bezier(.3,1.3,.5,1);position:relative;overflow:hidden}
.meter .bar i::after,.mmeter .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);animation:shimmer 2.2s linear infinite}
.goal{position:absolute;right:-6px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--surface);border:2px solid var(--line);color:var(--muted);display:grid;place-items:center;transition:background .3s,border-color .3s,color .3s}
.won .goal{background:var(--gold);border-color:var(--gold);color:#fff;animation:goalpop 1.8s ease-in-out infinite}
@keyframes goalpop{0%,100%{transform:scale(1)}50%{transform:scale(1.15);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 22%,transparent)}}
.meter p{margin:12px 0 8px;font-size:.8rem;color:var(--ink);line-height:1.4}
.won b.won,b.won{color:var(--forest)}
.rw{display:flex;flex-wrap:wrap;gap:6px}
.rw span{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:99px;padding:4px 9px}
.rw span[hidden]{display:none}
.meter.won .rw span{color:var(--forest);border:1px solid color-mix(in srgb,var(--forest) 40%,transparent);background:var(--surface)}
.mmeter{display:none}
.lines li .a s{color:var(--muted);font-weight:500;margin-right:2px}
.freetag{color:var(--forest);letter-spacing:.06em;font-size:.82rem}
.lines li.gift>span:first-child{color:var(--forest);font-weight:600}

/* hero float */
.floaty{position:absolute;right:clamp(16px,4vw,40px);top:clamp(16px,3vw,32px);color:var(--gold);opacity:.9;animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(6deg)}}
@media (max-width:620px){.floaty{display:none}}
.stage{position:relative}


/* returning visitor */
.drafts{display:grid;gap:12px;max-width:640px}
.draft{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;text-align:left;border:1.5px solid var(--line);border-radius:18px;padding:12px;background:var(--surface);transition:transform .2s,border-color .2s,box-shadow .2s}
.draft:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--forest) 45%,var(--line));box-shadow:var(--shadow)}
.draft .thumb{border-radius:12px;overflow:hidden;aspect-ratio:200/120;max-width:100%}
.draft .thumb svg{width:100%;height:100%;display:block}
.draft .body{min-width:0;display:grid;gap:4px}
.dtop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.pill{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:99px}
.pill.started{background:var(--gold-soft);color:var(--gold)}
.pill.booked{background:var(--tint);color:var(--forest)}
.draft .dt{font-family:var(--display);font-size:1.2rem;line-height:1.2}
.draft .dd{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere}
.dbot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap}
.dtotal{font-weight:700;color:var(--forest);font-size:1.05rem}
.dprog{height:4px;background:var(--line);border-radius:99px;overflow:hidden;max-width:180px}
.dprog i{display:block;height:100%;background:linear-gradient(90deg,var(--forest),var(--gold))}
.btn.sm{padding:10px 18px;font-size:.9rem}
.dx{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:.75rem;cursor:pointer;padding:4px;text-decoration:underline}
.dx:hover{color:var(--danger)}
.fresh{margin-top:14px;max-width:640px;width:100%;display:flex;gap:14px;align-items:center;text-align:left;cursor:pointer;border:1.5px dashed color-mix(in srgb,var(--forest) 40%,var(--line));border-radius:18px;padding:16px;background:transparent;transition:background .2s,border-color .2s}
.fresh:hover{background:var(--tint);border-color:var(--forest)}
.fresh .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--forest);color:var(--forest-ink);flex:none}
.fresh b{display:block}.fresh small{color:var(--muted)}
.draft.leaving{animation:leave .35s ease forwards}
@keyframes leave{to{opacity:0;transform:translateX(30px) scale(.96)}}

/* klarna + coupon */
.pay{position:relative}
.pay .pmain{display:grid;gap:2px;min-width:0}
.pay .amt small{font-weight:500;color:var(--muted);font-size:.75rem}
.klarna-badge{display:inline-block;background:#FFB3C7;color:#0B051D;font-weight:800;letter-spacing:-.01em;padding:2px 9px;border-radius:6px;font-size:.85rem;line-height:1.4;vertical-align:1px}
.months{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.months button{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-weight:600;font-size:.8rem;cursor:pointer;transition:all .2s}
.months button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.knote{display:flex;gap:12px;align-items:flex-start;background:#FFF0F4;border:1px solid #FFD3E0;border-radius:14px;padding:14px 16px;margin-bottom:12px;text-align:left;animation:rise-in .4s cubic-bezier(.2,1.2,.35,1)}
.knote p{margin:0;font-size:.86rem;color:#3B2B33}
.paynote{display:flex;gap:12px;align-items:flex-start;background:var(--gold-soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;text-align:left;color:var(--forest);animation:rise-in .4s cubic-bezier(.2,1.2,.35,1)}
.paynote svg{flex:none;margin-top:1px}
.paynote p{margin:0;font-size:.86rem;color:var(--ink)}
.btn.primary.klarna{background:#FFB3C7;color:#0B051D;box-shadow:0 8px 20px -8px rgba(255,110,150,.7)}
.coupon{margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.coupon .crow{display:flex;gap:8px}
.coupon input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600}
.coupon input::placeholder{text-transform:none;letter-spacing:0;font-weight:400}
.coupon input:focus{outline:none;border-color:var(--forest)}
.coupon input.bad{border-color:var(--danger)}
.coupon .apply{border:0;border-radius:12px;padding:0 18px;background:var(--ink);color:#fff;font-weight:700;cursor:pointer}
.coupon .lbl{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.cmsg{margin:6px 0 0;font-size:.82rem;min-height:1em}
.cmsg.bad{color:var(--danger)}
.chip{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--gold-soft);border:1.5px dashed var(--gold);border-radius:12px;padding:10px 14px;animation:tickpop .45s cubic-bezier(.3,1.6,.5,1)}
.chip b{letter-spacing:.08em;color:var(--gold)}
.chip span{font-size:.85rem}
.chip button{border:0;background:transparent;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.8rem}
.lines li.disc .a,.lines li.disc>span:first-child{color:var(--gold)}

/* date then time */
.substep{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.substep .n{width:24px;height:24px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:.75rem;letter-spacing:0}
#timeWrap{margin-top:28px}
#timeWrap.reveal{animation:rise-in .55s cubic-bezier(.2,1.2,.35,1)}
.timelock{display:flex;align-items:center;gap:8px;margin:22px 0 0;color:var(--muted);font-size:.88rem}
.timelock[hidden]{display:none}

/* address note */
.fnote{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;background:var(--tint);border-radius:10px;font-size:.85rem;color:var(--ink);text-align:left}
.fnote svg{flex:none;color:var(--forest);margin-top:2px}

/* easy back */
.topback{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:7px 14px 7px 12px;font-weight:600;font-size:.85rem;cursor:pointer;transition:border-color .2s,transform .2s,background .2s}
.topback:hover{border-color:var(--forest);background:var(--tint);transform:translateX(-2px)}
.topback span{transition:transform .2s}.topback:hover span{transform:translateX(-3px)}

/* color step */
.bigwrap{max-width:560px;margin:0 0 18px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.bigprev{aspect-ratio:200/120;max-width:100%;overflow:hidden}
.bigprev svg{width:100%;height:100%;display:block}
.bigprev svg *{transition:fill .6s ease,stroke .6s ease}
.bigprev .bloom{animation:sway 2.4s ease-in-out infinite}
.bigprev.glow{animation:glow .7s ease}
@keyframes glow{40%{filter:brightness(1.08) saturate(1.15)}}
.bigbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;flex-wrap:wrap;border-top:1px solid var(--line)}
.biglabel{font-size:.9rem;color:var(--muted)}
.biglabel b{color:var(--ink)}
.changestyle{border:1.5px solid var(--forest);background:transparent;color:var(--forest);font-weight:700;font-size:.85rem;border-radius:99px;padding:8px 14px;cursor:pointer;transition:background .2s,color .2s}
.changestyle:hover{background:var(--forest);color:var(--forest-ink)}

/* help strip (every step) */
.help{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:16px;text-align:left}
.help p{margin:0;flex:1;min-width:0;font-size:.9rem;line-height:1.45}
.help b{display:block;color:var(--ink)}
.help .tel{color:var(--forest);font-weight:700;text-decoration:none;white-space:nowrap;user-select:all;border-bottom:1.5px dashed currentColor}
.hic{flex:none;width:42px;height:42px;border-radius:50%;background:var(--surface);color:var(--gold);display:grid;place-items:center;animation:nudge 5s ease-in-out infinite}
@keyframes nudge{0%,86%,100%{transform:none}89%{transform:rotate(-12deg) scale(1.08)}93%{transform:rotate(10deg) scale(1.08)}96%{transform:rotate(-4deg)}}
.copy{flex:none;border:1.5px solid var(--gold);background:var(--surface);color:var(--gold);font-weight:700;font-size:.82rem;border-radius:99px;padding:9px 14px;cursor:pointer;transition:background .2s,color .2s}
.copy:hover{background:var(--gold);color:#fff}
.confirm~.help,.step.confirm:not([hidden])~.help{margin-top:30px}

/* ---------- centered, symmetrical layout on every step ---------- */
.stage{text-align:center}
.lede{margin-inline:auto}
.fields{margin-inline:auto;text-align:left}
.trust{justify-content:center}
.err{text-align:center}
.opts{--cols:3;--g:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.opts>.opt{flex:0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols));min-width:0}
#placeOpts,#timeOpts,#settingOpts{--cols:2}
/* extra time (Dejon's booking file, Oct 15) */
#extWrap{margin-top:26px}
.extnote{max-width:52ch;margin:-4px auto 14px;font-size:.9rem;color:var(--muted)}
.extnote b{color:var(--ink)}
.extopts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:680px;margin-inline:auto}
.ext{position:relative;flex:1 1 120px;max-width:160px;display:grid;justify-items:center;gap:2px;padding:14px 10px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.ext:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--forest) 45%,var(--line))}
.ext[aria-pressed="true"]{border-color:var(--forest);background:var(--tint);box-shadow:0 0 0 3px color-mix(in srgb,var(--forest) 18%,transparent)}
.ext b{font-size:1rem}
.ext .d{font-size:.74rem;color:var(--muted)}
.ext .p{font-weight:800;color:var(--forest);margin-top:2px}
.ext .p small{font-weight:600;color:var(--muted)}
.ext .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap}
.custime{max-width:460px;margin:18px auto 0;padding:16px;border:1.5px dashed var(--line);border-radius:16px;background:var(--surface)}
.ctitle{margin:0 0 10px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.ctrow{display:flex;align-items:flex-end;gap:10px;justify-content:center}
.ctrow .f{flex:1;text-align:left}
.ctrow select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-size:1rem;font-weight:600;color:var(--ink)}
.ctrow select:focus{outline:none;border-color:var(--forest);background:var(--surface)}
.ctrow select:disabled{opacity:.5}
.carrow{padding-bottom:12px;color:var(--muted);font-size:1.2rem}
.cdur{margin:10px 0 0;font-size:.88rem;color:var(--muted)}
.cdur b{color:var(--forest)}
/* The first page is just the form; the quote appears from the next step. */
@media (min-width:901px){.shell.solo{grid-template-columns:minmax(0,1fr);max-width:820px}}
.shell.solo .cart{display:none}
#settingOpts .opt{padding:26px 18px 22px}
#settingOpts .ic{width:64px;height:64px;border-radius:18px}
#settingOpts .ic svg{width:32px;height:32px}
#settingOpts .t{font-size:1.25rem;font-family:var(--display);font-weight:400}
#settingOpts .p:empty{display:none}
#settingOpts .perk{padding:5px 12px}
.opt{justify-items:center;text-align:center}
.badge{justify-self:center}
.followup{margin-inline:auto;text-align:left}
.cal{margin-inline:auto}
.cal-picked{justify-content:center;text-align:center}
.cal-legend{margin-left:0;width:100%;justify-content:center}
.substep,.timelock{justify-content:center}
.guests{justify-content:center}
.people{justify-content:center;margin-inline:auto}
input[type=range]{display:block;margin-inline:auto}
.note{margin-inline:auto}
.adds{max-width:640px;margin-inline:auto}
.bigwrap{margin-inline:auto}
.drafts,.fresh{margin-inline:auto}
.help{max-width:640px;margin-inline:auto}
.nav{justify-content:center;gap:20px}
.co{text-align:left}
.co .t,.co .d{text-align:left}

/* "Included In Package" ticket */
.incl{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 5px;border-radius:99px;background:linear-gradient(135deg,var(--tint),color-mix(in srgb,var(--gold-soft) 75%,var(--tint)));border:1.5px dashed color-mix(in srgb,var(--forest) 50%,transparent);color:var(--forest);font-size:.74rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;line-height:1.2}
.incl i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--forest);color:var(--forest-ink);display:grid;place-items:center}
.incl::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:inclshine 3.6s ease-in-out infinite}
@keyframes inclshine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.opt[aria-pressed="true"] .incl{border-style:solid;background:var(--surface)}

/* bundled snacks */
.add.locked{cursor:default;border-color:color-mix(in srgb,var(--forest) 45%,var(--line));background:var(--tint)}
.add.locked .box{background:var(--forest);border-color:var(--forest)}
.add.locked .box svg{opacity:1}
/* Included items: the label sits under the description (Dejon, Oct 22), so the text keeps the row's width */
.add.locked .txt .incl{display:flex;width:fit-content;margin-top:8px}
.add.locked:hover{transform:none}

/* perk chips on packages */
.perks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.perks .perk{margin-top:0}
.opt-l{font-weight:400;color:var(--muted)}
.perk{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 11px 4px 4px;border-radius:99px;background:var(--forest);color:var(--forest-ink);font-size:.72rem;font-weight:700;letter-spacing:.01em;line-height:1.25;text-align:center}
.perk i{flex:none;width:17px;height:17px;border-radius:50%;background:var(--forest-ink);color:var(--forest);display:grid;place-items:center}
.perk.alt{background:var(--gold);color:#fff}
.perk.alt i{background:#fff;color:var(--gold)}

/* ---------- phones & small tablets: centered, thumb-friendly ---------- */
.mdetails{display:none}
@media (max-width:900px){
  .shell{padding-block:16px 32px;max-width:640px}
  .nav #next.mhide{display:none}
  .nav #next:not(.mhide){width:100%;max-width:360px;justify-content:center;padding-block:17px;font-size:1.05rem}
  .mbar{position:static;margin:22px 0 0;padding:14px 16px 10px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);text-align:left;z-index:auto}
  .nav{justify-content:center;border-top:0;padding-top:0;margin-top:18px}
  .nav .btn.ghost{padding:8px 14px}
  .mbar .inner{align-items:center}
  .mbar #mnext{padding:14px 22px;font-size:.98rem;flex:none}
  .mmeter{display:block;margin:0 0 14px}
  .mmeter p{margin:0 0 8px;font-size:.8rem;color:var(--ink);text-align:center;line-height:1.3}
  .mmeter .bar{height:14px;margin-right:16px}
  .mmeter .goal{width:30px;height:30px;margin-top:-15px;right:-16px}
  .mmeter .goal svg{width:15px;height:15px}
  .mdetails{display:block;width:100%;margin-top:6px;border:0;background:transparent;color:var(--muted);font-size:.78rem;font-weight:600;cursor:pointer;padding:2px 0}
  .mbar.isdone{display:none}
  .lines li{text-align:left}
}
@media (max-width:640px){
  header.top{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding-block:16px 12px}
  .brand{justify-content:center}
  .progress{padding-inline:28px}
  .shell{padding-inline:12px}
  .stage{border-radius:20px;padding:24px 16px 20px;text-align:center}
  .eyebrow{text-align:center}
  h1{font-size:2rem}
  h2{font-size:1.65rem}
  .lede{margin-inline:auto;margin-bottom:20px;font-size:.95rem}
  .fields{margin-inline:auto;text-align:left}
  .f input{font-size:16px;padding:15px 16px}
  .trust{justify-content:center;gap:8px 14px;font-size:.8rem}
  .err{text-align:center}
  .opts,#placeOpts,#timeOpts,#settingOpts{--cols:1;--g:12px}
  .ext{flex:1 1 calc(50% - 10px);max-width:none}
  .ext[data-ext="day"]{flex-basis:100%}
  .opts>.opt{max-width:440px}
  .opt{padding:18px 16px 16px}
  .opt.styl{padding:0 0 14px}
  .opt.styl .scene{aspect-ratio:200/95}
  .opt .d{font-size:.85rem;max-width:32ch}
  .add.locked .incl{font-size:.68rem}
  .perk{font-size:.74rem;padding:5px 14px 5px 5px}
  .incl{font-size:.68rem;padding:4px 9px 4px 4px;gap:5px}
  .incl i{width:16px;height:16px}
  .perk{font-size:.66rem;padding:3px 9px 3px 3px}
  .opt{justify-items:center;text-align:center;padding:16px 10px 14px;gap:4px;border-radius:16px}
  .opt .ic{margin:0 0 4px;width:44px;height:44px}
  .opt .t{font-size:.95rem;line-height:1.25}
  .opt .d{font-size:.78rem;line-height:1.35}
  .opt .p{margin-top:2px;font-size:.92rem}
  .opt .p small{display:block}
  .opt .tick{top:8px;right:8px;width:22px;height:22px}
  .badge{justify-self:center;font-size:.6rem;padding:3px 7px}
  .opt:hover{transform:none}
  .styles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opt.styl{padding:0 0 12px}
  .opt.styl>*:not(.scene):not(.tick){margin-inline:10px}
  .followup{margin-inline:auto;text-align:left}
  .cal{margin-inline:auto;padding:14px 10px}
  .cal-grid{gap:2px}
  .day{font-size:.92rem;border-radius:10px}
  .cal-picked{justify-content:center;text-align:center}
  .cal-legend{margin-left:0;width:100%;justify-content:center}
  .guests{justify-content:center}
  .people{justify-content:center;margin-inline:auto}
  input[type=range]{display:block;margin-inline:auto}
  .note{margin-inline:auto}
  .adds{grid-template-columns:minmax(0,1fr);gap:10px}
  .add{padding:13px 14px;gap:12px}
  .add .t{font-size:.93rem}
  .co{gap:20px;text-align:left}
  .paychoice{margin-bottom:14px}
  .confirm .recap,.next{margin-inline:auto}
  .substep,.timelock{justify-content:center}
  .topback{margin:-8px 0 12px}
  .bigwrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:3;margin-inline:auto}
  .bigprev{aspect-ratio:200/100}
  .bigbar{justify-content:center;text-align:center;padding:6px 10px 8px;gap:6px}
  .biglabel{width:100%;font-size:.82rem}
  .changestyle{padding:6px 12px;font-size:.8rem}
  .help{flex-direction:column;text-align:center;gap:10px;padding:16px 14px}
  .help b{margin-bottom:2px}
  .drafts,.fresh{margin-inline:auto}
  .draft{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:10px}
  .draft .dt{font-size:1.05rem}
  .dprog{display:none}
  .toast{font-size:.85rem;padding:10px 16px;white-space:normal;text-align:center;width:max-content}
}
@media (max-width:640px){
  .opt .p .sep{display:none}
}
@media (max-width:360px){
  .opts,#placeOpts,#timeOpts,#settingOpts{--cols:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.ph{background-color:var(--tint);background-size:cover;background-position:center}
/* hero strip on step 1 */
.intro{max-width:60ch;margin:0 auto 18px;color:var(--ink);font-size:1.02rem;line-height:1.55}
.intro b{color:var(--forest)}
.marquee{position:relative;margin:4px -8px 22px;overflow:hidden;border-radius:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mtrack{display:flex;gap:10px;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.mtrack .ph{flex:none;width:170px;height:210px;border-radius:14px;box-shadow:0 8px 18px -10px rgba(29,46,36,.5)}
.mtrack .ph:nth-child(3n+2){height:190px;margin-top:10px}
@keyframes marq{to{transform:translateX(-50%)}}
.mcap{display:flex;justify-content:center;align-items:center;gap:8px;margin:-12px 0 20px;font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.mcap i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}
/* package cards with photos */
.opt.withphoto{padding:0 0 16px;overflow:hidden}
.opt.withphoto>*:not(.ephoto):not(.tick){margin-inline:14px}
.ephoto{display:block;width:100%;max-width:100%;aspect-ratio:4/3;margin-bottom:8px;transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.opt.withphoto:hover .ephoto,.opt.withphoto[aria-pressed="true"] .ephoto{transform:scale(1.04)}
.opt.withphoto .tick{background:var(--surface);z-index:2}
.opt.withphoto[aria-pressed="true"] .tick{background:var(--forest)}
.opt.withphoto .badge{margin-top:2px}
/* real setups strip on colors step */
.realset{max-width:560px;margin:0 auto 22px}
.realset p{margin:0 0 8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.realrow{display:flex;justify-content:center;gap:10px}
.realrow .ph{flex:1 1 0;max-width:180px;aspect-ratio:4/5;border-radius:14px;box-shadow:0 8px 18px -10px rgba(29,46,36,.45);animation:rise-in .5s cubic-bezier(.2,1.2,.35,1) both}
.realrow .ph:nth-child(2){animation-delay:.08s}.realrow .ph:nth-child(3){animation-delay:.16s}
/* checkout + confirmation photos */
.recap-photo{position:relative;height:150px;border-radius:12px;margin-bottom:14px;overflow:hidden}
.recap-photo span{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.92);color:var(--ink);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px}
.donegal{display:flex;justify-content:center;gap:10px;max-width:520px;margin:0 auto 24px}
.donegal .ph{flex:1 1 0;aspect-ratio:4/5;border-radius:14px;box-shadow:0 8px 18px -10px rgba(29,46,36,.45)}
@media (max-width:640px){
  .intro{font-size:.95rem}
  .mtrack .ph{width:130px;height:165px}.mtrack .ph:nth-child(3n+2){height:150px}
  .ephoto{aspect-ratio:16/10}
  .recap-photo{height:130px}
}

/* real Oasis setup photos */
.ph-1{background-image:url(/img/photos/photo-1.jpg)}
.ph-2{background-image:url(/img/photos/photo-2.jpg)}
.ph-3{background-image:url(/img/photos/photo-3.jpg)}
.ph-4{background-image:url(/img/photos/photo-4.jpg)}
.ph-5{background-image:url(/img/photos/photo-5.jpg)}
.ph-6{background-image:url(/img/photos/photo-6.jpg)}
/* Self Pickup's refundable damage deposit: shown apart from the total */
/* Self Pickup: Picnic total, the deposit, then Due today */
.ddrow{padding-top:0;padding-bottom:8px}
.lines li.ptotal{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.lines li.payadj .a{color:var(--gold)}
.lines li.due{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px}
.lines li.due small,.totalrow .tsub{color:var(--forest)}
.totalrow{flex-wrap:wrap}
.totalrow .tsub{flex-basis:100%;text-align:right;font-size:.75rem;margin-top:2px}
.ddpay{background:var(--tint);border-radius:12px;padding:12px 16px;font-size:.86rem;line-height:1.45;margin:0 0 12px;text-align:left}
.pickupnote{max-width:440px;margin:16px auto 0}
.lines li .ddback{color:var(--forest)}