/* Indy's — one stylesheet for all six pages. Written at 390px first; the wider layouts are the
   exceptions at the bottom of each block. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:var(--step-0);line-height:1.6;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-underline-offset:3px}
h1,h2,h3{font-family:var(--font-display);color:var(--green);margin:0 0 var(--sp-4);
  line-height:1.04;letter-spacing:-0.03em;text-wrap:balance}
h1{font-size:var(--step-5);font-weight:800}
h2{font-size:var(--step-4);font-weight:800}
h3{font-size:var(--step-1);font-weight:700;line-height:1.22;letter-spacing:-0.015em}
p{margin:0 0 var(--sp-4)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-5)}
.narrow{max-width:44rem;margin-inline:0}
.band{padding-block:var(--sp-7)}
.band--warm{background:var(--cream-warm)}
.band--green{background:var(--green);color:#EDF2EA}
.band--green h2,.band--green h3{color:#fff}
.band--green a{color:var(--acid)}
.band--green .btn{color:var(--ink)}
.band--green .eyebrow{background:transparent;border-color:var(--acid);color:var(--acid)}
.eyebrow{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--cream-warm);
  border:1px solid var(--ink);padding:.3em .7em;margin:0 0 var(--sp-4);transform:rotate(-1deg)}
.lede{font-size:var(--step-1);color:var(--ink-soft)}
.mark-acid{background:var(--acid);box-shadow:0 0 0 2px var(--acid);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---- header ------------------------------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:var(--border)}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-3)}
/* The wordmark file carries its tagline underneath. The header shows the name only; the footer
   shows the artwork whole. The image keeps its own ratio and the box clips it — no stretching. */
.mark{display:block;width:104px;height:43px;overflow:hidden}
.mark img{width:104px;height:auto}
.mark--full{width:180px;height:auto;overflow:visible}
.mark--full img{width:180px}

/* ---- buttons: acid fill, ink border, ink label. Never white on green. ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-display);font-weight:700;font-size:var(--step-0);line-height:1;
  padding:.95em 1.4em;border-radius:var(--radius-sm);border:var(--border);
  background:var(--acid);color:var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:var(--lift);transition:box-shadow .12s ease,transform .12s ease,background .12s ease}
.btn:hover{background:var(--acid-deep);box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}
.btn:active{background:var(--acid-deep)}
.btn--quiet{background:var(--paper);box-shadow:var(--lift-sm)}
.btn--quiet:hover{background:var(--cream-warm);transform:translate(3px,3px)}
.btn--block{width:100%}
.btn--sm{padding:.62em 1em;font-size:var(--step--1);box-shadow:var(--lift-sm)}
.btn--sm:hover{transform:translate(3px,3px)}

/* ---- hero: photograph, headline, mechanism, the price fork, one button --------------- */
.hero__photo{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 42%;border-bottom:var(--border)}
.hero__in{padding-block:var(--sp-5) var(--sp-7)}
.hero__line{font-size:var(--step-1);margin-bottom:var(--sp-5)}

/* the price fork: two plans side by side, the way a buyer actually compares them */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.fork__cell{background:var(--paper);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--lift-sm);padding:var(--sp-4)}
.fork__cell b{display:block;font-family:var(--font-display);font-size:var(--step-3);
  font-weight:800;color:var(--green);line-height:1;letter-spacing:-0.03em}
.fork__cell span{display:block;font-size:var(--step--1);color:var(--ink-soft);margin-top:var(--sp-2)}
.fork__cell em{display:block;font-family:var(--font-display);font-style:normal;font-weight:700;
  font-size:var(--step-0);margin-bottom:var(--sp-2)}
.hero__cta{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.hero__note{font-size:var(--step--1);color:var(--ink-soft);margin:0}

/* ---- the food ------------------------------------------------------------------------ */
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.plates figure:first-child{grid-column:span 2;grid-row:span 2}
.plate{margin:0}
.plate img{aspect-ratio:1/1;object-fit:cover;border:var(--border);border-radius:var(--radius-sm)}
.plate figcaption{font-size:var(--step--1);color:var(--ink-soft);margin-top:var(--sp-2);line-height:1.35}

/* ---- the picker: the day drawn as the boxes it arrives in ---------------------------- */
.picker{background:var(--paper);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--lift);padding:var(--sp-5)}
.planrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-5)}
/* Plan choice is two pictures of a day, not two words. Making variants legible was the single
   best-measured change in the internal corpus: +18.44%. */
.plan{display:flex;flex-direction:column;gap:var(--sp-2);text-align:left;cursor:pointer;
  background:var(--cream);border:var(--border);border-radius:var(--radius);padding:var(--sp-3);
  box-shadow:var(--lift-sm);font-family:var(--font-body);color:var(--ink);
  transition:background .12s ease,box-shadow .12s ease,transform .12s ease}
.plan:hover{box-shadow:0 0 0 var(--ink);transform:translate(3px,3px)}
.plan--on{background:var(--acid)}
.plan__pic{display:flex;align-items:flex-end;gap:6px;height:26px}
.plan__pic i{display:block;flex:1;max-width:14px;background:var(--green)}
.plan--on .plan__pic i{background:var(--ink)}
.plan__name{font-family:var(--font-display);font-weight:700;font-size:var(--step-0);line-height:1.1}
.plan__from{font-size:var(--step--1);color:var(--ink-soft)}
.plan--on .plan__from{color:var(--ink)}

.chiprow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.chip{font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:.55em .85em;border:var(--border);border-radius:var(--radius-sm);
  background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:var(--lift-sm);
  transition:background .12s ease,box-shadow .12s ease,transform .12s ease}
.chip span{font-family:var(--font-body);font-weight:400;font-size:.75rem;color:var(--ink-soft)}
.chip:hover{box-shadow:0 0 0 var(--ink);transform:translate(3px,3px)}
.chip--on{background:var(--acid)}
.chip--on span{color:var(--ink)}

.tray{display:flex;flex-direction:column;gap:var(--sp-2);margin:var(--sp-4) 0;
  background:var(--cream-warm);border:var(--border);border-radius:var(--radius-sm);padding:var(--sp-3)}
.box{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:.7em .9em;background:var(--paper);border:var(--border);overflow:hidden}
.box::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill);
  background:var(--green-soft)}
.box__slot,.box__kcal{position:relative}
.box__slot{font-family:var(--font-display);font-weight:700;color:var(--green);font-size:var(--step--1)}
.box__kcal{font-size:var(--step--1);font-weight:600;white-space:nowrap;
  background:var(--acid);border:var(--border);border-radius:var(--radius-pill);padding:.1em .6em}
.totals{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:var(--border)}
.totals div{display:flex;flex-direction:column}
.totals b{font-family:var(--font-display);font-size:var(--step-2);font-weight:800;color:var(--green);
  line-height:1.05;letter-spacing:-0.03em}
.totals span{font-size:var(--step--1);color:var(--ink-soft)}
.switch{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--step--1);margin:var(--sp-4) 0 var(--sp-5)}
.switch input{width:1.15rem;height:1.15rem;accent-color:var(--green)}
.note{font-size:var(--step--1);background:var(--green-soft);border:var(--border);
  padding:var(--sp-3);border-radius:var(--radius-sm);margin-top:var(--sp-3)}

/* ---- facts, cards, steps ------------------------------------------------------------- */
.facts{display:grid;gap:var(--sp-4);margin:0 0 var(--sp-6);padding:0;list-style:none}
.facts li{border-top:3px solid var(--ink);padding:var(--sp-3) 0 0;font-size:var(--step-0)}
.facts b.quiet{font-size:var(--step-1)}
.facts b{display:block;font-family:var(--font-display);font-size:var(--step-3);font-weight:800;
  color:var(--green);line-height:1;letter-spacing:-0.03em;margin-bottom:var(--sp-2)}
.cards{display:grid;gap:var(--sp-4)}
.card{border-top:3px solid var(--ink);padding:var(--sp-3) 0 0}
.card p:last-child{margin-bottom:0}
.steps{display:grid;gap:var(--sp-5);counter-reset:step}
.step img{border:var(--border);aspect-ratio:4/5;object-fit:cover;object-position:center 45%;
  margin-bottom:var(--sp-3)}
.step h3{display:flex;align-items:baseline;gap:.5em}
.step h3::before{counter-increment:step;content:counter(step);font-size:var(--step--1);
  color:var(--clay);font-weight:800}

/* ---- the comparison: an argument, not decoration ------------------------------------- */
.versus{min-width:34rem;width:100%;border-collapse:separate;border-spacing:0;font-size:var(--step--1);
  background:var(--paper);border:var(--border);border-radius:var(--radius);overflow:hidden}
.versus th,.versus td{text-align:left;vertical-align:top;padding:.8em .8em;border-bottom:1px solid var(--line)}
.versus thead th{font-family:var(--font-display);font-weight:700;color:var(--green);
  background:var(--cream-warm);border-bottom:var(--border)}
.versus tbody th{font-weight:600;color:var(--ink-soft);width:34%}
.versus .mine{background:var(--green-soft)}
.versus thead .mine{background:var(--green);color:#fff}
.versus tr:last-child th,.versus tr:last-child td{border-bottom:0}

/* ---- faq ------------------------------------------------------------------------------ */
.faq details{border-bottom:var(--border);padding:var(--sp-4) 0}
.faq summary{font-family:var(--font-display);font-weight:700;color:var(--green);cursor:pointer;
  font-size:var(--step-1);list-style:none;display:flex;justify-content:space-between;gap:var(--sp-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--clay);font-weight:800}
.faq details[open] summary::after{content:"\2013"}
.faq__body{padding-top:var(--sp-3)}
.faq__body p:last-child{margin-bottom:0}

/* ---- districts ------------------------------------------------------------------------ */
.districts{display:grid;gap:var(--sp-5)}
.district p{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0}
.code{font-family:var(--font-display);font-weight:700;font-size:var(--step--1);
  background:var(--paper);border:var(--border);padding:.35em .7em}

/* ---- long-form legal pages ------------------------------------------------------------- */
.doc h2{font-size:var(--step-2);margin-top:var(--sp-6)}
.doc h3{margin-top:var(--sp-5)}
.doc ul,.doc ol{padding-left:1.2em;margin:0 0 var(--sp-4)}
.doc li{margin-bottom:var(--sp-2)}
.doc table{width:100%;border-collapse:collapse;font-size:var(--step--1);margin-bottom:var(--sp-4)}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.6em .7em;border-bottom:1px solid var(--line)}
.doc th{font-family:var(--font-display);color:var(--green)}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc__meta{font-size:var(--step--1);color:var(--ink-soft)}

/* ---- footer ---------------------------------------------------------------------------- */
.foot{background:var(--green-deep);color:#DDE6DC;padding-block:var(--sp-7);font-size:var(--step--1);
  border-top:var(--border)}
.foot a{color:#fff}
.foot__grid{display:grid;gap:var(--sp-5)}
.foot h3{color:#fff;font-size:var(--step-0);margin-bottom:var(--sp-3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.foot__legal{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.2);
  color:#B9C8B8;line-height:1.5}
.foot .mark--full img{filter:brightness(0) invert(1)}

/* ---- wider screens ---------------------------------------------------------------------- */
@media (min-width:720px){
  .band{padding-block:var(--sp-8)}
  .plates{grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:repeat(3,1fr)}
  .districts{grid-template-columns:repeat(3,1fr)}
  .foot__grid{grid-template-columns:1.4fr 1fr 1fr}
  .hero__cta{flex-direction:row;align-items:center}
  .btn--block{width:auto}
  .totals{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:960px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:stretch;
    max-width:var(--container);margin-inline:auto;gap:var(--sp-6);padding-inline:var(--sp-5)}
  .hero__in{padding:var(--sp-8) 0;align-self:center}
  .hero__photo{height:100%;min-height:32rem;aspect-ratio:auto;border:var(--border)}
  .hero__media{order:-1}
  .picker{padding:var(--sp-6)}
  .picker__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---- the strip: dishes moving past, before a word is read ---------------------------- */
.strip{overflow:hidden;background:var(--ink);border-block:var(--border)}
.strip__rail{display:flex;gap:8px;width:max-content;padding:8px;animation:rail 44s linear infinite}
.strip__rail img{height:148px;width:auto;flex:none;border-radius:6px}
@keyframes rail{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 4px))}}
.strip:hover .strip__rail{animation-play-state:paused}
@media (min-width:720px){.strip__rail img{height:216px}}
@media (prefers-reduced-motion:reduce){.strip{overflow-x:auto}.strip__rail{animation:none}}

.under{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2);font-size:var(--step--1);color:var(--ink-soft)}
.under li{padding-left:1.3em;position:relative}
.under li::before{content:"";position:absolute;left:0;top:.45em;width:.7em;height:.7em;background:var(--green);border:1px solid var(--ink)}

/* ---- the launch stamp, the hero list, and the two sides of the fork -------------------- */
.stamp{font-size:var(--step--1);margin:0;padding:var(--sp-3);background:var(--green-soft);
  border:var(--border);color:var(--ink)}
.under--hero{margin-top:var(--sp-5);gap:var(--sp-3)}
.fork__cell--them{background:transparent;box-shadow:none;border-style:dashed;color:var(--ink-soft)}
.fork__cell--them b{color:var(--ink-soft)}
.fork__cell--us{background:var(--paper)}

/* ---- the label: the object this kitchen makes, drawn from offer.json ------------------- */
.labelrow{display:grid;gap:var(--sp-6)}
.daylabel{background:var(--cream-warm);border:var(--border);box-shadow:var(--lift);
  transform:rotate(-1.4deg);max-width:22rem;align-self:start}
.daylabel__top{display:flex;justify-content:space-between;gap:var(--sp-3);
  background:var(--ink);color:var(--cream);font-family:var(--font-display);font-weight:700;
  font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;padding:.5em .8em}
.daylabel__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);
  color:var(--green);letter-spacing:-0.02em;margin:var(--sp-4) var(--sp-4) var(--sp-3)}
.daylabel__rows{list-style:none;margin:0;padding:0 var(--sp-4)}
.daylabel__rows li{display:flex;justify-content:space-between;gap:var(--sp-4);
  padding:.5em 0;border-bottom:1px dashed var(--ink)}
.daylabel__rows li:last-child{border-bottom:0}
.daylabel__rows span{font-size:var(--step-0)}
.daylabel__rows b{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums}
.daylabel__foot{border-top:var(--border);margin-top:var(--sp-3);padding:.7em .8em;
  font-size:var(--step--1);color:var(--ink-soft)}

/* ---- card and promise grids ------------------------------------------------------------ */
.cards--two{margin-top:var(--sp-6)}
.facts--promises b.quiet{font-size:var(--step-1);color:var(--green)}

/* ---- district pills sit on green here, so they need their own ground ------------------- */
.band--green .districts{margin-top:var(--sp-5)}
.band--green .district h3{font-size:var(--step-0);margin-bottom:var(--sp-3)}
.band--green .code{background:transparent;border-color:var(--acid);color:var(--acid)}

/* ---- a phone needs a 44px target, and the whole switch row is the target --------------- */
@media (max-width:719px){
  .masthead .btn--sm{min-height:44px;padding:.62em 1.1em}
  /* four columns do not fit 390px; the same argument reads better stacked */
  .versus,.versus thead,.versus tbody,.versus tr,.versus th,.versus td{display:block;min-width:0}
  .versus{border:0;background:none}
  .versus thead{display:none}
  .versus tbody tr{border:var(--border);background:var(--paper);margin-bottom:var(--sp-4)}
  .versus tbody th{width:auto;background:var(--cream-warm);border-bottom:var(--border);
    font-family:var(--font-display);color:var(--green)}
  .versus tbody td{border-bottom:1px solid var(--line)}
  .versus tbody td::before{content:attr(data-col);display:block;font-size:var(--step--1);
    color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
}
.switch{cursor:pointer}
.switch input{width:1.4rem;height:1.4rem}

/* ---- if offer.json never arrives, say so rather than showing a page with no prices ----- */
.offer-failed [data-offer]::after,.offer-failed [data-arith]::after{content:"\2014"}
.offer-failed .picker::before{content:"Prices did not load. Please refresh the page.";
  display:block;padding:var(--sp-4);border:var(--border);background:var(--green-soft);
  margin-bottom:var(--sp-4);font-size:var(--step-0)}

@media (min-width:960px){
  .labelrow{grid-template-columns:22rem minmax(0,1fr);align-items:center;gap:var(--sp-8)}
}

/* ---- the wall: the food, dense, almost no words ---------------------------------------
   Ten of the best-converting direct-to-consumer pages carry a median of 95 photographs.
   This is where ours come from. */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.wall img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
@media (min-width:560px){.wall{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.wall{grid-template-columns:repeat(6,1fr);gap:4px}}

/* ---- the price line in the hero -------------------------------------------------------- */
.price{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.15;
  color:var(--ink);margin:0 0 var(--sp-5);display:flex;align-items:baseline;flex-wrap:wrap;gap:.35em}
.price span{display:block;width:100%;margin-top:var(--sp-2);font-family:var(--font-body);font-weight:400;
  font-size:var(--step--1);color:var(--ink-soft)}
.price b{font-size:var(--step-3);font-weight:800;color:var(--green);letter-spacing:-0.03em}

/* ---- three steps, one line each --------------------------------------------------------- */
.how3{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.how3 li{counter-increment:s;border-top:3px solid var(--ink);padding-top:var(--sp-3);
  display:flex;flex-direction:column;gap:2px}
.how3 li::before{content:counter(s);font-family:var(--font-display);font-weight:800;
  font-size:var(--step-2);color:var(--clay);line-height:1}
.how3 b{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--green)}
.how3 span{color:var(--ink-soft)}
@media (min-width:720px){.how3{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}}

/* ---- the kitchen row stays three across, even on a phone -------------------------------- */
.steps--tight{grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.steps--tight .step h3{font-size:var(--step--1);margin:var(--sp-2) 0 0;display:block}
.steps--tight .step h3::before{content:none}
.steps--tight img{margin-bottom:0}

/* ---- the review switch. Not part of either design; it exists so two versions can be
       compared on one phone without typing a second address. Removed before launch. ------ */
.abswitch{position:fixed;right:12px;bottom:12px;z-index:60;display:flex;gap:0;
  font-family:var(--font-body);font-size:13px;background:#fff;border:1px solid #1a1a17;
  border-radius:100px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.abswitch a{padding:.55em 1em;color:#1a1a17;text-decoration:none;line-height:1}
.abswitch a[aria-current="page"]{background:#1a1a17;color:#fff}

/* the one social link Patrick has today; Instagram joins it when he sends the handle */
.foot__social{margin-top:var(--sp-3)}
.foot__social a{text-decoration:underline;text-underline-offset:3px}

/* ---- the merged mechanism list, stacked beside the day label ------------------------- */
.how3--stack{grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:var(--sp-5)}

/* ---- the kitchen: one photograph beside the sentence, never under a caption ---------- */
.kitchen{display:grid;gap:var(--sp-5);align-items:start}
.kitchen img{width:100%;height:auto;display:block;object-fit:cover;max-height:26rem}
@media (min-width:720px){
  .kitchen{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:var(--sp-6)}
  .kitchen img{max-height:22rem}
}