/* ───────────────────────────────────────────────────────────────────────────
   YardLink Eats — homepage

   This is the product site, not the directory. The directory lives at
   /restaurants and is one feature of the product; the job of this page is to
   explain what YardLink Eats is and get the app installed.

   The palette starts from the logo rather than from the app chrome: the badge
   is cream, deep green, gold and a red ring, so the neutrals here are warmed
   very slightly toward green instead of being pure grey. Pure #000 stays as
   the ground because the apps are black and the restaurant photography is the
   brightest thing on the page — it should sit on nothing.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --ink:        #040605;   /* ground — a hair warmer than pure black */
  --ink-2:      #0B0F0D;
  --surface:    #101512;
  --surface-2:  #171E1A;
  --line:       rgba(255,255,255,.09);

  --green:      #00A84F;
  --green-lift: #18B15E;
  --green-deep: #007035;
  --gold:       #FFD100;
  --cream:      #F7F3E8;   /* from the logo field */
  --red:        #D62828;   /* from the logo ring — used only as a spark */

  --text:       #FFFFFF;
  --text-2:     rgba(247,243,232,.68);
  --text-3:     rgba(247,243,232,.42);

  --wrap: 1180px;
  --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* height:auto is load-bearing. Every <img> carries width/height attributes so
   the browser can reserve space and avoid layout shift, but without this the
   attribute height wins over the scaled width and the image renders at its
   full intrinsic height — a 640x1391 screenshot came out 244px wide and
   1391px tall. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

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

/* ── Type scale ──────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green-lift);
}

h1, h2, h3 { margin: 0; letter-spacing: -.03em; text-wrap: balance; }

h1 { font-size: clamp(42px, 7.4vw, 76px); font-weight: 800; line-height: 1.02; }
h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; line-height: 1.08; }
h3 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }

.lede { font-size: clamp(17px, 1.9vw, 20px); color: var(--text-2); line-height: 1.6; max-width: 56ch; }

section { padding: clamp(72px, 11vw, 132px) 0; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4,6,5,.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); background: rgba(4,6,5,.92); }

.nav__inner {
  display: flex; align-items: center; gap: 28px;
  height: 68px; max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
}
.nav__brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.nav__brand img { width: 34px; height: 34px; border-radius: 50%; }
.nav__brand b { font-size: 17.5px; font-weight: 800; letter-spacing: -.02em; }
.nav__brand b span { color: var(--green-lift); }

.nav__links { display: flex; gap: 26px; }
.nav__links a { font-size: 15px; color: var(--text-2); transition: color .2s ease; }
.nav__links a:hover { color: var(--text); }
@media (max-width: 760px) { .nav__links { display: none; } }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--green); color: #001a0a; font-weight: 750; }
.btn--primary:hover { background: var(--green-lift); transform: translateY(-2px); }
.btn--ghost { border: 1px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.btn--sm { padding: 10px 18px; font-size: 14.5px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; padding-top: clamp(56px, 8vw, 96px); overflow: hidden; }

/* Ambient light behind the hero. Two soft radial washes — green from the
   brand, gold from the badge — so the black ground has depth without any
   gradient banding across a flat fill. */
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 780px;
  background:
    radial-gradient(46% 52% at 22% 34%, rgba(0,168,79,.20), transparent 70%),
    radial-gradient(38% 44% at 82% 18%, rgba(255,209,0,.10), transparent 72%);
  pointer-events: none; z-index: 0;
}

.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: clamp(40px, 6vw, 72px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
}

.hero__mark {
  width: clamp(84px, 11vw, 116px); height: auto;
  margin-bottom: 26px;
  /* The artwork is a circular badge sitting on an opaque square field, so it
     is clipped to its own shape rather than shown as a white tile on black. */
  border-radius: 50%;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}

.hero h1 span { color: var(--green-lift); }

.hero__lede { margin-top: 20px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 26px; font-size: 14px; color: var(--text-3);
}
.hero__proof b { color: var(--text-2); font-weight: 650; }

/* Phone showcase ---------------------------------------------------------- */

.phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; }

.phone {
  position: relative; flex: 0 0 auto;
  border-radius: 38px; padding: 9px;
  background: linear-gradient(160deg, #2c332f, #0d100e 60%);
  box-shadow: 0 34px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.07);
}
.phone img { border-radius: 30px; display: block; }
.phone--back {
  width: 40%; max-width: 214px; transform: rotate(-7deg) translate(16%, -3%);
  opacity: .82; z-index: 0;
}
.phone--front { width: 52%; max-width: 278px; z-index: 1; }

@media (max-width: 480px) { .phone--back { display: none; } .phone--front { width: 72%; } }

/* ── Stat strip ──────────────────────────────────────────────────────────── */

.stats {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0;
}
.stats__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  max-width: var(--wrap); margin: 0 auto;
}
@media (min-width: 780px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat { padding: 30px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
@media (max-width: 779px) {
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.stat b {
  display: block; font-size: clamp(28px, 3.6vw, 38px); font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat span { font-size: 13.5px; color: var(--text-3); }

/* ── Feature rows ────────────────────────────────────────────────────────── */

.feature { display: grid; gap: clamp(32px, 5vw, 68px); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: -1; }
}
.feature + .feature { margin-top: clamp(72px, 9vw, 118px); }

.feature__text h3 { margin: 14px 0 12px; }
.feature__text p { color: var(--text-2); margin: 0; max-width: 46ch; }

.feature__list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.feature__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15.5px; color: var(--text-2);
}
.feature__list svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--green-lift); margin-top: 2px; }

.feature__media { display: flex; justify-content: center; }
.feature__media .phone { width: 100%; max-width: 268px; }

/* ── Errol ───────────────────────────────────────────────────────────────── */

.errol {
  position: relative;
  background:
    radial-gradient(60% 70% at 20% 30%, rgba(24,177,94,.16), transparent 70%),
    var(--ink-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.errol__inner { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .errol__inner { grid-template-columns: .9fr 1.1fr; } }

.errol__portrait { position: relative; display: flex; justify-content: center; }
.errol__portrait .phone { width: min(268px, 74%); }

/* A real exchange, styled as the app styles it. */
.chat-demo {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  display: grid; gap: 12px; max-width: 520px;
}
.bubble { padding: 12px 16px; border-radius: 18px; font-size: 15.5px; line-height: 1.5; }
.bubble--me {
  background: var(--green); color: #001a0a; font-weight: 550;
  justify-self: end; border-bottom-right-radius: 6px; max-width: 88%;
}
.bubble--errol {
  background: var(--surface-2); color: var(--text-2);
  justify-self: start; border-bottom-left-radius: 6px; max-width: 94%;
}
.chat-demo__note {
  font-size: 13px; color: var(--text-3); display: flex; gap: 8px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px;
}
.chat-demo__note svg { width: 15px; height: 15px; color: var(--green-lift); flex: 0 0 auto; }

/* ── Discover / photography ──────────────────────────────────────────────── */

.discover__head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; }

.shots { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .shots { grid-template-columns: repeat(4, 1fr); } }

.shot {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.8,.25,1);
}
.shot:hover { transform: translateY(-4px); }
.shot img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.shot img.is-in { opacity: 1; }
.shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: 30px 14px 13px;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  font-size: 13.5px; font-weight: 650; line-height: 1.3;
}
.shot figcaption em { display: block; font-style: normal; font-weight: 500; color: var(--text-3); font-size: 12px; margin-top: 2px; }

/* Cuisine chips ----------------------------------------------------------- */

.cuisines { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.cuisine {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 15px; color: var(--text-2); background: var(--surface);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.cuisine:hover { color: var(--text); border-color: var(--green); transform: translateY(-2px); }
.cuisine b { color: var(--text-3); font-weight: 600; font-size: 13px; margin-left: 6px; }

/* ── CTA bands ───────────────────────────────────────────────────────────── */

.cta {
  border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(0,168,79,.26), transparent 62%),
    var(--surface);
  border: 1px solid var(--line);
  display: grid; gap: 26px; align-items: center;
}
@media (min-width: 860px) { .cta { grid-template-columns: 1.25fr .75fr; } }
.cta p { color: var(--text-2); margin: 14px 0 0; max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 860px) { .cta__actions { justify-content: flex-end; } }

.cta--owner {
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(255,209,0,.16), transparent 62%),
    var(--surface);
}
.cta--owner .btn--primary { background: var(--gold); color: #241d00; }
.cta--owner .btn--primary:hover { background: #ffdd3d; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); padding: 56px 0 44px; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer__brand img { width: 38px; height: 38px; border-radius: 50%; }
.footer__brand b { font-size: 17px; font-weight: 800; }
/* One wordmark treatment across the whole site: "YardLink" in white, "Eats"
   in the brand green — the same split the apps use in their header. */
.footer__brand b span { color: var(--green-lift); }
.footer p { color: var(--text-3); font-size: 14.5px; margin: 0; max-width: 38ch; }
.footer h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer li a { font-size: 14.5px; color: var(--text-2); }
.footer li a:hover { color: var(--text); }
.footer__base {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 13.5px; color: var(--text-3);
}

/* ── Scroll reveal ───────────────────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ── Utilities ───────────────────────────────────────────────────────────────
   Small, named helpers instead of inline style attributes. The CSP in
   netlify.toml sets style-src 'self', which blocks inline styles outright —
   keeping the policy strict is what guarantees this page cannot reach a
   third-party, including a billable Google endpoint. */

.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 16px; }
.mb-6 { margin-bottom: 28px; }

.section__intro { max-width: 56ch; margin-bottom: clamp(48px, 6vw, 80px); }
.section--tight { padding-top: 0; }
.stats { padding: 0; }
.eyebrow--gold { color: var(--gold); }


/* ── For-restaurants page ────────────────────────────────────────────────── */

.doc__checks {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s3);
  max-width: 52ch;
}
.doc__checks li {
  position: relative; padding-left: 30px;
  color: var(--text-2); font-size: 16px;
}
.doc__checks li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--green-lift); font-weight: 800;
}

.doc__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s5);
  aspect-ratio: auto;
}
.doc__card h3 { font-size: 17px; margin-bottom: 8px; }
.doc__card p { color: var(--text-2); font-size: 14.5px; margin: 0; line-height: 1.55; }

/* The claim page reuses .feature, but both halves are text — the second
   column should not inherit the phone-mockup centring. */
.feature .feature__text + .feature__text { align-self: start; }