:root {
  --green: #2f7a4d;
  --green-dark: #245e3b;
  --cream: #faf7f0;
  --ink: #22302a;
  --muted: #5f6f66;
  --card: #ffffff;
  --accent: #e8b04b;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(34, 48, 42, 0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}
a { color: var(--green); }
.container { max-width: 1020px; margin: 0 auto; padding: 0 20px; }

header.site {
  background: var(--card);
  border-bottom: 1px solid #eee5d5;
  position: sticky; top: 0; z-index: 10;
}
header.site .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.logo { font-weight: 800; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.logo span { color: var(--green); }
nav.main a { margin-left: 18px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
nav.main a:hover { color: var(--green); }

.hero { text-align: center; padding: 56px 0 36px; }
.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.2; margin-bottom: 14px; }
.hero p.sub { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }
.updated { display: inline-block; margin-top: 14px; font-size: 0.85rem; color: var(--muted); background: #f1ead9; padding: 4px 12px; border-radius: 999px; }

/* Deals carousel: 3 cards per view, swipe/scroll left-right for the rest. */
.carousel { position: relative; padding: 0 4px; }
.cards {
  display: flex; gap: 22px; padding: 28px 2px 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 24px 24px; position: relative; display: flex; flex-direction: column;
}
@media (max-width: 820px) { .card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 560px) { .card { flex-basis: 84%; } }
.car-btn {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 6;
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #d9cfb8;
  background: var(--card); color: var(--green); font-size: 1.5rem; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
}
.car-prev { left: -10px; } .car-next { right: -10px; }
/* Live new-customer offer, shown inside each card (crawl-updated between markers). */
.card-offer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  background: #fbf3e1; border: 1.5px solid var(--accent); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 10px; text-decoration: none;
  color: var(--ink); font-size: 0.88rem; font-weight: 600; line-height: 1.35;
  transition: box-shadow .12s;
}
.card-offer:hover { box-shadow: 0 0 0 2px var(--accent) inset; }
.card-offer .co-text { flex: 1 1 auto; }
.card-offer .co-cta { color: var(--green); font-weight: 800; white-space: nowrap; }
.car-btn[disabled] { opacity: .3; cursor: default; }
@media (max-width: 560px) { .car-btn { display: none; } }
.card .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--accent); color: #4d3a10; font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.06em; padding: 4px 14px; border-radius: 999px; text-transform: uppercase;
}
.card.top { border: 2px solid var(--green); }
.card h3 { font-size: 1.3rem; margin-bottom: 2px; }
.card p.tag { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; }
.stars { color: var(--accent); font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; }
.card ul { list-style: none; margin: 0 0 16px; flex-grow: 1; }
.card ul li { padding-left: 26px; position: relative; margin-bottom: 7px; font-size: 0.95rem; }
.card ul li.pro::before { content: "✓"; color: var(--green); position: absolute; left: 0; font-weight: 700; }
.card ul li.con::before { content: "✕"; color: #b5543b; position: absolute; left: 0; font-weight: 700; }
.btn {
  display: block; text-align: center; background: var(--green); color: #fff;
  font-weight: 700; text-decoration: none; padding: 13px 18px; border-radius: 10px;
  transition: background 0.15s;
}
.btn:hover { background: var(--green-dark); }
.btn.secondary { background: transparent; color: var(--green); border: 2px solid var(--green); margin-top: 8px; padding: 11px 18px; }
.btn.secondary:hover { background: #eef5ef; }
.smallprint { font-size: 0.78rem; color: var(--muted); margin-top: 10px; text-align: center; }

section { padding: 34px 0; }
section h2 { font-size: 1.6rem; margin-bottom: 18px; }
.tablewrap { overflow-x: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }
table.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
table.compare th, table.compare td { padding: 13px 16px; text-align: left; font-size: 0.93rem; border-bottom: 1px solid #f0ebdf; }
table.compare th { background: #f4f0e5; font-weight: 700; }
table.compare tr:last-child td { border-bottom: none; }

.faq details { background: var(--card); border-radius: 10px; box-shadow: var(--shadow); margin-bottom: 10px; padding: 16px 20px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq details p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }

article.review { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 30px; margin: 30px 0; }
article.review h1 { font-size: 1.9rem; margin-bottom: 8px; }
article.review h2 { font-size: 1.25rem; margin: 26px 0 10px; }
article.review p { margin-bottom: 12px; }
article.review ul { margin: 0 0 12px 22px; }
.verdict { background: #eef5ef; border-left: 4px solid var(--green); padding: 16px 18px; border-radius: 0 10px 10px 0; margin: 20px 0; }

footer.site { border-top: 1px solid #eee5d5; margin-top: 40px; padding: 28px 0 40px; color: var(--muted); font-size: 0.85rem; }
footer.site a { color: var(--muted); }
.disclosure { max-width: 720px; margin-top: 8px; }

/* ---- Menu + gluten-free pages ---- */
.caveat { background: #fff4e2; border-left: 4px solid var(--accent); padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 8px 0 22px; font-size: 0.92rem; }
.caveat strong { color: #8a5a12; }
.gf-foot { margin-top: 26px; }

/* Menus tab: offers collapsed behind a one-line disclosure to save vertical space */
details.offers-strip { margin: 8px 0 18px; }
details.offers-strip > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; font-size: 0.98rem; font-weight: 600; color: var(--ink); padding: 10px 14px; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); }
details.offers-strip > summary::-webkit-details-marker { display: none; }
details.offers-strip > summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform .15s; }
details.offers-strip[open] > summary::after { transform: rotate(180deg); }
.os-count { font-size: 0.7rem; font-weight: 800; background: var(--green); color: #fff; border-radius: 999px; padding: 2px 9px; }
details.offers-strip ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 8px; margin-top: 8px; }
.offers-strip { padding: 8px 0 22px; }
.offers-strip h2 { font-size: 1.15rem; margin-bottom: 12px; }
.offers-strip ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 10px; }
.offers-strip li { background: var(--card); border-radius: 10px; box-shadow: var(--shadow); font-size: 0.9rem; }
.offers-strip li:not(:has(.offer-link)) { padding: 12px 14px; }
.offer-link { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 14px; color: inherit; text-decoration: none; transition: box-shadow .12s, transform .12s; border-radius: 10px; }
.offer-link:hover { box-shadow: 0 0 0 2px var(--green) inset; }
.offer-cta { margin-left: auto; font-weight: 700; color: var(--green); white-space: nowrap; }

.filterbar { position: sticky; top: 58px; background: var(--cream); padding: 14px 0; z-index: 5; border-bottom: 1px solid #eee5d5; margin-bottom: 18px; }
.brandbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fbtn { border: 1.5px solid #d9cfb8; background: var(--card); color: var(--muted); font-weight: 600; font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.fbtn.active { background: var(--green); color: #fff; border-color: var(--green); }
.toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 0.88rem; color: var(--muted); }
.toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.toggles input[type=search] { flex: 1; min-width: 160px; padding: 8px 12px; border: 1.5px solid #d9cfb8; border-radius: 8px; font-size: 0.9rem; }
.count { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }

.mealgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; }
.meal { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 15px 16px; }
.meal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.meal h3 { font-size: 0.98rem; line-height: 1.35; margin: 0 0 6px; }
.meal h3 a { text-decoration: none; color: var(--ink); }
.meal h3 a:hover { color: var(--green); text-decoration: underline; }
.meal-meta { font-size: 0.8rem; color: var(--muted); margin: 0; }
.allergens { font-size: 0.74rem; color: #9a6a55; margin: 6px 0 0; }
.chip { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; color: #fff; }
.brand-gousto { background: #e8622a; }
.brand-hellofresh { background: #2f7a4d; }
.brand-pe { background: #b5543b; }
.brand-greenchef { background: #2f8f8a; }
.brand-grubby { background: #6b8e23; }
.brand-mindfulchef { background: #3d9970; }
.brand-x { background: #888; }
.badge-new { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; background: var(--accent); color: #4d3a10; padding: 2px 7px; border-radius: 999px; }
.badge-gf { font-size: 0.66rem; font-weight: 800; background: #eef5ef; color: var(--green-dark); border: 1px solid var(--green); padding: 2px 7px; border-radius: 999px; }

/* Meal Kit Reviews dropdown */
nav.main { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
nav.main .dropdown { position: relative; display: inline-block; margin-left: 18px; }
nav.main .dropbtn { background: none; border: none; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 0.95rem; font-family: inherit; padding: 0; }
nav.main .dropbtn:hover, nav.main .dropdown:focus-within .dropbtn { color: var(--green); }
nav.main .dropdown-menu { display: none; position: absolute; right: 0; top: 100%; background: #fff; min-width: 190px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-radius: 8px; padding: 6px 0; z-index: 100; }
nav.main .dropdown:hover .dropdown-menu, nav.main .dropdown:focus-within .dropdown-menu { display: block; }
nav.main .dropdown-menu a { display: block; margin: 0; padding: 8px 16px; white-space: nowrap; }
nav.main .dropdown-menu a:hover { background: #f3f7f3; color: var(--green); }

.review .offer-note { background: #f3f7f3; border-left: 4px solid var(--green); border-radius: 6px; padding: 12px 16px; margin: 18px 0 10px; font-size: 1rem; }

/* ---- Discount-code pages (/deals) ---- */
.crumbs { font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { text-decoration: none; }
.codebox { border-radius: 12px; padding: 16px 18px; margin: 16px 0 18px; }
.codebox .cb-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 4px; }
.codebox .cb-note { font-size: 0.9rem; color: var(--muted); margin: 4px 0 0; }
.codebox.no-code { background: #f3f7f3; border: 1px solid #d7e6d9; border-left: 4px solid var(--green); }
.codebox.no-code .cb-label { color: var(--green-dark); }
.codebox.has-code { background: #fbf3e1; border: 1.5px dashed var(--accent); text-align: center; }
.codebox.has-code .cb-label { color: #8a5a12; }
.codebox.has-code .cb-code { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.08em; color: var(--ink); margin: 6px 0; font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; }
article.review ol { margin: 0 0 14px 22px; }
article.review ol li { margin-bottom: 6px; }
.deal-cross { margin: 18px 0 4px; font-weight: 700; }
.deal-cross a { text-decoration: none; }
.deal-list { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 10px; }
.deal-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--card); border: 1px solid #ece9e2; border-radius: 10px; padding: 13px 16px; text-decoration: none; color: var(--ink); transition: box-shadow .12s; }
.deal-row:hover { box-shadow: 0 0 0 2px var(--green) inset; }
.deal-row .dr-brand { font-weight: 800; min-width: 140px; }
.deal-row .dr-offer { flex: 1 1 220px; font-size: 0.9rem; color: var(--muted); }
.deal-row .dr-cta { margin-left: auto; font-weight: 800; color: var(--green); white-space: nowrap; }

.badge-vegan { background:#e3f3e1; color:#2f7d32; font-size:0.7rem; font-weight:700; padding:2px 7px; border-radius:5px; margin-left:6px; }
.badge-veg { background:#eef6e6; color:#5a7d1f; font-size:0.7rem; font-weight:700; padding:2px 7px; border-radius:5px; margin-left:6px; }

/* Diet-page per-brand commitment strip (replaces offers on GF/vegan/veg pages) */
.commit-strip{background:#fbfaf7;border:1px solid #e6e3dc;border-radius:12px;padding:1.1rem 1.3rem;margin:1.2rem 0}
.commit-strip h2{margin:0 0 .3rem;font-size:1.25rem}
.commit-strip .dc-intro{margin:0 0 1rem;font-size:.9rem;color:#5a5a5a}
.dc-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.dc-item{border:1px solid #ece9e2;border-radius:10px;padding:.75rem .85rem;background:#fff}
.dc-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}
.dc-brand{font-weight:700;color:#20342c;text-decoration:none}
.dc-brand:hover{text-decoration:underline}
.dc-sum{margin:.35rem 0 0;color:#333;font-size:.85rem;line-height:1.45}
.freshbox{background:#f2f7f2;border:1px solid #d7e6d9;border-left:4px solid var(--green);border-radius:8px;padding:.7rem .9rem;margin:.9rem 0 1.3rem}
.freshbox .fresh-lead{margin:0 0 .25rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--green-dark)}
.freshbox .fresh-body{margin:0;font-size:.92rem;line-height:1.5;color:#2c3a2f}
.consensus{margin:1.8rem 0 .5rem;padding-top:1.4rem;border-top:1px solid var(--line,#e5e5e5)}
.consensus h2{margin:0 0 .3rem}
.cons-intro{margin:.2rem 0 .9rem;color:var(--muted,#6a6a6a);font-size:.9rem}
.cons-tp{margin:.2rem 0 .9rem;font-size:.9rem;color:#333}
.cons-tp-badge{display:inline-block;font-weight:700;background:#f2f7f2;border:1px solid #d7e6d9;border-radius:6px;padding:1px 8px;margin-right:.35rem}
.cons-tp-note{color:#6a6a6a;font-size:.82rem}
.cons-standout{margin:.2rem 0 1.1rem;font-size:.95rem;line-height:1.55;color:#2c3a2f}
.cons-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem 1.4rem;margin:.4rem 0 1rem}
.cons-col h3{margin:0 0 .4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--green-dark,#2f6b3a)}
.cons-col ul{margin:0;padding-left:1.1rem}
.cons-col li{margin:0 0 .5rem;font-size:.88rem;line-height:1.45;color:#333}
.cons-src{margin:.3rem 0 0;font-size:.82rem}
.cons-src>summary{cursor:pointer;color:var(--muted,#6a6a6a)}
.cons-src ul{margin:.5rem 0 0;padding-left:1.1rem}
.cons-src li{margin:0 0 .25rem;word-break:break-all}
.cons-src a{color:#5a7a8a}
.dc-q{margin:.35rem 0 0;font-style:italic;color:#333;font-size:.85rem}
.dc-n{margin:.35rem 0 0;color:#6a6a6a;font-size:.78rem}
.dc-src{display:inline-block;margin-top:.4rem;font-size:.75rem}
.lvl{display:inline-block;font-size:.7rem;font-weight:700;padding:.12rem .5rem;border-radius:999px;line-height:1.5;white-space:nowrap}
.lvl-dedicated{background:#0d6b3f;color:#fff}
.lvl-natural{background:#1f8a52;color:#fff}
.lvl-labelled{background:#dff0e4;color:#0d6b3f}
.lvl-adaptable{background:#fdf1cf;color:#7a5a00}
.lvl-none{background:#f7dcdc;color:#8a1c1c}
.lvl-notstated,.lvl-unreachable,.lvl-pending{background:#eceaea;color:#777}

/* Carousel price-per-meal pill (build-prices.mjs) */
.card .ppm{display:inline-flex;align-items:baseline;gap:.28rem;margin:.1rem 0 .2rem;padding:.18rem .6rem;
  background:#eaf5ec;border:1px solid #cfe9d5;border-radius:999px;color:#0d6b3f;width:fit-content}
.card .ppm-num{font-size:1.06rem;font-weight:800;line-height:1}
.card .ppm-lab{font-size:.78rem;font-weight:600;color:#3a7a53}
.card .ppm-note{font-size:.66rem;font-weight:700;color:#7a5a00;background:#fdf1cf;border-radius:999px;padding:.06rem .42rem;margin-left:.1rem}