/* "Get your first drop" onboarding overlay (#setup) */
.setup { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 22px; padding: 22px; background: radial-gradient(120% 90% at 0% 0%, #E4F3DA 0%, rgba(228, 243, 218, 0) 60%), radial-gradient(110% 90% at 100% 100%, #FCE3EA 0%, rgba(252, 227, 234, 0) 62%), #FFFCF8; color: #2E3A31; font-family: var(--f); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s }
.setup.open { opacity: 1; visibility: visible; transition: opacity .45s ease }
html.setup-on, html.setup-on body { overflow: hidden }
.setup * { box-sizing: border-box }
.setup[hidden] { display: none }

/* ---------- cinema ---------- */
.cine { position: relative; border-radius: 28px; overflow: hidden; background: #2a1d17; min-height: 0; box-shadow: 0 30px 60px -30px rgba(63, 107, 69, .45) }
.cine .sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s ease }
.cine .sl.on { opacity: 1 }
.cine .sl img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02) }
.cine .sl.on img { animation: kb 6.5s ease-out forwards }
.cine .sl:nth-child(2n).on img { animation-name: kb2 }
@keyframes kb { from { transform: scale(1.02) translate(0, 0) } to { transform: scale(1.13) translate(-1.5%, -2%) } }
@keyframes kb2 { from { transform: scale(1.13) translate(1.5%, -1%) } to { transform: scale(1.03) translate(0, 0) } }
.cine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .62) 100%) }
.cine-top { position: absolute; z-index: 2; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center }
.back { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 252, 248, .92); color: #2E3A31; font-weight: 700; font-size: 13px; text-decoration: none }
.back:hover { background: #fff }
.back:focus-visible, .cine-ctl button:focus-visible { outline: 3px solid #F4B6C8; outline-offset: 2px }
.cine-brand { color: #FFFCF8; font-weight: 900; font-size: 18px; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .4) }
.cine-cap { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; color: #FFFCF8 }
.cine-cap .k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #DCEFD3 }
.cine-cap h2 { margin: 6px 0 4px; font-size: clamp(24px, 2.6vw, 40px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05 }
.cine-cap p { margin: 0; font-size: 15px; font-weight: 500; opacity: .9; max-width: 34ch }
.cine-cap .txt { transition: opacity .5s ease, transform .5s ease }
.cine-cap .txt.swap { opacity: 0; transform: translateY(8px) }
.cine-ctl { display: flex; align-items: center; gap: 10px; margin-top: 16px }
.cine-ctl .dot { width: 28px; height: 6px; border-radius: 6px; border: 0; padding: 0; background: rgba(255, 252, 248, .4); cursor: pointer; transition: background .3s, width .3s }
.cine-ctl .dot[aria-current="true"] { background: #F4B6C8; width: 44px }
.cine-ctl .pp { margin-left: 6px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 252, 248, .5); background: rgba(0, 0, 0, .2); color: #FFFCF8; font-size: 11px; cursor: pointer; display: grid; place-items: center }

/* ---------- panel ---------- */
.sp { min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 6px 8px 6px 4px; scrollbar-width: thin }
.sp-in { margin: auto 0; width: 100%; max-width: 560px }
.one { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid #F4B6C8; color: #B24D72; font-weight: 700; font-size: 13px }
.one b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FBE1E8; font-size: 13px }
.sp h1 { margin: 16px 0 6px; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.04; font-weight: 900; letter-spacing: -.03em; color: #2E3A31 }
.sp h1 em { font-style: normal; color: #3F6B45; background: linear-gradient(transparent 62%, #DCEFD3 62%) }
.sp .lead { margin: 0 0 18px; color: #5E6B61; font-size: 15px; font-weight: 500; line-height: 1.5 }

/* progress */
.prog { background: #fff; border: 1px solid #E6EFE1; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px }
.prog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 700; color: #5E6B61 }
.prog-top .pct { font-size: 22px; font-weight: 900; color: #3F6B45; letter-spacing: -.02em }
.prog-top .pct.pop { animation: pop .6s ease }
@keyframes pop { 40% { transform: scale(1.22); color: #B24D72 } }
.pbar { height: 12px; border-radius: 12px; background: #EEF5EA; margin-top: 10px; overflow: hidden }
.pbar i { display: block; height: 100%; width: 0; border-radius: 12px; background: linear-gradient(90deg, #BFE0B0, #9ACD8A 45%, #F4B6C8); transition: width .8s cubic-bezier(.2, .8, .2, 1) }
.ticks { display: flex; gap: 6px; margin-top: 10px }
.ticks span { flex: 1; height: 4px; border-radius: 4px; background: #EEF5EA; transition: background .4s }
.ticks span.done { background: #9ACD8A }
.ticks span.cur { background: #F4B6C8 }

/* card + questions */
.card { position: relative; background: #fff; border-radius: 24px; padding: 24px; border: 1px solid #F3E4E8; box-shadow: 0 24px 50px -30px rgba(178, 77, 114, .35) }
.q { display: none; border: 0; margin: 0; padding: 0; min-width: 0 }
.q.on { display: block; animation: qin .45s ease }
@keyframes qin { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.q legend { padding: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #B24D72 }
.q h3 { margin: 6px 0 16px; font-size: 24px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; color: #2E3A31 }
.fld { display: block; margin-bottom: 14px }
.fld > span { display: block; font-size: 13px; font-weight: 700; color: #5E6B61; margin-bottom: 6px }
.setup input[type=text], .setup input[type=tel], .setup input[type=number], .setup select, .setup textarea { width: 100%; font: 600 16px/1.3 var(--f); color: #2E3A31; background: #FBFDF9; border: 1.5px solid #D9E8D2; border-radius: 14px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s }
.setup textarea { resize: vertical; min-height: 74px; font-weight: 500 }
.setup input:focus, .setup select:focus, .setup textarea:focus { outline: 0; border-color: #9ACD8A; box-shadow: 0 0 0 4px #E4F3DA }
.setup .bad { border-color: #E28AA6 !important; box-shadow: 0 0 0 4px #FCE3EA !important }
.pre { display: flex; align-items: stretch }
.pre b { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid #D9E8D2; border-right: 0; border-radius: 14px 0 0 14px; background: #EEF5EA; color: #3F6B45; font-size: 15px }
.pre input { border-radius: 0 14px 14px 0 !important }
.err { min-height: 18px; margin: 2px 0 0; font-size: 13px; font-weight: 600; color: #B24D72 }
.pin-res { display: none; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.4 }
.pin-res.ok { display: flex; background: #E4F3DA; color: #2F5A35 }
.pin-res.no { display: flex; background: #FCE3EA; color: #8E3558 }
.pin-res .em { font-size: 26px; line-height: 1 }
.pin-res strong { display: block; font-size: 17px; font-weight: 900 }

/* card 3: household */
.hm { border: 1px solid #EEF5EA; border-radius: 18px; padding: 14px; margin-bottom: 12px; background: #FBFDF9 }
.hm-top { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.hm-top b { font-size: 16px; font-weight: 800 }
.hm-top small { display: block; font-size: 12px; font-weight: 600; color: #5E6B61 }
.stp { display: flex; align-items: center; border: 1.5px solid #D9E8D2; border-radius: 999px; background: #fff }
.stp button { width: 38px; height: 38px; border: 0; background: none; font: 800 20px var(--f); color: #3F6B45; cursor: pointer; border-radius: 50% }
.stp button:disabled { color: #C9D3C6; cursor: default }
.stp output { min-width: 26px; text-align: center; font-weight: 900; font-size: 17px }
.rows { display: grid; gap: 8px; margin-top: 12px }
.rows:empty { display: none }
.mem { display: grid; grid-template-columns: 78px 90px 1fr; gap: 8px; align-items: center }
.mem > span { font-size: 13px; font-weight: 700; color: #5E6B61 }
.mem input, .mem select { padding: 10px 11px !important; font-size: 15px !important; border-radius: 12px !important }

/* card 4: health quotient */
.hq { padding: 10px 2px 4px }
.hq-now { text-align: center; margin-bottom: 18px }
.hq-now b { display: inline-block; padding: 8px 18px; border-radius: 999px; font-size: 18px; font-weight: 900; background: #E4F3DA; color: #2F5A35; transition: background .4s, color .4s }
.hq-now small { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #5E6B61 }
.rng { position: relative; height: 44px }
.rng input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; z-index: 2; cursor: pointer }
.rng .trk { position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; border-radius: 12px; background: linear-gradient(90deg, #9ACD8A, #DCEFD3 50%, #F4B6C8 78%, #E28AA6) }
.rng .mid { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3px; margin-left: -1.5px; background: #2E3A31; border-radius: 2px; opacity: .55 }
.rng input::-webkit-slider-runnable-track { height: 44px; background: transparent }
.rng input::-moz-range-track { background: transparent }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: 7px; border-radius: 50%; background: #fff; border: 3px solid #3F6B45; box-shadow: 0 4px 12px rgba(46, 58, 49, .25) }
.rng input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #3F6B45; box-shadow: 0 4px 12px rgba(46, 58, 49, .25) }
.rng input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px #FCE3EA }
.hq-lbl { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 8px; font-size: 13px; font-weight: 800 }
.hq-lbl span:nth-child(1) { color: #3F6B45 }
.hq-lbl span:nth-child(2) { text-align: center; color: #2E3A31 }
.hq-lbl span:nth-child(3) { text-align: right; color: #B24D72 }

/* chips (taste cloud, currently unused) */
.cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.chip { position: relative }
.chip input { position: absolute; opacity: 0; inset: 0; pointer-events: none }
.chip span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1.5px solid #D9E8D2; background: #fff; font-size: 14px; font-weight: 700; color: #2E3A31; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; user-select: none }
.chip:nth-child(3n+2) span { font-size: 15px }
.chip:nth-child(4n+1) span { font-size: 13px }
.chip span:hover { transform: translateY(-2px); border-color: #BFE0B0 }
.chip input:checked + span { background: #FBE1E8; border-color: #F4B6C8; color: #8E3558 }
.chip input:checked + span::before { content: "✓ " }
.chip input:focus-visible + span { outline: 3px solid #9ACD8A; outline-offset: 2px }
.chip.ex span { background: #F2F9EE; border-style: dashed }

/* card 5: delivery rhythm */
.freq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.fq { position: relative }
.fq input { position: absolute; opacity: 0; pointer-events: none }
.fq span { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 14px; border-radius: 18px; border: 1.5px solid #D9E8D2; background: #fff; cursor: pointer; transition: all .25s }
.fq span b { font-size: 17px; font-weight: 900 }
.fq span small { font-size: 13px; font-weight: 600; color: #5E6B61; line-height: 1.35 }
.fq span i { font-style: normal; font-size: 26px }
.fq span:hover { transform: translateY(-3px) }
.fq input:checked + span { background: #E4F3DA; border-color: #9ACD8A; box-shadow: 0 12px 24px -16px rgba(63, 107, 69, .6) }
.fq input:focus-visible + span { outline: 3px solid #F4B6C8; outline-offset: 2px }

/* nav buttons */
.nav2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px }
.sbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 24px; font: 800 15px var(--f); cursor: pointer; text-decoration: none; transition: transform .2s, background .2s }
.sbtn.pri { background: #3F6B45; color: #fff }
.sbtn.pri:hover { background: #345A39; transform: translateY(-2px) }
.sbtn.ghost { background: transparent; color: #5E6B61; padding: 14px 6px }
.sbtn.ghost:hover { color: #2E3A31 }
.sbtn:focus-visible { outline: 3px solid #F4B6C8; outline-offset: 2px }
.sbtn[hidden] { display: none }

/* done card */
.done { text-align: center }
.done .big { font-size: 52px; line-height: 1; margin: 4px 0 6px }
.sum { text-align: left; display: grid; gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none }
.sum li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #FBFDF9; border: 1px solid #EEF5EA; font-size: 14px; font-weight: 600 }
.sum li b { color: #5E6B61; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px }
.note { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: #8A948C }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* highlight box on the done card */
.hl { position: relative; margin: 16px 0 6px; padding: 22px 22px 24px; border-radius: 22px; background: linear-gradient(135deg, #E4F3DA 0%, #FBE1E8 100%); border: 2px solid #9ACD8A; box-shadow: 0 18px 36px -22px rgba(178, 77, 114, .55); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px }
.hl-k { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: #3F6B45; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase }
.hl-t { margin: 4px 0 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em; color: #2E3A31 }
.hl-t em { font-style: normal; color: #B24D72; background: linear-gradient(transparent 60%, #F4B6C8 60%) }
.hl-s { margin: 0; font-size: 16px; font-weight: 700; color: #3F6B45; line-height: 1.4 }
.hl-go { margin-top: 8px; font-size: 16px; padding: 16px 30px }

/* responsive */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .setup { display: block; overflow: auto; padding: 12px }
  .cine { height: 42svh; min-height: 260px; border-radius: 22px }
  .cine-cap { left: 18px; right: 18px; bottom: 16px }
  .cine-cap p { font-size: 13px }
  .cine-ctl { margin-top: 10px }
  .sp { overflow: visible; padding: 18px 4px 24px }
  .sp-in { max-width: none }
  .card { padding: 18px }
  .q h3 { font-size: 21px }
  .freq { grid-template-columns: 1fr }
  .fq span { flex-direction: row; align-items: center; gap: 12px; padding: 14px }
  .fq span small { margin-left: auto; text-align: right; max-width: 52% }
  .mem { grid-template-columns: 64px 78px 1fr }
  .sum li { grid-template-columns: 90px 1fr }
}
@media (prefers-reduced-motion: reduce) {
  .cine .sl.on img { animation: none }
  .q.on { animation: none }
  .pbar i { transition: none }
}