/* Offer panels: D2C refill (the product runs out) and app habit grid (behaviour repeats). Final state is the static default. */
#offer .refill-vis,#offer .habit-vis{align-items:center;padding:24px 26px}
.refill{display:grid;grid-template-columns:118px 1fr;grid-template-rows:auto auto;gap:14px 22px;align-items:center;width:100%;max-width:400px}
.jar{width:118px;height:auto;display:block}
.jar-lid{fill:#171717}
.jar-body{fill:#fff;stroke:#b9b7b1;stroke-width:1.5}
.jar-fill{fill:#d9cfc2;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--lvl,1));transition:fill .3s}
.refill.low .jar-fill{fill:var(--red)}
.jar-label{fill:#171717}
.jar-t1{fill:#fff;font:15px var(--display);letter-spacing:.08em}
.jar-t2{fill:#bdbdbd;font:600 9px var(--sans);letter-spacing:.14em}
.refill-read{display:flex;flex-direction:column;gap:4px}
.rf-k{font:600 10px var(--sans);letter-spacing:.14em;color:#777}
.rf-day{font:400 44px/1 var(--display);color:#171717;text-transform:uppercase}
.rf-state{font-size:13px;color:#555;min-height:1.4em}
.refill.low .rf-state{color:var(--red);font-weight:600}
.refill-msg{grid-column:1/-1;background:#fff;border-radius:14px 14px 14px 4px;padding:12px 14px;box-shadow:0 8px 24px #0000000d}
.refill-msg p{font-size:13px;line-height:1.45;color:#171717}
.rf-qr{display:flex;gap:6px;margin-top:10px}
.rf-qr span{flex:1;text-align:center;font:600 12px var(--sans);border:1px solid #ddd;border-radius:9px;padding:7px 4px;color:#171717;transition:background .25s,color .25s,border-color .25s}
.rf-qr span.hit{border-color:var(--red);color:var(--red)}
.refill.sent .rf-qr span.hit,.refill:not(.playing) .rf-qr span.hit{background:var(--red);color:#fff}
.habit{width:100%;max-width:300px;color:#f2f2f2}
.hb-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
.hb-app{font:600 10px/1.5 var(--sans);letter-spacing:.14em;color:#8a8a8a}
.hb-score{display:flex;align-items:flex-end;gap:8px}
.hb-count{font:400 48px/0.9 var(--display);color:#fff}
.hb-score small{font:600 9px/1.4 var(--sans);letter-spacing:.12em;color:#8a8a8a}
.hb-days,.hb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.hb-days{margin-bottom:6px}.hb-days span{font:600 10px var(--sans);color:#6f6f6f;text-align:center}
.hb-grid i{aspect-ratio:1;border-radius:4px;background:#e9e7e2;display:block;transform:scale(var(--c,1));opacity:var(--o,1)}
.hb-grid i.miss{background:transparent;box-shadow:inset 0 0 0 1.5px #555}
.hb-grid i.back{background:var(--red)}
.hb-nudge{margin-top:16px;background:#2e2e2e;border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.45;color:#e8e8e8}
.hb-nudge b{display:block;font:600 11px var(--sans);color:#9a9a9a;margin-bottom:3px}
@media(max-width:900px){#offer .refill-vis,#offer .habit-vis{padding:20px}.refill{grid-template-columns:100px 1fr}.jar{width:100px}.rf-day{font-size:38px}}