/* ==========================================================================
   Homepage, alternative cut — "oven to door"
   Mobile first throughout: the first screen is a conversion surface, so the
   hero copy and the postcode check come before the photograph, and nothing
   above the check is allowed to grow past it.
   ========================================================================== */

/* ---- Shared rhythm ------------------------------------------------------- */

.home-band { --pp-band-pad: var(--pp-space-5); }

.home-sectiontitle {
  font-family: var(--pp-font-display);
  font-size: 34px;
  line-height: 0.94;
  letter-spacing: var(--pp-display-track);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 22ch;
}

/* One section opener gets to shout louder than the others. */
.home-sectiontitle--xl {
  font-size: 46px;
  max-width: 16ch;
}

@media (min-width: 768px) {
  .home-band { --pp-band-pad: 76px; }
  .home-sectiontitle { font-size: 54px; }
  .home-sectiontitle--xl { font-size: 92px; line-height: 0.88; }
}

/* ---- Hero ---------------------------------------------------------------- */

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-space-4);
  padding-inline: var(--pp-gutter);
  padding-block: var(--pp-space-4) var(--pp-space-5);
}

.home-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pp-space-3);
}

/* The eyebrow has to be read before the headline and never compete with it. */
.home-hero__eyebrow {
  color: var(--pp-char);
  border-left: var(--pp-rule-solid) solid var(--pp-ovenred);
  padding-left: 10px;
}

.home-hero__title {
  font-family: var(--pp-font-display);
  font-size: 44px;
  line-height: 0.86;
  letter-spacing: var(--pp-display-track);
  text-transform: uppercase;
  text-wrap: balance;
}

/* "Oven to door in under four minutes" is the proposition — it starts its own
   line whatever the width, with only "oven to door" carrying the colour. The
   child selector keeps that inner span inline. */
.home-hero__title > span { display: block; }

.home-hero__lede {
  font-size: var(--pp-body-m);
  line-height: 1.5;
  color: var(--pp-ink);
  max-width: 44ch;
  text-wrap: pretty;
}

/* The incentive line under the button. The card's default hint is a mono stamp
   for a data point; here it is a sales line and has to read like one. */
.home-check .pp-check__hint {
  font-family: var(--pp-font-body);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-ink);
}

/* Narrow phones: the headline steps down rather than the check dropping off
   the first screen. */
@media (max-width: 380px) {
  .home-hero__title { font-size: 38px; }
  .home-hero .pp-postcode-input { font-size: 26px; min-height: 56px; }
}

@media (min-width: 600px) {
  .home-hero__title { font-size: 60px; }
  .home-hero__lede { font-size: var(--pp-body-l); }
}

@media (min-width: 901px) {
  .home-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--pp-space-5);
    padding-block: var(--pp-space-6);
  }

  .home-hero__title { font-size: 72px; }
}

@media (min-width: 1280px) {
  .home-hero__title { font-size: 84px; }
}

/* ---- Section 2 · the comparison ------------------------------------------ */

.home-versus {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
}

.home-versus__head {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

/* The section headline carries the line that used to have a band of its own,
   so it has to hit as hard as that band did: the second sentence takes the
   flame-on-char field, the same mark the manifesto panel above plays. */
.home-versus__title {
  max-width: 18ch;
}

.home-versus__mark {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0.1em 0.16em 0.14em;
  background: var(--pp-char);
  color: var(--pp-flame);
}

.home-versus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-space-3);
}

.home-versus__card {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  padding: var(--pp-space-4);
  border: var(--pp-rule-solid) solid var(--pp-char);
}

.home-versus__card--them {
  background: var(--pp-paper);
  color: var(--pp-char);
}

/* The route, as stops with an arrow between them. Wraps on a phone rather than
   squashing four labels onto one line. */
.home-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.home-route__stop {
  font-family: var(--pp-font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-route__stop + .home-route__stop::before {
  content: "→";
  margin-right: 10px;
  color: var(--pp-ovenred);
}

.home-route--us .home-route__stop + .home-route__stop::before { color: var(--pp-ember); }

.home-versus__figure {
  display: flex;
  flex-direction: column;
  /* The display face is set at 0.9, so the note needs the room back that the
     leading takes away — anything tighter and it sits on the value's descenders. */
  gap: 12px;
  font-family: var(--pp-font-display);
  line-height: 0.9;
  text-transform: uppercase;
}

/* One flex item, so an inline <u> inside it can't be blockified into a line
   of its own. */
.home-versus__figure-value { text-wrap: balance; }

.home-versus__figure-note {
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: inherit;
}

/* The whole point of the section is that one of these numbers is enormous and
   the other is not. */
.home-versus__figure--them {
  font-size: 40px;
  color: var(--pp-ovenred);
}

/* Reversed out of an ovenred field — the same mark the manifesto panel and the
   section headline play, in the colour this card belongs to. Inline-block so
   the field hugs the word rather than the line box. */
.home-versus__figure--them .home-versus__figure-em {
  display: inline-block;
  padding: 0.06em 0.16em 0.12em;
  background: var(--pp-ovenred);
  color: var(--pp-paper);
}

.home-versus__figure--us {
  font-size: 52px;
  color: var(--pp-flame);
}

.home-versus__copy {
  font-size: 16px;
  line-height: 1.5;
  color: var(--pp-surface-body);
  max-width: 40ch;
}

@media (min-width: 768px) {
  .home-versus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-versus__figure--them { font-size: 60px; }
  .home-versus__figure--us { font-size: 76px; }
}

/* ---- Section 3 · the food ------------------------------------------------ */

.home-food {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
}

.home-food__head {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

.home-food__lede {
  font-size: var(--pp-body-m);
  line-height: 1.55;
  color: var(--pp-ink);
  max-width: 52ch;
}

.home-food__shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-space-3);
}

.home-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-proof__item {
  padding: 7px 12px;
  background: var(--pp-paper);
  border: var(--pp-rule-hair) solid var(--pp-char);
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-space-3);
}

.home-menu__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--pp-space-4);
  background: var(--pp-paper);
  border: var(--pp-rule-solid) solid var(--pp-char);
}

.home-menu__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-space-3);
}

.home-menu__name {
  font-family: var(--pp-font-display);
  font-size: 26px;
  line-height: 0.95;
  text-transform: uppercase;
}

.home-menu__price {
  font-family: var(--pp-font-display);
  font-size: 26px;
  line-height: 0.95;
  color: var(--pp-ovenred);
}

.home-menu__copy {
  font-size: 16px;
  line-height: 1.5;
  color: var(--pp-ink);
}

.home-menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-3);
  flex-wrap: wrap;
}

.home-menu__note {
  font-family: var(--pp-font-data);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-stone);
}

@media (min-width: 768px) {
  .home-food__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Sections 4 and 5 · the steps ---------------------------------------- */

.home-how,
.home-night {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
}

.home-how__head {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

.home-how__lede {
  font-size: var(--pp-body-l);
  line-height: 1.45;
  color: var(--pp-semolina);
  max-width: 34ch;
  text-wrap: pretty;
}

.home-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pp-space-3);
}

.home-steps__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--pp-space-3);
  border-top: var(--pp-rule-solid) solid var(--pp-surface-rule);
}

.home-steps__index {
  font-family: var(--pp-font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--pp-surface-accent);
}

.home-steps__title {
  font-family: var(--pp-font-ui);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-steps__copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--pp-surface-body);
}

@media (min-width: 768px) {
  .home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pp-space-4); }
  .home-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Section 7 · the offer ----------------------------------------------- */

/* The offer is one short line, so it can carry more weight than the standard
   terms sentence the band was built for. */
.home-offer .pp-offer__terms {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--pp-char);
  max-width: 24ch;
}

/* Knocked out of a char block rather than recoloured — on ember, nothing else
   is loud enough to beat the words around it. */
.home-offer__highlight {
  background: var(--pp-char);
  color: var(--pp-semolina);
  /* Break the line before the block, never inside it. */
  white-space: nowrap;
  padding: 0 0.12em 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (min-width: 768px) {
  .home-offer .pp-offer__terms { font-size: 28px; }
}

/* ---- Section 8 · the last ask -------------------------------------------- */

.home-final {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
}

.home-final__head {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

/* On char the rule reads better in flame than in ovenred. */
.home-final__kicker {
  color: var(--pp-semolina);
  border-left: var(--pp-rule-solid) solid var(--pp-flame);
  padding-left: 10px;
}

.home-final__title { max-width: 16ch; }

.home-final__form {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  width: min(100%, 560px);
}

.home-final__note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--pp-ash);
  max-width: 46ch;
}

/* The field sits on char here, so it keeps its own light ground and the button
   stays the action colour. */
.home-final .pp-postcode-input { background: var(--pp-semolina); }

/* ---- The repeated ask ---------------------------------------------------- */

/* It sits between bands rather than inside one, so it carries its own air. */
.home-cta {
  padding: var(--pp-space-5) var(--pp-gutter);
  background: var(--pp-semolina);
}

@media (min-width: 768px) {
  .home-cta { padding-block: var(--pp-space-6); }
}