/* Indy's — the one override layer, loaded after tokens.css and site.css.

   2026-08-31. This file replaces alt.css and absorbs everything that was in it. alt.css stays on
   disk untouched because a.html — the frozen version A kept for Mateusz — does not load it and
   must not change. index.html now loads exactly three sheets: tokens.css, site.css, indys.css.

   Why one layer rather than editing site.css: alt.css was the last sheet, so a bare rule in it beat
   a media-query rule in site.css at every width. Any override written into site.css had to be
   repeated at three breakpoints or it silently broke one of them. With every change in the last
   sheet, source order settles it once.

   THE COLOURS ARE NOT PATRICK'S BRAND SHEET AND THAT IS DELIBERATE. His sheet gives #214E34 and
   #F7F5F1; what follows is the Flambia panel's palette, exported by Mateusz Cygan on Productive
   task #36 and chosen by Pawel on 2026-08-26 as version B. It stays because the customer walks
   from this page straight into that panel at the checkout, and a seam there costs more than the
   difference between two greens. Same reason the body face is Inter.

   Section 2 is version B as it shipped. Section 3 is the 2026-08-31 rework: a dark first screen,
   people in the photography, a rhythm of dark and light bands, and the contrast failures fixed. */

@font-face{
  font-family:'Rubik';
  src:url('fonts/rubik.woff2') format('woff2');
  font-weight:300 900;font-style:normal;font-display:swap;
}

/* ============================================================================================
   1. TOKENS — the panel's palette, plus one new ground and a repaired type scale
   ============================================================================================ */
:root{
  --ink:#1a1a17;
  --ink-soft:#5b5b52;
  --green:#26673e;
  --green-deep:#1c4d2e;
  --green-night:#153a22;   /* darker than the footer: the first screen and the handover band */
  --green-soft:#e7efe9;
  --cream:#f3f1ee;
  --cream-warm:#ffffff;
  --sand:#E7DFCE;          /* the third ground — see the note below */
  --paper:#ffffff;
  --acid:#eab713;
  --acid-deep:#d3a40f;
  --clay:#ee533a;
  --line:#d1d1d1;

  --font-display:'Rubik',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --radius:16px; --radius-sm:10px; --radius-pill:100px;
  --border:1px solid var(--line);
  --lift:0 4px 15px 0 rgba(0,0,0,.08);
  --lift-sm:0 2px 1px 1px rgba(0,0,0,.05);

  /* --cream-warm is #ffffff and the page ground is #f3f1ee. That is a step of 1.13:1, which no
     eye reads as a change of band. --sand sits 1.22:1 from the cream, holds green at 7.19:1 and
     ink at 12.1:1, and — the practical part — white meal trays photographed on pale grounds stop
     dissolving into the page. */

  /* The headings were 36px against a 40px h1, so no heading was ever THE heading. Pulling the
     middle out of the scale is what makes the first screen read as a first screen. */
  --step-4:1.875rem;
}
@media (min-width:900px){
  :root{ --step-4:2.25rem; }
}

/* ============================================================================================
   2. VERSION B — the panel's character, as it shipped on 2026-08-26
   ============================================================================================ */
h1,h2,h3{letter-spacing:-0.02em}
h1{line-height:1.08}

.btn{border-radius:var(--radius-pill);border:0;box-shadow:var(--lift-sm);
  transition:box-shadow .16s ease,transform .16s ease,background .16s ease}
.btn:hover{box-shadow:0 6px 18px 0 rgba(0,0,0,.14);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--quiet{background:var(--paper);border:var(--border)}

.eyebrow{background:var(--green-soft);border:0;border-radius:var(--radius-pill);
  color:var(--green);letter-spacing:.08em;transform:none;padding:.4em .9em}
.band--green .eyebrow{background:rgba(255,255,255,.16);color:#fff}

.card,.facts li,.how3 li{background:var(--paper);border:var(--border);border-top:var(--border);
  border-radius:var(--radius);padding:var(--sp-5);box-shadow:var(--lift-sm)}
.how3 li{gap:4px}
.how3 li::before{color:var(--clay)}
.facts b{color:var(--green)}

.daylabel{transform:none;border-radius:var(--radius);box-shadow:var(--lift);overflow:hidden}
.daylabel__top{background:var(--green);color:#fff;letter-spacing:.06em}
.daylabel__rows li{border-bottom:1px solid var(--line)}
.daylabel__foot{border-top:1px solid var(--line)}

.mark-acid{background:var(--acid);border-radius:6px;box-shadow:0 0 0 4px var(--acid)}

.plate img,.step img,.wall img,.strip__rail img{border-radius:var(--radius-sm)}
.wall{gap:6px}
@media (min-width:720px){.wall{gap:8px}}
.strip__rail{gap:10px}

.price b{color:var(--green)}
.stamp{background:var(--green-soft);border:0;border-radius:var(--radius-sm)}
.under li::before{border-radius:50%;background:var(--green);border:0;width:.55em;height:.55em;top:.55em}
.chip,.plan{border-radius:var(--radius-pill);border:var(--border);box-shadow:none}
.chip:hover,.plan:hover{box-shadow:var(--lift-sm);transform:none}
.chip--on,.plan--on{background:var(--acid);border-color:var(--acid)}
.code{border-radius:var(--radius-pill);border:var(--border)}
.versus{border-radius:var(--radius);overflow:hidden}
.versus thead .mine{background:var(--green);color:#fff}

.masthead{border-bottom:var(--border);background:var(--cream)}
.foot{background:var(--green-deep);border-top:0}

/* ============================================================================================
   3. THE 2026-08-31 REWORK
   ============================================================================================ */

/* --- 3.1 the first screen ------------------------------------------------------------------
   The button used to end at y=878 against a fold at y=844: twelve pixels of a forty-six pixel
   button were visible on a phone. The hero is now dark, the photograph is square rather than
   4:3, and the whole block is measured to land the button above the fold. Dark is also the only
   ground on which this accent works: #eab713 on the cream measures 2.2:1 and on --green-night
   it measures 6.9:1, which is why version B had been reduced to using it as a highlighter. */
.hero{background:var(--green-night)}
.hero__photo{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 38%;
  border:0;border-radius:0;border-bottom:0;display:block}
.hero__in{background:var(--green-night);color:#E8EFE7;padding-block:var(--sp-5) var(--sp-6)}
.hero__in h1{color:#fff;font-size:clamp(2rem,9.4vw,2.5rem);line-height:1.05;margin-bottom:var(--sp-3)}
/* Bialy welon nad ciemna zielenia daje #365641, a na nim zolc ma 4,40:1 przy 13px bold —
   ponizej normy. Przyciemnienie zamiast rozjasnienia daje #11301c i 7,71:1. */
.hero__in .eyebrow{background:rgba(0,0,0,.18);color:var(--acid)}
.hero__line{font-size:var(--step-1);color:#E8EFE7;margin-bottom:var(--sp-4)}
.hero__line b{color:var(--acid);font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.hero .price{color:#E8EFE7;margin-bottom:var(--sp-4)}
.hero .price b{color:var(--acid)}
.hero .price span{color:#C3D2C0;margin-top:var(--sp-1)}
.hero .stamp{background:rgba(255,255,255,.10);border:0;color:#E8EFE7;margin-top:var(--sp-4)}
.hero .mark-acid{background:var(--acid);box-shadow:0 0 0 4px var(--acid);color:var(--ink);
  border-radius:6px}

@media (min-width:560px) and (max-width:899px){
  .hero__photo{aspect-ratio:4/3;object-position:50% 38%}
}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:stretch;gap:0;max-width:none;padding-inline:0}
  .hero__media{order:-1}
  .hero__photo{height:100%;min-height:34rem;aspect-ratio:auto;object-position:50% 40%}
  .hero__in{display:flex;flex-direction:column;justify-content:center;
    padding:var(--sp-8) var(--sp-7);max-width:none}
  .hero__in h1{font-size:clamp(2.6rem,4.2vw,3.4rem)}
  .hero .btn--block{width:auto;align-self:flex-start}
}

/* --- 3.2 the dish strip goes back on a dark ground ------------------------------------------
   site.css had .strip{background:var(--ink)}; alt.css overrode it to white, which is how white
   trays came to sit on a white strip. The aspect-ratio is not cosmetic: height+width:auto throws
   the intrinsic ratio away and leaves the rail at zero width until every file has decoded. */
.strip{overflow:hidden;background:var(--green-night);border-block:0;padding-block:var(--sp-4)}
.strip__rail img{height:120px;aspect-ratio:700/527;width:auto;flex:none;border-radius:8px}
@media (min-width:720px){.strip__rail img{height:200px}}

/* --- 3.3 bands: a rhythm instead of one slam at 73% -----------------------------------------
   Dark now falls at 0, 14, 58, 76 and 100 per cent of the scroll. --cream-warm is retired as a
   band ground; two near-whites 1.13:1 apart cannot alternate. */
.band--warm{background:var(--sand)}
.band--sand{background:var(--sand)}

/* --- 3.4 the handover band, replacing the stockpot ------------------------------------------
   The old block reserved a 495x416 box, lazy-loaded a photograph declared at 700x929 that is
   really 380x504, and left a void until the scroll reached it. The claim is about the handover,
   so the picture is the handover. Type sits on a solid panel butted against the photograph
   rather than on a gradient over it, so the contrast is provable: #fff on --green-night is
   13.9:1 whatever the photograph happens to be doing at its bottom edge. */
.band--night{background:var(--green-night);color:#E8EFE7;padding-block:0}
.bleed{position:relative;margin:0;display:grid}
.bleed img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 42%;
  display:block;border-radius:0}
.bleed__say{padding:var(--sp-6) var(--sp-5) var(--sp-7);background:var(--green-night)}
.bleed__say h2{color:#fff;margin-bottom:var(--sp-3)}
.bleed__say .lede{color:#E8EFE7}
.bleed__meta{font-size:var(--step--1);color:#B9C8B8;margin:0}
.bleed__meta a{color:var(--acid)}
@media (min-width:900px){
  .bleed{grid-template-columns:1.25fr 1fr;align-items:stretch}
  .bleed img{aspect-ratio:auto;height:100%;min-height:32rem;object-position:50% 45%}
  .bleed__say{display:flex;flex-direction:column;justify-content:center;
    padding:var(--sp-8) var(--sp-7)}
}
/* --clay on any dark ground measures 2.99:1. It does not go here. */

/* --- 3.5 the food: one wide frame, then six large tiles -------------------------------------
   Twelve tiles in a 342px measure are 110px squares. A 110px square of a white tray is texture:
   you cannot identify a dish, so twelve buy nothing four would not, and they cost 230 kB. The
   sameness was manufactured by the grid itself — one crop, one size, one camera distance. */
.widecut{margin:0 0 var(--sp-5)}
.widecut img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%;display:block}
@media (min-width:560px){.widecut img{aspect-ratio:3/2;object-position:50% 50%}}
@media (min-width:900px){.widecut{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4,1.5rem)}.widecut img{aspect-ratio:3/2;object-position:50% 50%;max-height:none;border-radius:var(--radius-sm,10px)}}

.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
/* Piec z szesciu plikow to kadr poziomy 4:3. Wtloczone w 4:5 traca 40% szerokosci; kwadrat
   traci 25% i zostawia kafelek duzy. Prawdziwe zdjecia Patricka moga to zmienic. */
.wall img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:var(--radius-sm)}
@media (min-width:560px){.wall{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.wall{grid-template-columns:repeat(3,1fr);gap:8px}}

/* --- 3.6 the fridge picture against step two ------------------------------------------------
   The three-step list is the clearest thing on the page and had no image. Step two is literally
   "it is in your fridge that evening", and this is the only frame that shows the product inside
   the reader's own house. */
.how3 li.has-pic{display:grid;grid-template-columns:112px 1fr;column-gap:var(--sp-4);
  row-gap:2px;align-items:start}
.how3 li.has-pic::before{grid-column:2;grid-row:1}
.how3 li.has-pic img{grid-column:1;grid-row:1 / span 3;align-self:start;width:112px;
  aspect-ratio:1;object-fit:cover;object-position:50% 50%;border-radius:var(--radius-sm)}
.how3 li.has-pic img[src*=fridge]{object-position:50% 62%}
.how3 li.has-pic b{grid-column:2;grid-row:2}
.how3 li.has-pic span{grid-column:2;grid-row:3}
@media (min-width:720px){
  .how3 li.has-pic{grid-template-columns:160px 1fr}
  .how3 li.has-pic img{width:160px}
}

/* --- 3.7 the delivery band earns its 316 pixels ---------------------------------------------
   Split rather than a background image, so the text contrast stays provable. */
#delivery{padding:0;background:var(--green)}
#delivery .split{display:grid}
#delivery .split img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 42%;
  display:block}
#delivery .split__say{padding:var(--sp-7) var(--sp-5)}
#delivery .split__say h2{color:#fff}
#delivery .split__say{color:#EDF2EA}
@media (min-width:900px){
  #delivery .split{grid-template-columns:1fr 1fr;align-items:center}
  #delivery .split img{aspect-ratio:auto;height:100%;min-height:24rem}
  #delivery .split__say{padding:var(--sp-8) var(--sp-7)}
}

/* --- 3.8 desktop: the dead right column -----------------------------------------------------
   .narrow pins the price band and the whole FAQ to 704px of an 1180px container and leaves
   476px empty down the entire lower half. That is what makes 1280 read as a stretched phone. */
@media (min-width:900px){
  #price .narrow{max-width:var(--container);margin-inline:auto;display:grid;grid-template-columns:1.1fr 1fr;
    gap:var(--sp-8);align-items:center}
  #price .under{margin-top:0}
  .faq{max-width:none;display:grid;grid-template-columns:repeat(2,1fr);
    column-gap:var(--sp-8);align-items:start}
  .faq h2{grid-column:1 / -1}
  .faq > p{grid-column:1 / -1}
}

/* --- 3.8a band rhythm on wide screens ------------------------------------------------------
   site.css gives every band 64px top and bottom from 720px up, so two bands meet across 128px
   of nothing. Pawel, 2026-09-01: "za duzo pustej przestrzeni". 48px each side. */
@media (min-width:720px){.band{padding-block:var(--sp-7)}}

/* --- 3.9 contrast, measured against the live page -------------------------------------------
   Two failures, both fixed here:
     .band--green a   acid #eab713 on green #26673e   3.65:1  — body-size link, needs 4.5
     .faq summary::after  clay #ee533a on white       3.54:1  — 18px bold is under the large-text
                                                                threshold of 18.66px */
.band--green a:not(.btn){color:#fff;text-decoration-thickness:1px}
.faq summary::after{color:var(--green);font-size:1.25em;line-height:1}

/* --- 3.10 numerals and the two-weight heading -----------------------------------------------
   This is a kitchen that counts. Every figure on the page gets one treatment. The 300 weight on
   one word of a heading against the 800 around it is the cheapest distinctive thing available:
   both faces ship it in the subset, and the default instinct — human or machine — is to set a
   heading at one weight throughout. */
.price b,.totals b,.facts b,.daylabel__rows b,.box__kcal,#price h2 span,.hero__line b{
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:-0.03em}
h1 .soft,h2 .soft{font-weight:300;letter-spacing:-0.01em}

/* --- 3.11 the masthead mark ------------------------------------------------------------------
   The wordmark was 51 kB of RGBA PNG at 360x176 for a 104x43 box, in a sticky header, twice.
   Quantised to 32 colours it is 5 kB and identical to the eye. */
.mark img,.mark--full img{image-rendering:auto}

/* --- 3.12 poprawki po audycie technicznym z 2026-08-31 ------------------------------------- */
.mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)}
/* Odnosniki w stopce mialy 16px wysokosci przy wymaganym minimum 24px dla celu dotykowego. */
.foot ul a,.foot__social a{display:inline-block;padding-block:6px}