/**
 * Fava — Restaurant Landing page template
 * templates/page-restaurant-landing.php
 *
 * Every colour here is sampled from the approved mockup, and the three
 * section backgrounds are locked to the flat colour baked into the left
 * edge of their photograph (assets/img/rest-00{1,2,3}.jpeg) so the
 * photo's own gradient dissolves into the section with no visible seam:
 *
 *   rest-001.jpeg -> #fcfbf6  (hero, cream)
 *   rest-002.jpeg -> #163629  (dark green band)
 *   rest-003.jpeg -> #fdfaf5  (closing CTA, cream)
 *
 * Each photo is flat for its left ~42-50% and only becomes image after
 * ~55-63%, which is why the copy column is capped at ~54% on desktop and
 * each section lays a short gradient of its own colour over the photo's
 * left edge — together that keeps text on flat colour and never on the
 * photograph, including at the widths where `cover` crops the flat band
 * away.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */
.fava-landing {
  /* Greens */
  --fl-green:        #1e3f2d;  /* buttons, wordmark, footer */
  --fl-green-deep:   #163629;  /* dark band — matches rest-002's left edge */
  --fl-green-check:  #336532;  /* "Included" check circles */
  --fl-green-ink:    #1a4230;  /* green run of the h1 */

  /* Creams */
  --fl-cream:        #fcfbf6;  /* hero — matches rest-001's left edge */
  --fl-cream-2:      #fdfaf5;  /* closing CTA — matches rest-003's left edge */
  --fl-cream-3:      #fefdf9;  /* header + comparison section */
  --fl-card-grey:    #f0efeb;  /* "Other Platforms" card */
  --fl-card-green:   #eef4e6;  /* "fava" card */
  --fl-card-tool:    #f8f7f2;  /* tool cards */
  --fl-pill:         #e0dfdb;  /* competitor name pills */
  --fl-tile:         #e5e4e0;  /* icon tiles in the "Other Platforms" card */
  --fl-row-line:     rgba(18,16,13,.065); /* hairline between comparison rows */

  /* Gold / amber */
  --fl-gold:         #c5822a;  /* eyebrows + script accents on cream */
  --fl-gold-light:   #d9a441;  /* eyebrows + script accents on dark green */

  /* Ink */
  --fl-ink:          #12100d;
  --fl-body:         #55534e;
  --fl-muted:        #75726c;
  --fl-on-dark:      #f4f1e9;
  --fl-on-dark-soft: #cfd9cf;

  --fl-line:         rgba(18,16,13,.09);
  --fl-line-dark:    rgba(244,241,233,.22);

  --fl-serif:  "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --fl-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fl-brand:  "Nunito", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --fl-script: "Caveat", "Segoe Script", cursive;

  --fl-gutter: clamp(20px, 5.33vw, 80px);
}

/* ── Reset (scoped — this template ships its own document) ───────────── */
.fava-landing *,
.fava-landing *::before,
.fava-landing *::after { box-sizing: border-box; }

html.fava-landing-html { -webkit-text-size-adjust: 100%; }

.fava-landing {
  margin: 0;
  font-family: var(--fl-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fl-body);
  background: var(--fl-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.fava-landing img { max-width: 100%; display: block; }
/* :where() keeps this reset at zero specificity — a plain `.fava-landing a`
   selector outranks `.fl-btn`, which silently repainted every button label
   in body ink instead of white. */
.fava-landing :where(a) { text-decoration: none; color: inherit; }
/* :where() drops these to zero specificity, so a later component rule wins
   on source order. As a plain `.fava-landing h2` selector (0,1,1) the reset
   outranked every `.fl-*` class (0,1,0) that sets a margin — which silently
   threw away `.fl-compare__title`'s `margin: 0 auto <bottom>` (leaving the
   heading uncentred and flush against the cards), `.fl-punch`'s top margin,
   and the eyebrow / card-sub / tool-title margins. */
.fava-landing :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; }
.fava-landing :where(ul) { list-style: none; }

.fava-landing button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: none;
  box-shadow: none;
  text-shadow: none;
  line-height: normal;
}
/* Our icons draw with strokes; a theme's `svg { fill: currentColor }` would
   otherwise beat the inline fill="none" attribute and flood every glyph.
   The inline fill="currentColor" on individual dots still wins locally,
   because a presentation attribute on an element beats an inherited value. */
.fava-landing svg { fill: none; }

.fava-landing :where(a, button):focus-visible {
  outline: 2px solid var(--fl-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.fl-container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--fl-gutter);
}

.fl-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shared type ─────────────────────────────────────────────────────── */
.fl-eyebrow {
  font-size: clamp(.72rem, .9vw, .8125rem);   /* 13px */
  font-weight: 700;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--fl-gold);
  margin-bottom: 1.15rem;
}
.fl-eyebrow--on-dark { color: var(--fl-gold-light); }

.fl-h1 {
  font-family: var(--fl-serif);
  font-size: clamp(2.1rem, 3.61vw, 3.25rem); /* 52px */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--fl-ink);
}
.fl-h1 .fl-h1__green { color: var(--fl-green-ink); }

.fl-h2 {
  font-family: var(--fl-serif);
  font-size: clamp(1.6rem, 2.36vw, 2.125rem); /* 34px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--fl-ink);
}

.fl-lead {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--fl-body);
}

.fl-note {
  font-size: .85rem;
  color: var(--fl-muted);
}

/* An inline mention of the brand inside running copy: the mockup keeps it
   in the surrounding typeface (serif in a heading, sans in a paragraph) and
   only leans on weight, so it is NOT the Nunito wordmark. */
.fl-brand-inline { font-weight: 700; color: inherit; }
.fl-cta .fl-brand-inline       { color: var(--fl-ink); }
.fl-band__copy .fl-brand-inline { color: var(--fl-on-dark); }

/* The lowercase "fava" wordmark — header, comparison card, footer only. */
.fl-wordmark {
  font-family: var(--fl-brand);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--fl-green);
  line-height: 1;
  text-transform: lowercase;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.fl-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  height: clamp(46px, 3.61vw, 52px);
  padding: 0 clamp(20px, 1.95vw, 28px);
  border: 0;
  border-radius: 999px;
  background: var(--fl-green);
  color: #fff;
  font-family: var(--fl-sans);
  font-size: clamp(.9375rem, 1.11vw, 1rem);
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.fl-btn:hover { background: #17311f; transform: translateY(-1px); }
.fl-btn svg   { flex: none; transition: transform .18s ease; }
.fl-btn:hover svg { transform: translateX(3px); }

.fl-btn--sm { height: 44px; padding: 0 22px; font-size: .9375rem; }

.fl-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(244,241,233,.55);
  color: var(--fl-on-dark);
}
.fl-btn--ghost:hover { background: rgba(244,241,233,.1); border-color: var(--fl-on-dark); }

/* ── Header ──────────────────────────────────────────────────────────── */
.fl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fl-cream-3);
  border-bottom: 1px solid var(--fl-line);
}
.fl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 80px;
}
.fl-header .fl-wordmark { font-size: clamp(1.85rem, 2.36vw, 2.125rem); }

.fl-nav {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}
.fl-nav__link {
  font-size: clamp(.875rem, 1.04vw, .9375rem);
  font-weight: 500;
  color: #2c2a26;
  transition: color .15s ease;
}
.fl-nav__link:hover { color: var(--fl-green); }

/* Mobile nav toggle — hidden until the links collapse. Selectors are kept
   at (0,2,0) so a theme's own button rules cannot reach past them. */
.fava-landing .fl-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--fl-ink);
  cursor: pointer;
}
.fava-landing .fl-nav-toggle:hover { background: rgba(18,16,13,.04); }

/* The toggle's paint (background, border, bar colour) lives in inline
   styles on the element itself — see the button in
   templates/page-restaurant-landing.php for why. Only `display` is set from
   here, so the media query below can still show and hide it. */
.fava-landing .fl-nav-toggle > span:not(.fl-sr) { flex: none; }

/* ── Split section (hero + closing CTA share this skeleton) ──────────── */
.fl-split {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--fl-cream);
}
.fl-split__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.fl-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
/* Extends the photo's baked-in fade leftwards, so the copy column keeps
   sitting on flat colour even when `cover` crops the flat band away on
   shorter/narrower viewports. */
.fl-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--fl-cream) 0%,
    var(--fl-cream) 20%,
    rgba(252,251,246,0) 52%
  );
}
.fl-split__copy {
  position: relative;
  z-index: 1;
  max-width: 46%;
  padding-block: clamp(3.25rem, 5.5vw, 5rem);
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.fava-landing .fl-hero { min-height: 640px; display: flex; align-items: center; }
.fl-hero .fl-split__copy { max-width: 54%; }
.fl-hero .fl-lead { margin-top: 1.6rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; }
.fl-hero .fl-btn  { margin-top: 2.35rem; height: clamp(50px, 4.03vw, 58px); padding: 0 clamp(22px, 2.22vw, 32px); font-size: clamp(.975rem, 1.18vw, 1.0625rem); }
.fl-hero .fl-note { margin-top: 1.5rem; }

/* Handwritten line sitting over the photograph. */
.fl-script {
  font-family: var(--fl-script);
  font-weight: 500;
  line-height: .98;
  color: #f7f3e8;
}
.fl-hero__script {
  position: absolute;
  z-index: 2;
  left: 58%;
  top: 12%;
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  transform: rotate(-3deg);
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  pointer-events: none;
}
.fl-hero__script .fl-swoosh { margin-top: .15rem; margin-left: .1rem; }

/* The chalk-lettered column on the dark panel at the far right. */
.fl-hero__chalk {
  position: absolute;
  z-index: 2;
  right: clamp(3px, .3vw, 6px);
  top: 13%;
  width: clamp(84px, 6.6vw, 104px);
  font-family: var(--fl-script);
  font-size: clamp(.85rem, 1.04vw, .95rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* Chalk, not white type: a warm off-white that never reaches pure white,
     a tight bright halo for the dust that clings to the stroke, and a soft
     dark spread so it still sits INTO the slate rather than on top of it.
     The roughened edge comes from the SVG filter below. */
  color: #e8e1d1;
  opacity: .93;
  text-shadow:
    0 0 1px rgba(255,255,255,.5),
    0 0 5px rgba(255,255,255,.16),
    0 1px 7px rgba(0,0,0,.5);
  filter: url(#fl-chalk);
  pointer-events: none;
}
/* Hidden defs carrier for the chalk filter — see the <svg class="fl-defs">
   at the top of templates/page-restaurant-landing.php. */
.fl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.fl-hero__chalk .fl-swoosh { margin-top: .35rem; }

.fl-swoosh {
  display: block;
  color: var(--fl-gold-light);
  max-width: 100%;
  height: auto;
}

/* ── Comparison ──────────────────────────────────────────────────────── */
.fl-compare {
  background: var(--fl-cream-3);
  padding: clamp(4rem, 6vw, 5.5rem) 0 clamp(4rem, 6vw, 5.5rem);
}
/* Wide enough to sit on one line at desktop, as the mockup has it. */
.fl-compare__title {
  text-align: center;
  max-width: 62rem;
  margin: 0 auto clamp(2.5rem, 3.6vw, 3.25rem);
}

.fl-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
  max-width: 1320px;
  margin-inline: auto;
}

.fl-card {
  border-radius: 16px;
  padding: clamp(1.75rem, 2.4vw, 2.25rem) clamp(1.5rem, 2.2vw, 2rem) clamp(1.85rem, 2.6vw, 2.4rem);
}
.fl-card--other { background: var(--fl-card-grey); }
.fl-card--fava  { background: var(--fl-card-green); }

.fl-card__head { text-align: center; margin-bottom: 1.9rem; }
.fl-card__title {
  font-family: var(--fl-serif);
  font-size: clamp(1.35rem, 1.81vw, 1.625rem); /* 26px */
  font-weight: 700;
  color: var(--fl-ink);
  line-height: 1.2;
}
.fl-card__head .fl-wordmark { font-size: clamp(1.9rem, 2.36vw, 2.125rem); }
.fl-card__sub {
  margin-top: .45rem;
  font-size: .845rem;
  color: var(--fl-muted);
}

.fl-rows { display: flex; flex-direction: column; gap: .65rem; }

.fl-row {
  position: relative;
  --fl-row-inset: calc(42px + .9rem);
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: .9rem;
  min-height: 54px;
}
.fl-row--fava { grid-template-columns: 34px 1fr auto; --fl-row-inset: calc(34px + .9rem); }

.fl-row + .fl-row::before {
  content: "";
  position: absolute;
  left: var(--fl-row-inset);
  right: 0;
  top: calc(-.325rem - .5px);
  border-top: 1px solid var(--fl-row-line);
}

.fl-row__icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--fl-tile);
  color: #23211d;
}
.fl-row__check {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fl-green-check);
  color: #fff;
}
.fl-row__label {
  font-size: clamp(.9rem, 1.11vw, 1rem);
  font-weight: 500;
  color: #23211d;
}
.fl-row__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: clamp(88px, 8.2vw, 118px);
  height: 32px;
  padding: 0 .85rem;
  border-radius: 8px;
  background: var(--fl-pill);
  color: #3c3a35;
  font-size: clamp(.76rem, .9vw, .8125rem);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.fl-row__fee,
.fl-row__inc {
  font-size: clamp(.75rem, .9vw, .8125rem);
  color: var(--fl-muted);
  text-align: right;
  min-width: 6.5rem;
}
.fl-row__inc { color: #4c5a4c; }

/* "Same tools. -> Zero cost." */
.fl-punch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.75rem, 1.6vw, 1.4rem);
  margin-top: clamp(2.25rem, 3.2vw, 3rem);
  font-family: var(--fl-script);
  font-size: clamp(1.5rem, 2.64vw, 2.375rem);
  line-height: 1;
  color: var(--fl-ink);
}
.fl-punch__arrow  { color: var(--fl-gold); flex: none; }
.fl-punch__zero   { position: relative; display: inline-flex; align-items: flex-start; gap: .55rem; }
.fl-punch__spark  { color: var(--fl-gold); flex: none; margin-top: -.15em; }

/* ── Dark green band ─────────────────────────────────────────────────── */
.fl-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--fl-green-deep);
  min-height: 440px;   /* see .fava-landing .fl-band below */
  display: flex;
  align-items: center;
  padding-block: clamp(3.25rem, 5vw, 4.5rem);
}
.fl-band__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fl-band__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}
.fl-band__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    var(--fl-green-deep) 0%,
    var(--fl-green-deep) 20%,
    rgba(22,54,41,0) 52%
  );
}
.fl-band__copy { position: relative; z-index: 1; max-width: 62%; }
.fl-band__copy .fl-h2 {
  color: #fff;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem); /* 40px */
  line-height: 1.2;
}
.fl-band__copy .fl-h2 .fl-wordmark { color: #fff; font-size: 1em; }
.fl-band__copy .fl-lead {
  margin-top: 1.5rem;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--fl-on-dark-soft);
}
.fl-band__copy .fl-lead .fl-wordmark { color: var(--fl-on-dark); font-size: 1em; }

/* ── Tools ───────────────────────────────────────────────────────────── */
.fl-tools {
  background: var(--fl-cream);
  padding: clamp(4rem, 5.75vw, 5.25rem) 0 clamp(4.25rem, 6vw, 5.5rem);
}
.fl-tools .fl-h2 { max-width: 62rem; }
.fl-tools__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.75rem, 1.35vw, 1.25rem);
  margin-top: clamp(2.25rem, 3.2vw, 3rem);
}
.fl-tool {
  background: var(--fl-card-tool);
  border: 1px solid rgba(18,16,13,.05);
  border-radius: 12px;
  padding: 2.25rem 1.1rem 2.4rem;
  text-align: center;
}
.fl-tool__icon {
  width: clamp(52px, 4.17vw, 60px); height: clamp(52px, 4.17vw, 60px);
  margin: 0 auto 1.15rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--fl-green);
  color: #fff;
}
.fl-tool__title {
  font-family: var(--fl-sans);
  font-size: clamp(.9rem, 1.11vw, 1rem);
  font-weight: 700;
  color: var(--fl-ink);
  margin-bottom: .5rem;
}
.fl-tool__text {
  font-size: clamp(.8rem, .94vw, .85rem);
  line-height: 1.5;
  color: var(--fl-muted);
}

/* ── Closing CTA ─────────────────────────────────────────────────────── */
.fl-cta {
  background-color: var(--fl-cream-2);
  min-height: 440px;   /* see .fava-landing .fl-cta below */
  display: flex;
  align-items: center;
}
.fl-cta .fl-split__media::after {
  background: linear-gradient(
    90deg,
    var(--fl-cream-2) 0%,
    var(--fl-cream-2) 20%,
    rgba(253,250,245,0) 52%
  );
}
.fl-cta .fl-split__copy { max-width: 52%; padding-block: clamp(3.25rem, 5vw, 4.5rem); }

.fl-cta .fl-lead { margin-top: 1.4rem; max-width: 34rem; }
.fl-cta .fl-lead .fl-wordmark { color: var(--fl-ink); font-size: 1em; }
.fl-cta .fl-btn  { margin-top: 2.1rem; }
.fl-cta .fl-note { margin-top: 1.45rem; }

.fl-cta__script {
  position: absolute;
  z-index: 2;
  left: auto;
  right: 3%;
  top: 10%;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  transform: rotate(-3deg);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  pointer-events: none;
}
.fl-cta__script .fl-swoosh { color: var(--fl-gold); margin-top: .15rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.fl-footer {
  background: var(--fl-green);
  color: var(--fl-on-dark);
  padding: clamp(2rem, 2.8vw, 2.5rem) 0;
}
.fl-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.fl-footer__brand { display: flex; align-items: baseline; gap: 1.15rem; }
.fl-footer .fl-wordmark { color: #fff; font-size: clamp(1.5rem, 1.88vw, 1.7rem); }
.fl-footer__tag { font-size: .85rem; color: var(--fl-on-dark-soft); }
.fl-footer__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.fl-footer__nav a { font-size: .875rem; color: var(--fl-on-dark-soft); transition: color .15s ease; }
.fl-footer__nav a:hover { color: #fff; }

/* Height floors restated at higher specificity — see the note on
   .fava-landing .fl-hero. A collapsed section here does not merely look
   wrong, it lets the absolutely-positioned photograph overlap the next
   block, which reads as "the next content needs a margin-top". */
.fava-landing .fl-band { min-height: 440px; }
.fava-landing .fl-cta  { min-height: 440px; }

/* Belt and braces for a page builder: the media is the section's backdrop
   and must never contribute to, or escape, its box. */
.fava-landing .fl-split,
.fava-landing .fl-band { contain: layout paint; }

/* ── Responsive ──────────────────────────────────────────────────────── */
/* Above 1600px the hero photo is wider than its own 2.33:1 ratio, so
   `cover` scales it by WIDTH and stops cropping — the chef then sits at a
   fixed 72% across, whatever the monitor. Below that the photo scales by
   height and crops from the left instead, which walks the chef leftwards as
   the window narrows: at 1366 he is at 69.4%. A single `left` percentage
   therefore cannot serve both, and pushing the script right for a monitor
   is exactly what dropped it onto his face at 1366.

   So: keep `left` for the cropping range, and anchor from the RIGHT once
   the crop is stable. The block then holds a constant gap to the chef on
   every large screen instead of drifting further from him as the window
   grows. */
@media (min-width: 1600px) {
  .fl-hero__script {
    left: auto;
    right: 30%;
  }
}

@media (max-width: 1180px) {
  .fl-hero__chalk { display: none; }
  .fl-nav { gap: 1.4rem; }
  .fl-row { grid-template-columns: 38px 1fr auto auto; gap: .6rem; --fl-row-inset: calc(38px + .6rem); }
  .fl-row__icon { width: 38px; height: 38px; }
  .fl-row__brand { min-width: 96px; font-size: .78rem; }
  .fl-row__fee, .fl-row__inc { min-width: 0; font-size: .76rem; }
}

@media (max-width: 1024px) {
  .fl-tools__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fl-band__copy  { max-width: 62%; }
  .fl-band__media::after {
    background: linear-gradient(90deg, var(--fl-green-deep) 0%, var(--fl-green-deep) 46%, rgba(22,54,41,0) 78%);
  }
}

/* Below this the photographs stop being a backdrop and become a stacked
   block under the copy — `cover` would otherwise crop away the flat band
   the text depends on, and the copy would land on the photo. */
@media (max-width: 900px) {
  .fl-nav__link,
  .fl-nav .fl-btn { display: none; }
  .fava-landing .fl-nav-toggle { display: flex; }
  .fl-nav[data-open="true"] {
    position: absolute;
    left: 0; right: 0; top: 80px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--fl-gutter) 1.25rem;
    background: var(--fl-cream-3);
    border-bottom: 1px solid var(--fl-line);
  }
  .fl-nav[data-open="true"] .fl-nav__link {
    display: block;
    padding: .85rem 0;
    border-bottom: 1px solid var(--fl-line);
    font-size: 1rem;
  }
  .fl-nav[data-open="true"] .fl-btn { display: inline-flex; margin-top: 1rem; align-self: flex-start; }

  /* The desktop composition is copy on flat colour beside the photograph.
     Stacked, that becomes copy above the photograph — but the photo must
     still read as part of the section rather than a slab pasted under it,
     so its top edge dissolves into the section colour exactly as its left
     edge does at desktop. A 4:3 crop (not 16:9) keeps the subject large
     enough to be worth showing at phone width. */
  .fl-hero,
  .fl-cta { display: flex; flex-direction: column; min-height: 0; }
  .fl-hero > .fl-container,
  .fl-cta  > .fl-container { order: 1; }
  .fl-hero > .fl-split__media,
  .fl-cta  > .fl-split__media { order: 2; }
  .fl-split__copy { max-width: none !important; padding-block: 3rem 1.25rem; }
  .fl-split__media {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 1 / 1;
    margin-top: 0;
  }
  .fl-split__media img { object-position: 100% center; }

  /* Two layers: the section colour bleeding down into the top of the photo,
     and a soft dark foot so the handwritten line stays legible on it. */
  .fl-hero .fl-split__media::after {
    display: block;
    background:
      linear-gradient(180deg, var(--fl-cream) 0%, rgba(252,251,246,.6) 9%, rgba(252,251,246,0) 22%),
      radial-gradient(ellipse 62% 34% at 22% 33%, rgba(14,24,18,.62) 0%, rgba(14,24,18,.28) 55%, rgba(14,24,18,0) 78%),
      linear-gradient(0deg, rgba(14,24,18,.3) 0%, rgba(14,24,18,0) 26%);
  }
  .fl-cta .fl-split__media::after {
    display: block;
    background:
      linear-gradient(180deg, var(--fl-cream-2) 0%, rgba(253,250,245,.6) 9%, rgba(253,250,245,0) 22%),
      radial-gradient(ellipse 56% 32% at 76% 32%, rgba(14,24,18,.6) 0%, rgba(14,24,18,.26) 55%, rgba(14,24,18,0) 78%),
      linear-gradient(0deg, rgba(14,24,18,.28) 0%, rgba(14,24,18,0) 24%);
  }

  /* Each script sits where the desktop composition puts it, translated to
     the square crop: the hero's over the blurred room to the chef's right,
     the closing one in the dark space beside the vase. Both land on their
     own pool of shade from the scrims above.
     
     Offsets are measured from the section's BOTTOM in vw, not from its top
     in %. These overlays are positioned against the section, and at desktop
     the section is the photograph, so a percentage from the top lands where
     you expect. Stacked, the section is copy plus photo, so the same
     percentage falls in the copy above — which is where this text went
     invisible, cream on cream. The stacked photo is the last 100vw of the
     section (full width, 1:1), so `bottom` in vw addresses it directly. */
  .fl-hero__script {
    left: 13%;
    right: auto;
    top: auto;
    bottom: 52vw;
    font-size: clamp(1.2rem, 5.3vw, 1.7rem);
    transform: rotate(-2deg);
  }
  .fl-cta__script {
    left: 64%;
    right: 3%;
    top: auto;
    bottom: 58vw;
    font-size: clamp(1.1rem, 4.8vw, 1.5rem);
    transform: rotate(-2deg);
  }

  /* fl_swoosh() carries a fixed pixel width sized for the desktop block, and
     at phone width it ran far past the end of the words it underlines. These
     cap it just beyond the last line instead. */
  .fl-hero__script .fl-swoosh { width: 25vw; }
  .fl-cta__script  .fl-swoosh { width: 20vw; }

  /* The chalk column comes back on phones. The square crop keeps the slate
     panel at the very right edge — it is the last ~17% of the visible photo
     — so the block is anchored there and sized to fit it. */
  .fl-hero__chalk {
    display: block;
    right: 1.5%;
    top: auto;
    bottom: 68vw;
    width: clamp(52px, 15.5vw, 78px);
    font-size: clamp(.56rem, 2.45vw, .78rem);
    line-height: 1.32;
    letter-spacing: .05em;
  }

  .fl-band { display: flex; flex-direction: column; }
  .fl-band > .fl-container { order: 1; }
  .fl-band > .fl-band__media { order: 2; }
  .fl-band__copy { max-width: none; }
  .fl-band__media {
    position: relative; inset: auto; z-index: 0;
    aspect-ratio: 4 / 3;
    margin-top: 1.75rem;
  }
  .fl-band__media::after {
    display: block;
    background: linear-gradient(180deg, var(--fl-green-deep) 0%, rgba(22,54,41,.55) 10%, rgba(22,54,41,0) 26%);
  }
  .fl-band__media img { object-position: 96% center; }

  /* The hard-coded <br>s in the h1 are a desktop line plan; at phone width
     they leave a stranded one-word line, so the text sets naturally. */
  .fl-h1 br { display: none; }

  .fl-compare__grid { grid-template-columns: minmax(0, 1fr); }
  .fl-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .fl-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-row { grid-template-columns: 38px 1fr; row-gap: .15rem; }
  .fl-row--fava { grid-template-columns: 34px 1fr auto; }
  .fl-row__brand { grid-column: 2; justify-self: start; }
  .fl-row__fee   { grid-column: 2; text-align: left; }
  .fl-row { min-height: 0; padding-block: .55rem; align-items: start; }
  .fl-row__icon, .fl-row__check { align-self: center; }
  .fl-row--fava { align-items: center; }
  .fl-punch { flex-wrap: wrap; }
  .fl-footer__nav { flex-wrap: wrap; gap: 1.1rem; }
}

@media (max-width: 480px) {
  .fl-tools__grid { grid-template-columns: minmax(0, 1fr); }
  .fl-h1 { font-size: clamp(1.95rem, 8.6vw, 2.35rem); }
  .fl-hero .fl-lead { font-size: 0.8625rem; }
  .fl-btn { width: 100%; justify-content: center; }
  .fl-footer__brand { flex-direction: column; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fava-landing *,
  .fava-landing *::before,
  .fava-landing *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}