/* Layout & components. Colors, fonts and sizes come from theme.css ("Eucalyptus & Wheat"). Sizes in rem so text scales to 200%. */
* { box-sizing:border-box; }
html { font-size:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:400; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; }
h1, h2, h3, .brand { font-family:var(--font-head); font-weight:800; color:var(--green); letter-spacing:-.01em; }
a { color:var(--green); font-weight:600; text-underline-offset:.15em; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:.5rem; }
b, strong { font-weight:700; }

/* ---------- header, tabs, notices ---------- */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--gap); flex-wrap:wrap; padding:.75rem 1rem .5rem; background:var(--bg); }
.brand-wrap { display:flex; align-items:center; gap:.75rem; min-width:0; }
.av { width:3rem; height:3rem; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1.125rem; border:3px solid var(--gold); flex:none; }
.brand { font-size:var(--fs-h1); line-height:1.15; margin:0; }
.brand span { color:var(--gold-ink); }
.brand a { color:inherit; text-decoration:none; font-weight:inherit; display:inline-flex; align-items:center; min-height:var(--tap); }
.brand-text { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; min-width:0; }
.brand-logo { line-height:0; }
.brand-logo img { display:block; height:3.25rem; width:auto; max-width:100%; }
@media (min-width:48em){ .brand-logo img { height:4rem; } }
.badge { font-size:var(--fs-secondary); font-weight:700; padding:.25rem .75rem; border-radius:var(--radius-pill); background:var(--tint); color:var(--green); border:1.5px solid var(--green); white-space:nowrap; }
.badge.demo { background:var(--gold-tint); color:var(--gold-ink); border-color:var(--gold-ink); }
.badge.live { background:var(--tint); color:var(--green); }
.badge.live::before { content:"● "; }
.tabs { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:1fr 1fr; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 2px 6px #0000000a; }
.tabs button { min-height:3.25rem; border:0; border-radius:0; padding:.5rem .375rem; font-size:var(--fs-body); font-weight:600; color:var(--muted); background:none; border-bottom:4px solid transparent; }
.tabs button.active { color:var(--green); font-weight:800; border-bottom-color:var(--green); background:var(--tint); }
.dot { display:inline-block; width:.625rem; height:.625rem; border-radius:50%; background:var(--gold); border:2px solid var(--gold-ink); vertical-align:middle; margin-left:.25rem; }
.tagline { max-width:47.5rem; margin:.875rem auto 0; padding:0 1rem; font-weight:700; color:var(--green); font-size:var(--fs-body); }
.disclaimer { max-width:47.5rem; margin:.75rem auto; margin-left:max(.75rem, calc(50% - 23.75rem)); margin-right:max(.75rem, calc(50% - 23.75rem)); padding:.875rem 1rem; border-left:5px solid var(--gold); background:var(--surface); border-radius:.75rem; font-size:var(--fs-secondary); box-shadow:var(--shadow); }
.demo-banner { margin:0 .75rem .75rem; padding:.75rem 1rem; border-radius:.75rem; background:var(--gold-tint); border:1.5px dashed var(--gold-ink); font-size:var(--fs-secondary); }
.nudge { margin:.75rem .75rem 0; padding:.875rem 1rem; border-radius:1rem; background:var(--gold-tint); border:1.5px solid var(--gold); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.625rem; font-weight:700; }
.nudge span::before { content:"🔔 "; }
.nudge button, .nudge button.primary { min-height:var(--tap); background:var(--gold); color:var(--text); border:1.5px solid var(--gold-ink); border-radius:var(--radius-pill); }
.nudge button:active, .nudge button.primary:active { background:#DDB865; }

/* ---------- layout ---------- */
main { max-width:47.5rem; margin:0 auto; padding:0 .75rem 2.5rem; }
.card { background:var(--surface); border-radius:var(--radius-card); padding:1.125rem; margin:.875rem 0; box-shadow:var(--shadow); }
h2 { margin:0 0 .75rem; font-size:var(--fs-h2); line-height:1.25; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
h3 { margin:1.25rem 0 .5rem; font-size:var(--fs-h3); line-height:1.25; }
.step { display:inline-grid; place-items:center; min-width:2rem; height:2rem; border-radius:50%; background:var(--gold); color:var(--text); font-family:var(--font-head); font-size:1rem; font-weight:800; flex:none; }
.hidden { display:none !important; }
.muted { color:var(--muted); } .small { font-size:var(--fs-secondary); } .error { color:var(--danger); font-weight:600; }
.error:not(:empty)::before { content:"⚠ "; }
.ok { color:var(--green); font-weight:600; } .bad { color:var(--danger); font-weight:600; }
.row { display:flex; gap:var(--gap); flex-wrap:wrap; align-items:center; margin-bottom:.625rem; } .row input { width:auto; flex:1 1 6rem; margin:0; }
.grid2, .grid3 { display:grid; gap:0 .75rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:35em){ .grid2{grid-template-columns:repeat(2,minmax(0,1fr));} .grid3{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* ---------- forms ---------- */
label { display:block; margin:.625rem 0; font-size:1rem; font-weight:600; color:var(--text); }
input, select { display:block; width:100%; min-width:0; max-width:100%; min-height:3rem; margin-top:.25rem; padding:.625rem .75rem; font:inherit; font-size:var(--fs-body); font-weight:400; border:1.5px solid var(--field-border); border-radius:.75rem; background:var(--surface); color:var(--text); }
input::placeholder { color:var(--muted); opacity:1; }
input:focus, select:focus { border-color:var(--green); outline:3px solid var(--tint); outline-offset:0; }
fieldset { border:0; padding:0; margin:.75rem 0; min-width:0; } legend { font-size:1rem; font-weight:700; color:var(--green); margin-bottom:.375rem; padding:0; }
.chips { display:flex; flex-wrap:wrap; gap:var(--gap); }
.chips label, label.check { display:inline-flex; align-items:center; gap:.5rem; margin:0; min-height:var(--tap); padding:.375rem .875rem; border:1.5px solid var(--field-border); border-radius:var(--radius-pill); background:var(--surface); font-weight:400; cursor:pointer; }
label.check { margin:.5rem 0; }
.chips label:has(input:checked), label.check:has(input:checked) { background:var(--tint); border-color:var(--green); font-weight:700; }
.chips input, label.check input { width:1.25rem; height:1.25rem; min-height:0; margin:0; accent-color:var(--green); flex:none; }
.myday-fields { border:1.5px dashed var(--field-border); border-radius:1rem; padding:.75rem .875rem; background:var(--tint); }
.myday-fields legend { padding:0 .25rem; }

/* ---------- buttons ---------- */
button { min-height:var(--tap); padding:.5rem 1.125rem; font-family:var(--font-body); font-size:var(--fs-button); font-weight:600; line-height:1.25; border-radius:var(--radius-control); border:2px solid var(--green); background:transparent; color:var(--green); cursor:pointer; }
button:active { background:var(--tint); }
button.primary { min-height:var(--btn-h); padding:.625rem 1.375rem; background:var(--primary); color:var(--primary-ink); border:1.5px solid var(--primary-border); font-weight:700; font-size:1.125rem; }
button.primary:hover { background:#A0BDB0; } button.primary:active { background:var(--primary-pressed); }
button.big { display:flex; align-items:center; justify-content:center; width:100%; margin:.5rem 0; }
button:disabled { opacity:.6; cursor:not-allowed; border-style:dashed; }
button.link { background:none; border:0; color:var(--green); padding:.25rem .5rem; text-decoration:underline; }
#profileForm > button.primary, #mydayCoach { width:100%; margin-top:.5rem; }

/* ---------- targets, stores, plan ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:var(--gap); }
.stat { background:var(--tint); border-radius:1rem; padding:.75rem; }
.stat b { display:block; font-family:var(--font-head); font-size:1.5rem; font-weight:800; color:var(--green); line-height:1.2; }
.stat span { font-size:var(--fs-secondary); color:var(--muted); }
.warn { background:var(--gold-tint); border-left:4px solid var(--gold); padding:.625rem .875rem; border-radius:.75rem; margin:.5rem 0; font-size:var(--fs-secondary); color:var(--text); }
.warn.success { background:var(--tint); border-left-color:var(--green); }
.store { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.625rem; padding:.75rem .5rem; border-bottom:1px solid var(--line); border-radius:.75rem; }
.store > div { flex:1 1 12rem; min-width:0; }
.store.selected { background:var(--tint); box-shadow:inset 4px 0 0 var(--green); }
details.day { border:1px solid var(--line); border-radius:1rem; margin:.5rem 0; padding:.25rem .875rem; background:var(--surface); }
details.day[open] { background:#FDFCF8; }
details.day summary { cursor:pointer; font-weight:700; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.25rem .5rem; min-height:var(--tap); align-items:center; }
details summary { cursor:pointer; min-height:var(--tap); padding:.375rem 0; }
.meal { padding:.625rem 0; border-top:1px solid var(--line); }
.meal:first-of-type { border-top:0; }
.meal details summary { color:var(--green); font-weight:600; }
.tag { display:inline-block; font-size:var(--fs-secondary); font-weight:600; padding:.0625rem .5rem; border-radius:.375rem; background:var(--tint); margin:.125rem .25rem .125rem 0; color:var(--green); }
.promo { background:var(--gold-tint); color:var(--gold-ink); }
.promo::before { content:"🏷 "; }
.tag.stock-low { background:var(--gold-tint); color:var(--gold-ink); }

/* ---------- grocery ---------- */
.line { padding:.75rem 0; border-bottom:1px solid var(--line); }
.line .top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.25rem .5rem; }
.line .top > div:last-child { font-weight:700; font-variant-numeric:tabular-nums; }
.line select { margin-top:.5rem; font-size:var(--fs-secondary); }
.totalbar { position:sticky; bottom:0; background:var(--surface); padding:.75rem 0; border-top:2px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.25rem .5rem; font-weight:700; font-size:var(--fs-body); }
.meter { height:.75rem; background:var(--tint); border:1px solid var(--field-border); border-radius:var(--radius-pill); overflow:hidden; }
.meter > div { height:100%; background:var(--green); }
.meter.over > div { background:repeating-linear-gradient(135deg, var(--danger) 0 .5rem, #B85A43 .5rem 1rem); }
pre { white-space:pre-wrap; word-break:break-word; background:var(--bg); padding:.625rem; border-radius:.75rem; font-size:.9375rem; max-height:15rem; overflow:auto; }
footer { text-align:center; font-size:var(--fs-secondary); color:var(--muted); padding:1.25rem .75rem 2.5rem; max-width:47.5rem; margin:0 auto; }

/* ---------- quick workout ---------- */
.workout-card { background:var(--tint); }
.workout-card > h2 { font-size:1.5rem; }
.wo-buttons { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:.625rem; margin:.75rem 0; }
.wo-buttons button { min-height:3.5rem; font-size:1.125rem; border-radius:var(--radius-control); }
.seg { display:flex; flex-wrap:wrap; border:1.5px solid var(--green); border-radius:var(--radius-control); overflow:hidden; margin:.625rem 0; background:var(--surface); }
.seg label { flex:1 1 5.5rem; margin:0; display:flex; align-items:center; justify-content:center; min-height:var(--tap); text-align:center; padding:.375rem .25rem; font-weight:600; cursor:pointer; border-right:1px solid var(--line); }
.seg label:last-child { border-right:0; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; }
.seg label:has(input:checked) { background:var(--primary); color:var(--primary-ink); font-weight:800; box-shadow:inset 0 0 0 2px var(--green); }
.seg label:has(input:checked)::before { content:"✓ "; white-space:pre; }
.seg label:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:-3px; }
.wo-opts { margin:.5rem 0; }
.wo-today { margin:.5rem 0; font-weight:700; color:var(--green); }
.wo-summary { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 .25rem; font-size:var(--fs-h3); }
.wo-summary b { font-family:var(--font-head); color:var(--green); }
.wo-list { list-style:none; padding:0; margin:0; background:var(--surface); border-radius:1rem; padding:0 .875rem; }
.wo-list li { padding:.375rem 0; border-top:1px solid var(--line); }
.wo-list li:first-child { border-top:0; }
.wo-list .t { float:right; font-variant-numeric:tabular-nums; color:var(--muted); font-size:var(--fs-secondary); margin-left:.5rem; }
.wo-list .rest { color:var(--muted); font-size:var(--fs-secondary); padding:.25rem 0; }
.wo-list details summary { font-weight:700; }
.wo-list details p { margin:.25rem 0 .5rem; font-size:var(--fs-body); }
.safety { background:var(--gold-tint); padding:.625rem .875rem; border-radius:.75rem; border-left:4px solid var(--gold); }

/* timer: bolder, still in palette */
.wo-timer { position:fixed; inset:0; z-index:20; background:linear-gradient(180deg, var(--timer-bg), #2A3D37); color:var(--timer-ink); overflow:auto; }
.wo-timer-inner { max-width:32.5rem; margin:0 auto; padding:1rem 1.25rem 1.75rem; display:flex; flex-direction:column; min-height:100%; }
.wo-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.wo-timer button.link { color:var(--timer-ink); font-size:var(--fs-body); min-height:var(--tap); }
.wo-progress { height:.625rem; background:#FAF7F026; border-radius:var(--radius-pill); overflow:hidden; margin:.5rem 0 1rem; }
.wo-progress div { height:100%; background:var(--timer-accent); width:0; transition:width .3s; }
.wo-phase { display:inline-block; align-self:flex-start; text-transform:uppercase; letter-spacing:.08em; font-size:var(--fs-secondary); font-weight:800; color:var(--text); background:var(--timer-accent); padding:.125rem .75rem; border-radius:var(--radius-pill); }
.wo-phase.rest { background:var(--timer-rest); }
.wo-name { font-family:var(--font-head); font-size:1.875rem; font-weight:800; margin:.5rem 0 .25rem; line-height:1.2; color:var(--timer-ink); }
.wo-count { font-family:var(--font-head); font-size:5.5rem; font-weight:900; text-align:center; font-variant-numeric:tabular-nums; margin:.625rem 0; line-height:1; color:var(--timer-accent); }
.wo-how { font-size:1.125rem; margin:.375rem 0; }
.wo-easy { color:#C9D9D1; }
.wo-next { margin:.75rem 0; padding:.75rem .875rem; border-radius:1rem; background:#FAF7F014; border:1px solid #FAF7F033; }
.wo-controls { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 6rem), 1fr)); gap:var(--gap); margin-top:auto; padding-top:.75rem; }
.wo-controls button { min-height:var(--btn-h); font-weight:700; color:var(--timer-ink); border:2px solid var(--timer-accent); background:transparent; }
.wo-controls button.primary { background:var(--timer-accent); color:var(--text); border-color:var(--timer-accent); }
.wo-controls button:active { background:#FAF7F01f; } .wo-controls button.primary:active { background:var(--primary-pressed); }
.wo-result { margin:.75rem 0 0; font-size:1.125rem; font-weight:700; color:var(--timer-rest); text-align:center; }
.wo-timer .muted { color:#C9D9D1; }

/* ---------- MiMi coach ---------- */
.coach { max-width:47.5rem; margin:0 auto; padding:0 .75rem .75rem; display:flex; flex-direction:column; min-height:calc(100vh - 6.25rem); }
.coach-head { display:flex; gap:.75rem; align-items:center; padding:.875rem .125rem; }
.coach-head b { font-family:var(--font-head); font-size:var(--fs-h3); color:var(--green); }
.avatar { width:2.75rem; height:2.75rem; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:1rem; border:3px solid var(--gold); flex:none; }
.chat-log { flex:1; display:flex; flex-direction:column; gap:.5rem; padding:.375rem 0; }
.bubble { max-width:88%; padding:.75rem 1rem; border-radius:1.25rem; white-space:pre-line; line-height:1.45; font-size:var(--fs-body); }
.bubble.mimi { align-self:flex-start; background:var(--tint); color:var(--text); border-bottom-left-radius:.375rem; }
.bubble.user { align-self:flex-end; background:var(--surface); color:var(--text); border:1.5px solid var(--primary-border); border-bottom-right-radius:.375rem; }
.bubble.muted { color:var(--muted); font-style:italic; }
.chat-chips { display:flex; flex-wrap:wrap; gap:var(--gap); padding:.5rem 0; }
.chat-chips button { border-radius:var(--radius-pill); padding:.375rem 1rem; font-size:var(--fs-body); border:1.5px solid var(--green); color:var(--green); background:var(--surface); font-weight:700; }
.chat-chips button:active { background:var(--tint); }
.chat-chips button.primary { background:var(--gold); color:var(--text); border-color:var(--gold-ink); min-height:var(--tap); }
.chat-form { position:sticky; bottom:0; display:flex; gap:var(--gap); padding:.5rem 0; background:var(--bg); }
.chat-form input { margin:0; border-radius:var(--radius-pill); padding:.625rem 1rem; min-width:0; flex:1; }
.chat-form button { border-radius:var(--radius-pill); min-height:3rem; padding:.5rem 1.25rem; }
.coach-foot { text-align:center; margin:.25rem 0 0; }

/* ---------- My Day ---------- */
.myday-card { background:var(--tint); }
.myday-card h3 { font-size:1.125rem; margin:1rem 0 .25rem; }
.myday-card ul { padding-left:1.25rem; margin:.375rem 0; } .myday-card li { margin:.5rem 0; }
.myday-card details { background:var(--surface); border-radius:1rem; padding:.25rem .875rem; margin:.75rem 0; }

.coach-mode .disclaimer, .coach-mode .tagline, .coach-mode #demoBanner { display:none; }
@media (prefers-reduced-motion:reduce){ * { transition:none !important; scroll-behavior:auto !important; } }

/* ---------- grocery quality tiers (Standard / Organic produce / Full quality) ---------- */
.tag.q { background:var(--tint); color:var(--green); border:1px solid var(--green); }
/* MiMi's pick: positive certification badge (wheat accent) */
.tag.pick { background:var(--gold-tint); color:var(--gold-ink); border:1px solid var(--gold); font-weight:700; }
.qnote { margin-top:.25rem; font-size:var(--fs-secondary); color:var(--muted); }
.qnote.warn-q { color:var(--danger); font-weight:600; }
.mimi-note { display:flex; gap:.625rem; align-items:flex-start; background:var(--surface); border:1.5px solid var(--primary-border); border-radius:1rem; padding:.625rem .75rem; margin:.5rem 0; font-size:var(--fs-secondary); }
.mimi-note .avatar-sm { width:2rem; height:2rem; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:.8125rem; border:2px solid var(--gold); flex:none; }
.confirm-box { background:var(--gold-tint); border-left:4px solid var(--gold); border-radius:.75rem; padding:.625rem .875rem; margin:.5rem 0; font-size:var(--fs-secondary); }
.confirm-box ol { margin:.375rem 0; padding-left:1.25rem; }

.tiers { border:2px solid var(--primary-border); background:var(--tint); border-radius:var(--radius-card); padding:.875rem .625rem; margin:.75rem 0; }
.tiers h3 { margin:0 0 .25rem; color:var(--green); }
.tiers > p { margin:.25rem 0 .5rem; }
.tier-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.375rem; }
.tier { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:.375rem; text-align:left; padding:1.875rem .4375rem .625rem; min-height:var(--tap); border:2px solid var(--line); border-radius:var(--radius-control); background:var(--surface); color:var(--text); font-weight:400; font-size:var(--fs-secondary); line-height:1.3; cursor:pointer; }
.tier:hover { border-color:var(--primary-border); }
.tier.on { border:3px solid var(--primary-border); background:var(--surface); box-shadow:0 0 0 3px var(--primary); }
.tier.suggested { border-style:dashed; box-shadow:none; }
.tier .badge { position:absolute; top:.375rem; left:.375rem; padding:.0625rem .5rem; font-size:.8125rem; }
.tier.on:not(.suggested) .badge { background:var(--primary); color:var(--primary-ink); border-color:var(--primary-border); }
.tier.suggested .badge { background:var(--gold-tint); color:var(--gold-ink); border-color:var(--gold-ink); }
.tier .tname { font-family:var(--font-head); font-weight:800; color:var(--green); font-size:1rem; line-height:1.2; }
.tier .ttotal { font-family:var(--font-head); font-weight:800; font-size:clamp(1.0625rem, 5vw, 1.375rem); white-space:nowrap; letter-spacing:-.01em; color:var(--text); font-variant-numeric:tabular-nums; }
.tier .fit { font-weight:700; }
.tier .fit.ok { color:var(--green); }
.tier .fit.over { color:var(--danger); }
.tier .tmatch { color:var(--muted); }
.tier-blurb { margin:.625rem 0 .25rem; }
.over-ok { color:var(--gold-ink); font-weight:700; }
#sendCart:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width: 21rem) { .tier-grid { grid-template-columns:1fr; } }
.totalbar .approved { color:var(--gold-ink); font-weight:700; }

/* Household */
.welcome .welcome-btns { gap:.5rem; flex-wrap:wrap; }
.hh-list { display:grid; gap:.5rem; margin:.5rem 0; }
.hh-member { border:1.5px solid var(--line); border-radius:var(--radius-control); background:var(--surface); padding:.5rem .75rem; }
.hh-member[open] { border-color:var(--primary-border); }
.hh-member summary { display:flex; gap:.625rem; align-items:center; cursor:pointer; min-height:var(--tap); list-style:none; }
.hh-member summary::-webkit-details-marker { display:none; }
.hh-ico { font-size:1.375rem; line-height:1; flex:none; }
.hh-remove { color:var(--danger); margin-top:.25rem; }
.hh-add { gap:.5rem; flex-wrap:wrap; }
.hh-summary { border-top:1.5px solid var(--line); margin-top:.75rem; padding-top:.5rem; }
.hh-summary h3 { color:var(--green); margin:.25rem 0; }
.hh-people { list-style:none; padding:0; margin:.5rem 0; display:grid; gap:.5rem; }
.hh-people li { display:flex; gap:.625rem; align-items:flex-start; background:var(--tint); border-radius:.75rem; padding:.5rem .625rem; }
.hh-meal { margin:.125rem 0 .25rem; padding:.25rem .5rem; border-left:3px solid var(--primary); background:var(--tint); border-radius:0 .5rem .5rem 0; }
.hh-meal .skipnote { color:var(--gold-ink); }
.tag.addon { background:var(--gold-tint); color:var(--gold-ink); }
.tag.allergy { background:var(--gold-tint); color:var(--gold-ink); border:1px solid var(--gold-ink); }
.allergy-note { background:var(--gold-tint); border-left:4px solid var(--gold); border-radius:.5rem; padding:.375rem .625rem; }
.hh-everyday { background:var(--tint); border-radius:.75rem; padding:.5rem .75rem; margin:.5rem 0; }
.hh-everyday ul { margin:.25rem 0 0; padding-left:1.1rem; }

/* ---------- accounts, landing, auth pages ---------- */
.acct { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .75rem; font-size:var(--fs-secondary); }
.acct .link, button.link { background:none; border:0; color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:.15em; min-height:var(--tap); padding:0 .25rem; cursor:pointer; font-size:inherit; }
.acct-delete { max-width:47.5rem; margin:.75rem auto; border:2px solid var(--danger); }
.danger-btn { background:var(--danger); color:#fff; border:1.5px solid var(--danger); border-radius:var(--radius-pill); min-height:var(--tap); padding:0 1.25rem; font-weight:700; }
.auth-wrap { max-width:28rem; margin:1.5rem auto 3rem; padding:0 .75rem; }
.auth-wrap label { display:block; margin:.75rem 0; font-weight:600; }
.auth-wrap input[type=email], .auth-wrap input[type=password] { display:block; width:100%; margin-top:.25rem; min-height:var(--btn-h); padding:0 .875rem; font:inherit; border:1.5px solid var(--field-border); border-radius:var(--radius-control); background:var(--surface); color:var(--text); }
.auth-wrap .check { display:flex; gap:.5rem; align-items:flex-start; font-weight:400; }
.auth-wrap .check input { width:1.25rem; height:1.25rem; margin-top:.2rem; flex:none; }
.auth-wrap button.primary { width:100%; margin-top:.5rem; }
.auth-links { margin-top:1rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; }
.ok-msg { color:var(--green); font-weight:700; }
.hero { max-width:47.5rem; margin:1rem auto 0; padding:1.5rem 1rem 0; text-align:center; }
.hero h1 { font-size:2.25rem; line-height:1.15; margin:.5rem 0 .75rem; }
.hero .lead { font-size:1.1875rem; max-width:36rem; margin:0 auto 1.25rem; }
.cta { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin:1rem 0 .5rem; }
a.btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--btn-h); padding:0 1.5rem; border-radius:var(--radius-pill); text-decoration:none; font-weight:700; font-size:var(--fs-button); border:1.5px solid var(--primary-border); color:var(--primary-ink); background:var(--surface); }
a.btn.primary { background:var(--primary); }
a.btn.primary:active { background:var(--primary-pressed); }
.hero-mark { display:block; width:5rem; height:5rem; margin:0 auto; }
.how-it-works { max-width:47.5rem; margin:1.5rem auto 0; padding:0 .75rem; }
.how-it-works h2 { justify-content:center; text-align:center; color:var(--green); }
.how-steps { list-style:none; margin:0; padding:0; display:grid; gap:.875rem; grid-template-columns:1fr; }
@media (min-width:35em){ .how-steps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.how-steps .card { margin:0; display:flex; align-items:flex-start; gap:.75rem; }
.how-steps p { margin:.375rem 0 0; }
.step-emoji { width:2.5rem; height:2.5rem; min-width:2.5rem; background:var(--gold-tint); border:2px solid var(--gold); font-size:1.25rem; line-height:1; font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.features { display:grid; gap:.875rem; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); max-width:47.5rem; margin:1.5rem auto; padding:0 .75rem; }
.features .card { margin:0; }
.features h3 { margin-top:0; }
.legal-draft { background:var(--gold-tint); border:2px dashed var(--gold-ink); border-radius:.75rem; padding:.75rem 1rem; font-weight:700; }
.ph { background:var(--gold-tint); padding:0 .25rem; border-radius:.25rem; font-weight:700; }

/* high-protein swaps (e.g. regular pasta -> Banza chickpea pasta) */
.swap-row { display:flex; flex-wrap:wrap; gap:.375rem; align-items:center; margin:.5rem 0; }
.swap-btn { font-size:var(--fs-secondary); padding:.25rem .75rem; }
.swap-tip .swap-btn { margin-left:.375rem; }

/* landing: MiMi's picks + giving back; /giving page */
.landing-note { max-width:47.5rem; margin:0 auto 1rem; padding:0 .75rem; }
.landing-note .card { margin:0; }
.landing-note h2 { margin-top:0; color:var(--green); font-size:var(--fs-h2); }
.giving-card { border-left:5px solid var(--gold); }
.giving-total { background:var(--gold-tint); border:1.5px dashed var(--gold-ink); border-radius:.75rem; padding:.75rem 1rem; font-weight:700; color:var(--text); }