/* ==========================================================================
   Foodini landing (marketing splash at "/") — loaded ONLY on the landing view
   (inc/stylesheet.php, guarded by $fdn_is_landing). Everything is token-driven
   (foodini-tokens.css) so light/dark flip for free; a handful of html.fdn-dark
   overrides handle the few spots the mockups treat differently.

   Photography: each .fdn-land-shot--* sets a --shot url into
   webassets/images/landing/. A missing file simply shows the token-tinted
   block underneath (no broken <img>), so the page ships before the shoot.
   Reference filenames (drop-in, no markup change):
     hero-pizza.png  hero-steak.png  hero-burger.png  hero-pasta.png  hero-sauce.png
     shot-dining.jpg shot-groceries.jpg shot-city.jpg shot-rider.jpg shot-partner.jpg
   ========================================================================== */

/* the landing has no fixed app header, so drop the global header-height offset
   (foodini-components.css: `body { padding-top: var(--header-h) }`) that would
   otherwise leave a blank strip above the hero */
body.fdn-land-body { padding-top: 0; }

.fdn-land {
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;              /* decor spans never widen the viewport */
}
.fdn-land *,
.fdn-land *::before,
.fdn-land *::after { box-sizing: border-box; }

.fdn-land-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* ---- shared button ------------------------------------------------------ */
.fdn-land-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 0 var(--s-8);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font: 700 17px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.fdn-land-btn:hover { background: var(--brand-hover); color: var(--on-brand); }
.fdn-land-btn:active { transform: scale(.98); }
.fdn-land-btn--block { width: 100%; }

/* ============================== HERO ===================================== */
/* Marketing hero (user mockups). Owns its OWN minimal top bar (Log In / Sign
   Up) + a centered white logo — NOT the standard app header. The green base
   with the running-people watermark is a single art asset the user supplied
   (Emojis/Group 647 -> webassets/images/landing/hero-base.png); var(--brand)
   is the paint-behind fallback if the file is ever missing. */
.fdn-land-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    /* ?v=633 busts the 30-day webassets image cache: the asset was re-cut
       2026-07-21 (transparent bottom band trimmed off — it let the lime
       backstop through as a "green line"). Bump the version if the file is
       ever regenerated again; the CSS itself is mtime-versioned (fdn_asset),
       so editing this line is what carries the new URL to browsers. */
    url('../images/landing/hero-base.png?v=633') center / cover no-repeat,
    var(--brand);
  color: #fff;
  padding: var(--s-10) 0;
  overflow: hidden;
}
/* WCAG on the lime hero. White on the raw art measures ~1.9:1 — a fail at every
   size. Forcing 4.5:1 with a scrim needs ~46% black, which reads as a dark
   PANEL behind the copy and wrecks the design, so contrast is earned per
   size-class instead:
     - this LIGHT vignette (~21%) lifts the backdrop to ~3.65:1, satisfying AA
       for LARGE text — the title and the sub both qualify;
     - the strap line is promoted to 19px/700 and the sub to 19px/700 below
       1000px, so they clear the "large text" bar (>=18.66px bold) too;
     - the chips carry their own dark translucent fill, because a 15px label is
       genuinely small text and must reach 4.5:1 on its own (measures 8.4:1).
   z-index -2 is the important part: the hero's own background paints first,
   then THIS, then the food cutouts at -1, then the copy. Painting the vignette
   UNDER the food means the cutouts stay fully bright, which in turn lets the
   falloff be very wide and gentle — a tighter one left visible seams where it
   crossed the pizza and the burger. */
.fdn-land-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 145% at 50% 45%,
    rgba(16, 30, 5, .22) 0%,
    rgba(16, 30, 5, .21) 30%,
    rgba(16, 30, 5, .17) 50%,
    rgba(16, 30, 5, .10) 68%,
    rgba(16, 30, 5, .04) 84%,
    rgba(16, 30, 5, 0) 100%);
}

/* --- minimal marketing top bar (pinned to the hero's top-right, pulled in
       from the edge so it reads as part of the layout, not glued to it) --- */
.fdn-land-topbar {
  position: absolute;
  top: var(--s-6);
  right: clamp(32px, 5vw, 128px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-4);
}
.fdn-land-topbar__link {
  color: #fff;
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  padding: 10px 6px;
}
.fdn-land-topbar__link:hover { color: #fff; opacity: .85; }
.fdn-land-topbar__btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-5);
  background: #fff;
  color: #3f6f10;                 /* AA green ink on the always-white pill */
  border-radius: var(--r-pill);
  font: 700 15px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .1s ease, box-shadow .15s ease;
}
.fdn-land-topbar__btn:hover { color: #3f6f10; box-shadow: var(--shadow-md); }
.fdn-land-topbar__btn:active { transform: scale(.98); }

/* logged-in: a round account button (white disc, green glyph) in place of the
   Log In / Sign Up pair — sized and shadowed to be unmissable on the green */
.fdn-land-topbar__acct {
  display: inline-grid;
  place-items: center;
  width: 54px; height: 54px;
  background: #fff;
  color: #3f6f10;
  border-radius: 50%;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(28, 46, 8, .35), 0 0 0 3px rgba(255, 255, 255, .35);
  transition: transform .1s ease, box-shadow .15s ease;
}
.fdn-land-topbar__acct:hover {
  color: #3f6f10;
  box-shadow: 0 10px 24px rgba(28, 46, 8, .4), 0 0 0 3px rgba(255, 255, 255, .55);
  transform: translateY(-1px);
}
.fdn-land-topbar__acct:active { transform: scale(.96); }

/* --- centered white brand logo --- */
.fdn-land-hero__logo {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto var(--s-5);
}
.fdn-land-hero__logo img {
  height: 40px;
  /* the wordmark is a WIDE lockup; below ~380px it outgrew the viewport and was
     sliced by the hero's overflow:hidden — cropping an image, which the house
     rule forbids. Cap it and let the height follow. */
  width: auto;
  max-width: 100%;
  /* logo.svg is the brand-green wordmark; paint it white for the hero */
  filter: brightness(0) invert(1);
}

/* decorative food cutouts peeking from the edges (transparent PNGs the user
   supplied 2026-07-20). They sit behind the centered brand block. */
/* The decor spans the hero as a flex row: gutter · copy-column spacer · gutter.
   Each gutter is a grid, so its cutouts get real cells that cannot overlap,
   and every cutout is capped at `100%` of its cell — which is what makes
   "never cropped" structural instead of something to re-tune per breakpoint. */
.fdn-land-hero__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  align-items: stretch;
}
/* reserves exactly what the copy column occupies, so the gutters the cutouts
   get are precisely the space the copy is NOT using. 680 = the column itself;
   it widens to 820 at >=1200 where the chip row breaks out (see below). */
.fdn-land-hero__gap { flex: 0 1 min(680px, 100%); }
.fdn-land-hero__side {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-content: space-evenly;
  justify-items: center;
  align-items: center;
  padding: var(--s-5) var(--s-3);
}
.fdn-land-hero__food {
  /* --w is the cutout's ideal width and --ar its source PNG's own ratio. The
     `min(..., 100%)` is the no-crop guarantee: in a narrow gutter the cell
     wins and the food simply renders smaller. max-height does the same job on
     the other axis for short viewports (`contain` never crops either way). */
  width: min(var(--w), 100%);
  aspect-ratio: var(--ar, 1);
  max-height: 40vh;
  background: var(--shot, none) center / contain no-repeat;
  /* soft lift so the cutouts read as real food floating over the green,
     not flat stickers (the shadow follows each PNG's alpha silhouette) */
  filter: drop-shadow(0 12px 20px rgba(28, 46, 8, .28));
  /* --fdn-par is written by the scroll parallax JS (0 when idle/reduced) */
  transform: translateY(var(--fdn-par, 0px));
}
/* per-cutout art: the source PNG plus its own aspect ratio, and the ideal
   width the layout aims for when there is room. hero-sauce.png is not used
   here at all — it is the lowest-res cutout (99x125) AND its left rim is
   clipped in the source file, which is exactly the "cut" look we are avoiding. */
.fdn-land-hero__food--pizza,
.fdn-land-hero__food--pizza2  { --shot: url('../images/landing/hero-pizza.png');    --ar: 1.398; --w: 420px; }
.fdn-land-hero__food--potatoes{ --shot: url('../images/landing/hero-potatoes.png'); --ar: .581;  --w: 250px; }
.fdn-land-hero__food--steak,
.fdn-land-hero__food--steak2  { --shot: url('../images/landing/hero-steak.png');    --ar: .991;  --w: 415px; }
.fdn-land-hero__food--burger,
.fdn-land-hero__food--burger2 { --shot: url('../images/landing/hero-burger.png');   --ar: .805;  --w: 350px; }
.fdn-land-hero__food--pasta   { --shot: url('../images/landing/hero-pasta.png');    --ar: .962;  --w: 405px; }

/* the *2 twins are the same art mirrored, so the reuse doesn't read as
   copy-paste (each twin also sits on the opposite side from its original) */
.fdn-land-hero__food--pizza2,
.fdn-land-hero__food--steak2,
.fdn-land-hero__food--burger2 { transform: translateY(var(--fdn-par, 0px)) scaleX(-1); }

/* Two cutouts per gutter by default; the 3rd and 4th only join once the
   gutter can hold a 2x2 without shrinking anything (see the wide block). */
.fdn-land-hero__side > :nth-child(n+3) { display: none; }

/* centered brand block */
.fdn-land-hero__center {
  position: relative;
  /* width:100% is load-bearing, not decoration. The hero is a flex column with
     align-items:center, so without it this block is intrinsically sized — and
     the phone chip row (flex-wrap:nowrap) then drags it to its own max-content
     width, overflowing the hero and cutting the logo/title/search off-screen.
     The hero's overflow-x:hidden hides the damage from scrollWidth, so the
     usual "no horizontal overflow" probe reports clean while it is broken. */
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--s-10) var(--s-5) var(--s-4);
  text-align: center;
}
/* (hero contrast vignette lives on .fdn-land-hero::before — see below) */
.fdn-land-hero__title {
  margin: 0 0 var(--s-3);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 86px);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
}
.fdn-land-hero__sub {
  margin: 0 0 var(--s-8);
  font-size: clamp(16px, 2.4vw, 24px);
  font-style: italic;
  /* was rgba(255,255,255,.9) — the fade cost contrast for nothing */
  color: #fff;
}
/* Below ~1000px the clamp drops this under 24px, which turns it into SMALL text
   for WCAG (needing 4.5:1) instead of large (3:1) — and on the lime hero it then
   failed. 19px/700 puts it back over the "large text" line (>=18.66px bold). */
@media (max-width: 999.98px) {
  .fdn-land-hero__sub { font-size: 19px; font-weight: 700; }
}

/* quick rail links under the search pill — an address-free way into discovery,
   and the row that keeps the hero's middle from reading as empty green. Each
   chip's hash is a real Home::rail_section() key. */
.fdn-land-quick { margin: var(--s-8) auto 0; max-width: 780px; text-align: center; }
.fdn-land-quick__lead {
  margin: 0 0 var(--s-3);
  /* 19px/700 clears the WCAG "large text" bar (>=18.66px bold), so it passes
     at 3:1 on the vignette; at 14px/600 rgba(.78) it needed 4.5:1 and failed */
  font: 700 19px/1.4 var(--font-sans);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
}
.fdn-land-quick__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
}
.fdn-land-quick__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                 /* S4-3: stays a real tap target */
  padding: 0 var(--s-4);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-pill);
  /* the chip label is small text (15px) so it must clear 4.5:1 by itself — a
     translucent WHITE fill made that worse, a dark one makes it pass while
     still letting the green read through */
  background: rgba(14, 28, 4, .46);
  color: #fff;
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.fdn-land-quick__chip i { font-size: 16px; opacity: .9; }
.fdn-land-quick__chip:hover {
  color: #3f6f10;
  background: #fff;
  border-color: #fff;
}
.fdn-land-quick__chip:active { transform: scale(.98); }

/* search pill */
.fdn-land-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 8px 8px 8px var(--s-5);
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
}
.fdn-land-search__pin { color: #4E7E15; font-size: 22px; display: inline-flex; }  /* fixed: light --brand-ink, AA on the always-white pill */
.fdn-land-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border: 0;
  outline: 0;
  background: transparent;
  /* FIXED ink, not var(--text): the pill is always white, so theme-flipping
     tokens would paint near-white text on it in dark mode (invisible). */
  color: #1A1A1A;
  font: 500 17px/1 var(--font-sans);
}
.fdn-land-search__input::placeholder { color: #767676; }  /* AA on white in both themes */
.fdn-land-search__input:focus, .fdn-land-search__input:focus-visible { outline: none; box-shadow: none; }
/* ...but keyboard users still need to SEE the field. The blanket outline:none
   above removed every focus affordance, so ring the whole pill instead. */
.fdn-land-search:focus-within { box-shadow: 0 0 0 3px rgba(63, 111, 16, .6), 0 10px 30px rgba(20, 30, 12, .18); }

/* GPS "find exact location" button on the right of the pill (mockup) */
.fdn-land-searchwrap { position: relative; width: 100%; max-width: 620px; margin: 0 auto; }
/* soft brand halo behind the primary CTA — draws the eye to the address pill.
   Purely decorative + non-interactive; static, so no reduced-motion concern. */
.fdn-land-searchwrap::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 118%; height: 300%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(141, 198, 63, .22), rgba(141, 198, 63, 0) 68%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.fdn-land-searchwrap .fdn-land-search { max-width: none; margin: 0; position: relative; z-index: 1; }
.fdn-land-search__gps {
  flex: 0 0 auto;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-grid; place-items: center;
  background: #e9f3d8; color: #3f6f10;   /* fixed inks: the pill is always white */
  transition: background .15s ease, transform .1s ease;
}
.fdn-land-search__gps:hover { background: #dcecc2; }
.fdn-land-search__gps:active { transform: scale(.93); }
/* locating… spinner (the crosshair spins while GPS resolves) */
.fdn-land-search__gps.is-busy { pointer-events: none; }
.fdn-land-search__gps.is-busy svg { animation: fdn-land-gps-spin .8s linear infinite; }
@keyframes fdn-land-gps-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fdn-land-search__gps.is-busy svg { animation: none; } }

/* attached suggestions dropdown — always white to match the always-white pill
   (JS fixed-positions it so the hero's overflow:hidden can't clip it) */
.fdn-land-panel {
  /* 1040 sits ABOVE the sticky header (900) but BELOW Bootstrap's modal layer
     (1055 backdrop / 1056 dialog). At 1200 this portaled panel painted on top
     of the sign-in and sign-up modals and swallowed their clicks. */
  position: fixed; z-index: 1040;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 18px;
  box-shadow: 0 16px 40px rgba(20, 30, 12, .22);
  overflow: hidden; text-align: left;
}
.fdn-land-panel__list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; }
.fdn-land-sug {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: 12px var(--s-4); border: 0; background: transparent;
  text-align: left; cursor: pointer;
}
.fdn-land-sug + .fdn-land-sug { border-top: 1px solid #efefef; }
.fdn-land-sug:hover { background: #f4f7ee; }
.fdn-land-sug__ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: #f0f2ee; color: #4E7E15; font-size: 18px;
}
.fdn-land-sug.is-active,
.fdn-land-sug:hover { background: #f0f2ee; }
.fdn-land-sug.is-active { box-shadow: inset 3px 0 0 #4E7E15; }
.fdn-land-sug__ic--gps { background: #e9f3d8; color: #3f6f10; }   /* current-location row */
.fdn-land-sug__txt { display: flex; flex-direction: column; min-width: 0; }
.fdn-land-sug__name { font: 700 15px/1.35 var(--font-sans); color: #1A1A1A; }
.fdn-land-sug__sub {
  font: 400 13px/1.35 var(--font-sans); color: #767676;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fdn-land-panel__msg { padding: var(--s-4); text-align: center; color: #767676; font: 400 14px/1.4 var(--font-sans); margin: 0; }
.fdn-land-panel__foot {
  padding: 9px var(--s-4); text-align: right; border-top: 1px solid #efefef;
  font: 400 12px/1 var(--font-sans); color: #6b6b6b;
}
.fdn-land-panel__foot span { font-weight: 700; color: #767676; }

/* ============================ APP PROMO (mobile) ========================= */
.fdn-land-apppromo { padding: var(--s-6) 0 0; }
.fdn-land-apppromo__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.fdn-land-apppromo__mark {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--brand-050);
  border-radius: var(--r-md);
}
.fdn-land-apppromo__mark img { width: 40px; height: 40px; object-fit: contain; }
.fdn-land-apppromo__title { margin: 0 0 4px; font-weight: 800; font-size: 15px; color: var(--text); }
.fdn-land-apppromo__rate { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.fdn-land-stars { color: var(--brand); font-size: 13px; letter-spacing: 1px; }
.fdn-land-apppromo__count { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.fdn-land-apppromo__cta { grid-column: 1 / -1; margin-top: var(--s-2); }

/* ============================ FEATURE CARDS ============================== */
.fdn-land-features { padding: var(--s-16) 0 var(--s-10); }
.fdn-land-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
.fdn-land-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  text-align: left;
}
/* the 3D icon PNGs (user 2026-07-20) already carry their own soft green blob,
   so the holder is just a transparent sizing box. A bootstrap glyph is the
   fallback if an image is ever missing (tinted blob shows then). */
.fdn-land-feature__ico {
  flex: 0 0 auto;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  color: var(--brand);
  font-size: 38px;
}
.fdn-land-feature__ico:empty,
.fdn-land-feature__ico:has(> i) { background: var(--brand-050); border-radius: 28px; }
.fdn-land-feature__ico img { width: 100%; height: 100%; object-fit: contain; }
.fdn-land-feature__title { margin: 0 0 8px; font-weight: 800; font-size: 22px; color: var(--text); }
.fdn-land-feature__text { margin: 0; color: var(--text-muted); font-size: 17px; line-height: 1.55; }

/* ============================ SPLIT SECTIONS ============================= */
.fdn-land-split { padding: var(--s-16) 0; }
.fdn-land-split--band { background: var(--brand-050); }
.fdn-land-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}
.fdn-land-split__text { max-width: 560px; }
.fdn-land-h2 { margin: 0 0 var(--s-4); font-weight: 800; font-size: clamp(30px, 4.2vw, 46px); color: var(--text); }
.fdn-land-lead { margin: 0 0 var(--s-6); color: var(--text-muted); font-size: 19px; line-height: 1.6; }

/* media block: cover photo over a token-tinted fallback */
.fdn-land-shot {
  background-image: var(--shot);
  background-color: var(--brand-050);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.fdn-land-split__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
/* Dedicated section photography (user-supplied 2026-07-20). */
.fdn-land-shot--dining    { --shot: url('../images/landing/shot-dining.jpg'); }     /* people sharing a delivered meal */
.fdn-land-shot--groceries { --shot: url('../images/landing/shot-groceries.webp'); } /* grocery bag handoff */
.fdn-land-shot--rider     { --shot: url('../images/landing/shot-rider.webp'); }     /* courier handing over the bag */
.fdn-land-shot--partner   { --shot: url('../images/landing/shot-partner.avif'); }   /* pickup / partner counter */
.fdn-land-shot--city      { --shot: url('../images/landing/shot-city.jpg'); }       /* Tirana (pending — band falls back to brand-600 + scrim) */

/* ============================== CITIES =================================== */
.fdn-land-cities {
  position: relative;
  isolation: isolate;
  /* a tall, grand band (user 2026-07-21: "foodini po rritet needs to be
     bigger") — the padding scales with the viewport so the Tirana panorama
     gets real presence on big screens instead of reading as a thin strip */
  padding: clamp(64px, 8vw, 150px) 0;
  color: #fff;
  /* darker fallback than the generic shot tint so the white title + pills
     stay AA-legible over the scrim even before shot-city.jpg is added */
  background-color: var(--brand-600);
}
.fdn-land-cities__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(20, 30, 12, .5);   /* keep the white title/pills legible over any photo */
}
.fdn-land-cities__in { position: relative; }
.fdn-land-cities__title {
  margin: 0 0 clamp(32px, 4vw, 56px);
  text-align: center;
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 68px);
  color: #fff;
}
.fdn-land-cities__row {
  list-style: none;
  margin: 0; padding: 0 0 4px;
  display: flex;
  gap: var(--s-3);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fdn-land-cities__row::-webkit-scrollbar { display: none; }
.fdn-land-city {
  flex: 0 0 auto;
  padding: clamp(14px, 1.2vw, 18px) clamp(24px, 2.2vw, 40px);
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: clamp(18px, 1.3vw, 22px);
  color: #fff;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
/* Interactable but NOT pressable (user 2026-07-21): the pills are plain
   labels — no link, no cursor:pointer, no :active state — but on hover they
   fill with a see-through brand green so the band feels alive. The alpha
   fill keeps the Tirana photo visible through the pill. */
.fdn-land-city:hover {
  background-color: rgba(141, 198, 63, .38);          /* --brand #8DC63F @ 38% */
  background-color: color-mix(in srgb, var(--brand) 38%, transparent);
  border-color: #fff;
}

/* ============================ DARK OVERRIDES ============================= */
/* the mockups treat the alt "band" as a subtle dark surface (not lime tint),
   and the photo-less shot fallback wants the dark subtle too */
html.fdn-dark .fdn-land-split--band { background: var(--bg-subtle); }
html.fdn-dark .fdn-land-shot { background-color: var(--bg-subtle); }
html.fdn-dark .fdn-land-cities__scrim { background: rgba(0, 0, 0, .55); }

/* ============================== DESKTOP ================================= */
@media (min-width: 992px) {
  /* the green address hero is the dominant, most-important block: it fills
     most of the first screen with the search pill centered in it */
  .fdn-land-hero { min-height: 92vh; padding: var(--s-12) 0; }
  .fdn-land-hero__center { padding-top: 0; padding-bottom: 0; }

  .fdn-land-features { padding: 100px 0 90px; }
  .fdn-land-features__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-16); }
  .fdn-land-feature { flex-direction: column; align-items: center; text-align: center; gap: var(--s-5); }
  .fdn-land-feature__ico { width: 180px; height: 180px; font-size: 68px; }
  .fdn-land-feature__ico:has(> i) { border-radius: 40px; }
  .fdn-land-feature__title { font-size: 28px; }
  .fdn-land-feature__text { font-size: 18px; }

  .fdn-land-split { padding: 110px 0; }
  .fdn-land-split__grid { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
  /* DOM order is media-then-text; default = text left / media right */
  .fdn-land-split__media { order: 1; }
  .fdn-land-split__text  { order: 0; justify-self: start; }
  .fdn-land-split--rev .fdn-land-split__media { order: 0; }
  .fdn-land-split--rev .fdn-land-split__text  { order: 1; justify-self: end; }
  .fdn-land-split__media { aspect-ratio: 4 / 3; }

  .fdn-land-cities__row { flex-wrap: wrap; justify-content: center; overflow: visible; }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  /* below the break-out width the row wrapped 3 + 1, leaving an orphan chip.
     Cap it so it wraps evenly as 2 + 2 instead. */
  .fdn-land-quick__row { max-width: 540px; margin-inline: auto; }
}
@media (min-width: 1200px) {
  /* the chips want to be wider than the copy column — break them out of it so
     all four sit on one line (centre stays the centre: 50% of the column plus
     a -50% self shift). 820px matches .fdn-land-hero__gap exactly, so the row
     stays inside the channel the decor leaves for it. From 1200, not 1400 —
     at 1200-1399 the in-column row wrapped 3+1, which read as broken. */
  .fdn-land-quick {
    width: min(820px, 92vw);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  /* decor spacer tracks the chip row so the cutouts never share its channel */
  .fdn-land-hero__gap { flex-basis: min(820px, 100%); }
}
@media (min-width: 1600px) {
  /* the copy can breathe too once there is room for it */
  .fdn-land-hero__center { max-width: 780px; }
}

/* ======================= WIDE SCREENS (2x2 gutters) ====================== */
/* Past 2100px each gutter can hold a 2x2 without the second column costing
   the cutouts their size — 8 large ones rather than 4, which is what stops a
   2560px monitor reading as a mostly empty field of green. The threshold is
   deliberately high: below it, splitting the gutter shrinks every cutout more
   than the extra column adds (at 1920 it was 8 items at 254px vs 4 at 420px),
   so narrower screens keep one column of BIGGER food. */
@media (min-width: 2100px) {
  .fdn-land-hero__side { grid-template-columns: 1fr 1fr; }
  .fdn-land-hero__side > :nth-child(n+3) { display: block; }
}

/* ==================== ULTRAWIDE CONTENT COLUMN + TYPE ==================== */
/* The body sections read var(--container) (1200) through .fdn-land-wrap and
   .fdn-land-stick__in. On a 2560px monitor that column swims in whitespace
   while the hero runs full-bleed — so the landing (scoped: this override
   never leaks to the shared footer or other pages) widens its column and
   steps the section type up to match. Discovery already runs a wide centred
   column, so this also keeps the two pages feeling like one site. */
@media (min-width: 1600px) {
  .fdn-land { --container: 1400px; }
  .fdn-land-h2 { font-size: clamp(30px, 4.2vw, 52px); }
  .fdn-land-lead { font-size: 20px; }
  .fdn-land-split__text { max-width: 620px; }
  .fdn-land-feature__title { font-size: 30px; }
  .fdn-land-feature__text { font-size: 19px; }
}
@media (min-width: 2000px) {
  .fdn-land { --container: 1560px; }
}

/* ============================== PHONES ================================== */
@media (max-width: 991.98px) {
  /* five stacked chips would own the phone hero — run them as one swipeable
     row instead (the same pattern the discovery cuisine chips use), bled to
     the screen edges so the last one visibly hangs off and invites the swipe */
  .fdn-land-quick__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin-inline: calc(var(--s-5) * -1);
    padding-inline: var(--s-5);
  }
  .fdn-land-quick__row::-webkit-scrollbar { display: none; }
  .fdn-land-quick__chip { flex: 0 0 auto; scroll-snap-align: start; }

  /* Phones get ONE cutout, top-left, small and FULLY inside the screen (the
     old treatment hung two off the corners — the crop the user banned). One,
     not two, because the copy owns the whole width here: the only pocket the
     text does not need is above the logo, and the top-right corner of that
     band is already the Log In / Sign Up bar. A bottom cutout would land
     under the chip row. The copy-column spacer is dropped so the left gutter
     is a real half-width. */
  .fdn-land-hero__gap,
  .fdn-land-hero__side--r { display: none; }
  .fdn-land-hero__side { padding: var(--s-2) var(--s-3); }
  .fdn-land-hero__side > :nth-child(n+2) { display: none; }
  .fdn-land-hero__side--l { align-content: start; justify-items: start; }
  .fdn-land-hero__food { --w: 110px; max-height: 16vh; }
  /* the wordmark is ~344px wide here (nearly the full screen), so it would
     run under the cutout without this nudge — the two share the top band */
  .fdn-land-hero__logo { margin-top: var(--s-5); }
}

@media (max-width: 380px) {
  .fdn-land-wrap { padding-inline: var(--s-4); }
}

/* ======================= STICKY COMPACT HEADER =========================== */
/* Hidden above the page; JS slides it in once the hero is scrolled away and
   back out near the top (the hero's own logo/search/account take over). */
.fdn-land-stick {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;                      /* over content, under the modals */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-102%);
  /* visibility:hidden is load-bearing, not cosmetic. transform alone leaves the
     logo / address / auth controls FOCUSABLE while the bar is parked off-screen,
     so the first four Tab presses on the landing went to invisible controls and
     the focus ring disappeared off the top of the window. visibility:hidden
     takes them out of the tab order; it is delayed on the way out so the
     slide-up animation still plays. */
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2, 0, 0, 1), visibility 0s linear .35s;
}
.fdn-land-stick.is-on {
  transform: translateY(0);
  visibility: visible;
  transition: transform .35s cubic-bezier(.2, 0, 0, 1), visibility 0s linear 0s;
}
.fdn-land-stick__in {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: var(--container);
  margin-inline: auto;
  padding: 10px var(--s-5);
}
/* logo.svg is a WIDE lockup with a large intrinsic size — at height:26px it
   still renders ~224px wide, and with every row item at flex-basis:auto the
   phone header overflowed the viewport by ~240px (logo + pill + auth = 620px
   in a 390px screen). The row must be able to SHRINK: the logo is capped and
   scales down, the address pill owns the slack with min-width:0 + ellipsis. */
.fdn-land-stick__logo { display: inline-flex; flex: 0 1 auto; min-width: 0; }
.fdn-land-stick__logo img { height: 26px; max-width: min(160px, 32vw); width: auto; display: block; object-fit: contain; object-position: left center; }
.fdn-land-stick__addr {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  max-width: 460px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font: 500 15px/1 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.fdn-land-stick__addr:hover { border-color: var(--brand); }
.fdn-land-stick__addr i { color: var(--brand); font-size: 17px; }
.fdn-land-stick__addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdn-land-stick__auth { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.fdn-land-stick__link { color: var(--text); font: 600 15px/1 var(--font-sans); text-decoration: none; padding: 10px 4px; }
.fdn-land-stick__link:hover { color: var(--brand-ink); }
.fdn-land-stick__btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-5);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-pill);
  font: 700 15px/1 var(--font-sans);
  text-decoration: none;
  transition: background .15s ease;
}
.fdn-land-stick__btn:hover { background: var(--brand-hover); color: var(--on-brand); }
.fdn-land-stick__acct {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--brand-050);
  color: var(--brand-ink);
  border-radius: 50%;
  font-size: 19px;
  text-decoration: none;
}
.fdn-land-stick__acct:hover { color: var(--brand-ink); box-shadow: var(--shadow-sm); }
@media (max-width: 575.98px) {
  .fdn-land-stick__in { gap: var(--s-3); }
  /* the auth group owns the push-right; the pin rides along next to it */
  .fdn-land-stick__auth { margin-left: auto; }
  /* the guest pair does not fit next to logo + pill on a phone: keep the one
     that matters (Regjistrohu — the hero topbar and the sign-up modal's own
     "Hyr" link still cover log-in) */
  .fdn-land-stick__link { display: none; }
  /* 44px is the S4-3 minimum tap target — 38 was below it */
  .fdn-land-stick__btn { min-height: 44px; padding: 0 var(--s-4); font-size: 14px; }
  /* "Vendos adresën e dorëzimit" can never fit the leftover ~90px — a pill
     ellipsized to "Ven…" reads as a rendering bug, so on phones the pill
     drops its label and becomes a round pin button (still 40px tappable,
     still scroll-to-search). Grouped right with the auth button. */
  .fdn-land-stick__addr {
    flex: 0 0 auto;
    /* NO margin-left:auto here — .fdn-land-stick__auth already carries one, and
       two auto margins split the free space, stranding the pin in the middle of
       the bar with dead space either side. Only the auth group pushes right;
       the pin then sits directly beside it. */
    margin-left: 0;
    min-height: 44px;
    width: 44px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }
  .fdn-land-stick__addr span { display: none; }
}

/* ======================= SCROLL-REVEAL ANIMATIONS ======================== */
/* html.fdn-land-anim is added by JS before first paint of the body sections;
   without JS nothing is ever hidden. IntersectionObserver adds .is-in. */
html.fdn-land-anim .fdn-land-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, 0, 0, 1);
}
html.fdn-land-anim .fdn-land-reveal.is-in { opacity: 1; transform: none; }
/* stagger the three feature cards + let split text follow its photo */
html.fdn-land-anim .fdn-land-feature:nth-child(2) { transition-delay: .12s; }
html.fdn-land-anim .fdn-land-feature:nth-child(3) { transition-delay: .24s; }
html.fdn-land-anim .fdn-land-split__text.fdn-land-reveal { transition-delay: .15s; }
html.fdn-land-anim .fdn-land-cities__row.fdn-land-reveal { transition-delay: .15s; }
/* hero entrance on load (one-shot) */
html.fdn-land-anim .fdn-land-hero__center { animation: fdnLandRise .7s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes fdnLandRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.fdn-land-anim .fdn-land-reveal { opacity: 1; transform: none; transition: none; }
  html.fdn-land-anim .fdn-land-hero__center { animation: none; }
  .fdn-land-stick { transition: none; }
}