/* =====================================================================
   MyLittleBigFarm — site styles
   Tailwind (CDN) handles spacing/layout utilities in index.html.
   Everything that must be right on FIRST PAINT (colors, fonts, hero
   layout) lives here so the page never flashes light or unstyled.
   ===================================================================== */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./assets/fonts/Fraunces-Roman.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("./assets/fonts/Fraunces-Italic.woff2") format("woff2");
}

/* ---------- Brand tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #121212;
  --surface: #1E1E1E;
  --raised: #2A2A2A;
  --green: #52B788;
  --green-dark: #2D6A4F;
  --green-light: #74C69D;
  --ink: #E8E8E8;
  --ink-2: #A0A0A0;
  --ink-3: #6B6B6B;
  --line: #333333;
  --clay: #E0976B;
  --amber: #F0B74E;

  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Hero scroll length: how far the user scrolls while the hero stays pinned.
     320vh = the hero occupies 3.2 screen-heights of scrolling (2.2 of them "pinned").
     Bigger = slower, more cinematic video. JS reads the real height, so this is the
     single place to change it. */
  --hero-track: 320vh;
}
@media (max-width: 767px) {
  :root { --hero-track: 190vh; } /* shorter on phones: the video loops there instead of scrubbing */
}

/* ---------- Base ---------- */
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.font-serif { font-family: var(--font-serif); font-optical-sizing: auto; }
::selection { background: var(--green); color: #0b1f15; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--green); color: #0b1f15; padding: .5rem .9rem; border-radius: 999px; font-weight: 600; }
.skip-link:focus { left: 8px; }

/* Small mono labels used throughout ("FIELD NOTE" style) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ---------- Nav ---------- */
/* Fully transparent at rest — no gradient and no border, so there is no hard edge under
   the nav. (The old 1px "line" was the rest-state gradient: it is sized to the padding box
   but painted across the border box, so with the default background-repeat the tile
   restarted and re-painted its dark start colour into the 1px border row.)
   Scrolling just adds a frosted blur and a light tint; main.js toggles .is-scrolled. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background-color: rgba(18,18,18,0);
  transition: background-color .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
.nav.is-scrolled {
  background-color: rgba(18,18,18,.68);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.wordmark { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.wordmark em { font-style: italic; font-weight: 400; color: var(--green); }
.nav-link { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.nav-link:hover { color: var(--ink); }

/* ---------- App Store badge / buttons ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap;
  background: var(--green); color: #0b1f15; text-decoration: none;
  padding: .8rem 1.35rem .8rem 1.1rem; border-radius: 999px;
  line-height: 1.05; transition: background-color .2s, transform .2s;
  box-shadow: 0 10px 40px rgba(82,183,136,.18);
}
.badge:hover { background: var(--green-light); transform: translateY(-1px); }
.badge svg { width: 22px; height: 22px; flex: none; }
.badge small { display: block; font-size: .68rem; letter-spacing: .04em; opacity: .8; }
.badge strong { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.badge--sm { padding: .5rem .95rem .5rem .8rem; box-shadow: none; white-space: nowrap; }
@media (max-width: 767px) { .badge--sm { padding: .45rem .8rem .45rem .7rem; } }
.badge--sm svg { width: 15px; height: 15px; }
.badge--sm strong { font-size: .82rem; }

/* ---------- Hero ---------- */
/* Flat by default: a normal one-screen hero with no pinned scroll region.
   The tall scroll-scrub track is opt-in (.is-scrub), added by main.js ONLY once a
   real, seekable video has loaded — so a missing/blocked video never leaves a dead
   pinned "scroll-hijack" zone. */
.hero-track { height: 100svh; position: relative; }
.hero-track.is-scrub { height: var(--hero-track); }
.hero-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; background: var(--bg);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--bg);
}
.hero-video.is-hidden { display: none; }
/* Dark scrim so the headline stays legible over any frame of the video */
/* Two-layer scrim. The footage is a bright outdoor clip (avg luma ~145/255), so it is pushed
   firmly into the background and the copy stays the focal point.
     Layer 1 (painted on top): vertical gradient — near-solid behind the nav, most open through
       the middle band, and a full #121212 stop at the base so the hero dissolves into the next
       section with no hard edge.
     Layer 2 (underneath): flat 58% #121212 across the whole clip.
   Layers composite to 1-(1-a1)(1-a2), giving effective darkening of roughly:
     top 96%  ·  18% → 77%  ·  middle 62%  ·  80% → 79%  ·  bottom 100% (solid #121212). */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(18,18,18,.90) 0%,
      rgba(18,18,18,.45) 18%,
      rgba(18,18,18,.16) 48%,
      rgba(18,18,18,.50) 80%,
      rgba(18,18,18,1) 100%),
    linear-gradient(rgba(18,18,18,.58), rgba(18,18,18,.58));
}
.hero-copy {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6rem 1.5rem 7rem;
  will-change: transform, opacity;
}
.hero-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(3rem, 9.5vw, 8rem); line-height: .95; letter-spacing: -.025em;
  text-wrap: balance; color: #F4F1EA;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.hero-title em { font-style: italic; font-weight: 400; color: var(--clay); }
/* Extra separation from moving footage, on top of the measured colour contrast. */
.hero-sub { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.hero-hint {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  color: var(--ink-3); text-decoration: none; transition: opacity .35s;
}
.hero-hint .line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--ink-3), transparent); }
.hero-meta { position: absolute; right: 1.5rem; bottom: 2rem; z-index: 2; text-align: right; color: var(--ink-2); }
@media (max-width: 767px) { .hero-meta { display: none; } }
/* Dissolves the hero into the page background at the very end of the scrub */
.hero-fade { position: absolute; inset: 0; z-index: 3; background: var(--bg); opacity: 0; pointer-events: none; }

/* ---------- Marquee ticker ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: marquee 48s linear infinite; }
.marquee__list { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee__list li { display: inline-flex; align-items: center; gap: 2.5rem; }
.marquee__list li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Editorial headings ---------- */
.display { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
.display em { font-style: italic; font-weight: 400; color: var(--green-light); }
.display em.clay { color: var(--clay); }
.prose-lg { font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); max-width: 52ch; }
.prose-lg strong { color: var(--ink); font-weight: 500; }
.prose-lg a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(82,183,136,.35); }
.prose-lg a:hover { border-bottom-color: var(--green); }

/* ---------- Reveal on scroll (subtle) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: opacity .4s; } }

/* ---------- Screenshot panel + phone frame ---------- */
.shot-panel {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden;
}
.shot-panel::before { /* faint green glow so the phone sits IN the surface, not on it */
  content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(45,106,79,.35), rgba(45,106,79,0) 70%);
  pointer-events: none;
}
.phone {
  position: relative; width: min(100%, 290px); aspect-ratio: 290 / 604; margin: 0 auto; /* screen = 440:956, like the device */
  border-radius: 46px; background: #0a0a0a; border: 1px solid #3a3a3a; padding: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.phone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg); }
/* Your real screenshot (./screenshots/*.png). If the file is missing, onerror removes it and the HTML mock below shows. */
.phone-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.has-shot .phone-mock { display: none; }

/* ---------- Built-in app mockups ----------
   Faithful recreations of the app screens, authored at the iPhone 17 Pro Max
   logical size (440 × 956 px) and scaled to the frame by main.js (--mock-scale).
   Hidden automatically once a real screenshot (./screenshots/*.png) loads. */
.phone-mock {
  position: absolute; top: 0; left: 0; width: 440px; height: 956px;
  transform-origin: 0 0; transform: scale(var(--mock-scale, .6091));
  background: #121212; color: #F0F0F0; font-family: var(--font-sans);
  font-size: 17px; line-height: 1.3; overflow: hidden;
}
.phone-mock *, .phone-mock *::before { box-sizing: border-box; }
.phone-mock svg { display: block; flex: none; }

/* status bar */
.s-status { position: absolute; inset: 0 0 auto 0; height: 54px; }
.s-time { position: absolute; left: 66px; top: 22px; line-height: 22px; font-size: 17px; font-weight: 600; color: #fff; }
.s-island { position: absolute; left: 158px; top: 14px; width: 124px; height: 36px; border-radius: 18px; background: #000; }
.s-dots { position: absolute; left: 312px; top: 31px; display: flex; gap: 3px; }
.s-dots i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #6E6E6E; display: block; }
.s-wifi { position: absolute; left: 341px; top: 25px; width: 21px; height: 16px; color: #fff; }
.s-batt { position: absolute; left: 368px; top: 26px; width: 33px; height: 14px; color: #fff; }

/* tab bar (cloned from <template id="tpl-tabs"> by main.js) */
.s-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 85px; background: #1E1E1E; border-top: 1px solid #2A2A2A; display: flex; }
.s-tabs .m-tab { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 10px; gap: 5px; color: #7A7A7A; font-size: 11px; font-weight: 500; line-height: 13px; }
.s-tabs .m-tab svg { width: 26px; height: 26px; }
.s-tabs .m-tab.on { color: #52B788; }

/* list screens: header, search, filter row, rows */
.s-head { position: absolute; top: 67px; left: 20px; right: 20px; height: 42px; display: flex; align-items: center; justify-content: space-between; }
.s-title { font-size: 31px; font-weight: 700; letter-spacing: -.4px; line-height: 42px; color: #F5F5F5; }
.s-hbtns { display: flex; gap: 17px; }
.s-hbtn { width: 43px; height: 42px; border-radius: 12px; background: #006C4C; display: grid; place-items: center; color: #fff; }
.s-hbtn svg { width: 22px; height: 22px; }
.s-hbtn--gray { background: #5C6470; }
.s-search { position: absolute; top: 131px; left: 20px; right: 20px; height: 46px; border-radius: 12px; background: #1E1E1E; border: 1px solid #333; display: flex; align-items: center; padding-left: 16px; gap: 8px; color: #7A7A7A; font-size: 16px; }
.s-search svg { width: 20px; height: 20px; color: #777; }
.s-filters { position: absolute; top: 192px; left: 20px; right: 20px; display: flex; gap: 10px; }
.s-fbtn { flex: 1; height: 42px; border-radius: 12px; background: #1E1E1E; border: 1px solid #333; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: #F0F0F0; }
.s-fbtn svg { width: 16px; height: 16px; }
.s-count { position: absolute; left: 20px; font-size: 14.5px; line-height: 22px; color: #B0B0B0; }
.s-list { position: absolute; left: 20px; right: 20px; display: flex; flex-direction: column; }
.s-row { background: #1E1E1E; border-radius: 20px; display: flex; align-items: center; padding: 0 16px 0 14px; flex: none; }
.s-row--animal { height: 89px; }
.s-row--health { height: 88px; padding-left: 13px; }
.s-row--health .s-meta { font-size: 13px; line-height: 17px; }
.s-avatar { width: 48px; height: 48px; border-radius: 50%; background: #2A2A2A; display: grid; place-items: center; font-size: 26px; line-height: 1; }
.s-sq { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.s-sq svg { width: 22px; height: 22px; }
.s-rowtext { margin-left: 13px; flex: 1; min-width: 0; }
.s-name { font-size: 16px; font-weight: 700; line-height: 21px; display: flex; align-items: center; gap: 8px; color: #F5F5F5; white-space: nowrap; }
.s-sub { font-size: 15.5px; font-weight: 600; line-height: 20px; color: #F5F5F5; }
.s-pill { font-size: 13px; font-weight: 600; line-height: 18px; color: #74C69D; background: #1A2F1E; border-radius: 8px; padding: 3px 7px; }
.s-meta { font-size: 14.3px; line-height: 19px; color: #B0B0B0; }
.s-meta--b { font-size: 14px; line-height: 19px; font-weight: 700; }
.s-chev { width: 10px; height: 18px; color: #6B6B6B; margin-left: 8px; }
.s-badge { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; line-height: 11px; padding: 2px 6px; border-radius: 5px; }
.t-clay { background: #3E281E; color: #F69D6F; }
.t-blue { background: #1B2D3B; color: #82C6E3; }
.t-green { background: #113220; color: #52B788; }

/* home */
.s-greet { position: absolute; top: 76px; left: 20px; font-size: 16px; line-height: 20px; color: #B0B0B0; }
.s-farm { position: absolute; top: 98px; left: 20px; font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -.4px; color: #F5F5F5; }
.s-sbtn { position: absolute; top: 84px; right: 20px; width: 43px; height: 43px; border-radius: 10px; background: #2A2A2A; display: grid; place-items: center; color: #52B788; }
.s-sbtn svg { width: 20px; height: 20px; }
.s-ocard { position: absolute; top: 154px; left: 20px; right: 20px; height: 200px; background: #1E1E1E; border-radius: 16px; padding: 20px; }
.s-orow { display: flex; align-items: center; gap: 13px; height: 28px; }
.s-olabel { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #B0B0B0; }
.s-oadd { font-size: 15px; font-weight: 500; color: #4A6D62; }
.s-opill { margin-left: auto; font-size: 15px; font-weight: 600; line-height: 20px; color: #74C69D; background: #1A2F1E; border-radius: 8px; padding: 4px 14px; }
.s-tiles { display: flex; gap: 13px; margin-top: 16px; }
.s-tile { width: 93px; height: 116px; border-radius: 12px; background: #2A2A2A; text-align: center; padding-top: 16px; }
.s-tile i { display: block; font-style: normal; font-size: 22px; line-height: 24px; }
.s-tile b { display: block; font-size: 24px; font-weight: 700; line-height: 28px; margin-top: 10px; color: #F5F5F5; }
.s-tile span { display: block; font-size: 13px; line-height: 16px; margin-top: 6px; color: #B0B0B0; }
.s-tasks { position: absolute; top: 374px; left: 20px; font-size: 16px; font-weight: 600; line-height: 22px; color: #8FB0A2; }
.s-qa { position: absolute; top: 406px; left: 20px; right: 0; display: flex; gap: 11px; overflow: hidden; }
.s-qbtn { flex: none; width: 107px; height: 73px; border-radius: 12px; background: #006C4C; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 16px; }
.s-qbtn svg { width: 22px; height: 22px; }
.s-h2 { position: absolute; left: 20px; right: 20px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; line-height: 22px; color: #F5F5F5; }
.s-h2 svg { width: 18px; height: 18px; }
.s-h2 .s-seeall { margin-left: auto; font-size: 13px; font-weight: 500; color: #4C6A62; }
.s-clear { position: absolute; top: 531px; left: 20px; right: 20px; height: 67px; border-radius: 16px; background: #1E1E1E; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; color: #52B788; }
.s-clear svg { width: 18px; height: 18px; }
.s-window { position: absolute; top: 650px; left: 20px; right: 20px; height: 38px; border-radius: 10px; background: #1E1E1E; border: 1px solid #333; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: #F0F0F0; }
.s-window svg { width: 14px; height: 14px; }
.s-due { position: absolute; left: 20px; right: 20px; height: 77px; border-radius: 16px; background: #1E1E1E; display: flex; align-items: center; padding: 0 16px 0 15px; }
.s-dicon { width: 41px; height: 41px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.s-dicon svg { width: 20px; height: 20px; }
.s-dicon--sq { width: 38px; height: 38px; border-radius: 10px; margin: 0 1.5px; } /* keeps row text aligned with the due card */
.s-dtext { margin-left: 15px; flex: 1; min-width: 0; }
.s-dtitle { font-size: 16px; font-weight: 600; line-height: 20px; color: #F5F5F5; }
.s-dsub { font-size: 13px; line-height: 18px; color: #B0B0B0; }
.s-dright { text-align: right; color: #74C69D; }
.s-dright b { display: block; font-size: 16px; font-weight: 700; line-height: 20px; }
.s-dright span { display: block; font-size: 13px; line-height: 18px; }
.s-dright--clay { color: #F69D6F; }

/* more */
.s-ucard { position: absolute; top: 73px; left: 20px; right: 20px; height: 172px; border-radius: 22px; background: #52B788; color: #fff; padding: 16px 18px 0; }
.s-uname { font-size: 26px; font-weight: 700; line-height: 30px; letter-spacing: -.3px; }
.s-umail { font-size: 14px; line-height: 20px; }
.s-ufarm { font-size: 14px; font-weight: 600; line-height: 20px; }
.s-ustats { display: flex; gap: 36px; margin-top: 14px; }
.s-ustat { min-width: 100px; }
.s-ustat b { display: block; font-size: 31px; font-weight: 700; line-height: 36px; }
.s-ustat span { display: block; font-size: 12px; line-height: 16px; }
.s-seclabel { position: absolute; left: 20px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 20px; color: #B0B0B0; }
.s-seclabel--case { text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 22px; }
.s-menu { position: absolute; left: 20px; right: 20px; background: #1E1E1E; border-radius: 20px; overflow: hidden; }
.s-mrow { display: flex; align-items: center; min-height: 72px; padding: 11px 20px 11px 16px; border-top: 1px solid #2A2A2A; }
.s-mrow:first-child { border-top: 0; }
.s-micon { width: 38px; height: 38px; border-radius: 50%; background: #2A2A2A; display: grid; place-items: center; color: #52B788; flex: none; }
.s-micon svg { width: 20px; height: 20px; }
.s-micon--sq { width: 40px; height: 40px; border-radius: 10px; background: #0F0F0F; }
.s-mtext { margin-left: 13px; flex: 1; min-width: 0; }
.s-mtitle { font-size: 16.5px; font-weight: 600; line-height: 22px; color: #F5F5F5; }
.s-msub { font-size: 13px; line-height: 16px; color: #B0B0B0; margin-top: 2px; }

/* ---------- "Why" ledger ---------- */
.ledger { border-top: 1px solid var(--line); }
.ledger-row { display: grid; grid-template-columns: 1fr; gap: .4rem 3rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.ledger-row .l { color: var(--ink-3); }
.ledger-row .r { color: var(--ink); }
.ledger-row .l::before, .ledger-row .r::before { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; display: block; margin-bottom: .3rem; }
.ledger-row .l::before { content: "The usual"; color: var(--ink-3); }
.ledger-row .r::before { content: "MyLittleBigFarm"; color: var(--green); }
.ledger-head { display: none; }
@media (min-width: 768px) {
  .ledger-row { grid-template-columns: 1fr 1fr; padding: 1.6rem 0; }
  .ledger-row .l::before, .ledger-row .r::before { display: none; }
  .ledger-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding: 1.25rem 0 .9rem; }
}

/* ---------- Closing CTA with dimmed looping video ---------- */
.cta { position: relative; overflow: hidden; background: var(--bg); }
.cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.85); }
.cta-video.is-hidden { display: none; }
.cta-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, rgba(18,18,18,.55) 35%, rgba(18,18,18,.55) 65%, var(--bg) 100%); }

/* ---------- Site footer (shared by every page) ---------- */
.site-footer { background: #0B0B0B; border-top: 1px solid var(--line); color: var(--ink-2); }
.site-footer__inner { position: relative; max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.5rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: auto minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: start; } }
@media (min-width: 900px) { .site-footer__mark { display: block; } }
/* Large logo mark anchoring the empty left side of the footer. It is a grid item (order:-1
   puts it in a column of its own ahead of the brand text, so it sits beside the copy rather
   than under it) and uses the transparent logo.svg, so it sits straight on #0B0B0B with no
   box or seam. Hidden below 900px, where the layout stacks and there is no free space. */
.site-footer__mark { display: none; order: -1; align-self: center; width: 132px; height: 132px; opacity: .9; pointer-events: none; }
@media (min-width: 900px) { .site-footer__mark { display: block; } }
.site-footer__brand p { margin: 1rem 0 1.5rem; max-width: 34ch; line-height: 1.6; }
.store-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .95rem .55rem .8rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; line-height: 1.1; transition: border-color .2s; }
.store-badge:hover { border-color: var(--ink-3); }
.store-badge svg { width: 20px; height: 20px; flex: none; }
.store-badge small { display: block; font-size: .65rem; color: var(--ink-3); letter-spacing: .02em; }
.store-badge strong { display: block; font-size: 1rem; font-weight: 600; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
@media (min-width: 640px) { .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__col { border-top: 1px solid var(--line); padding-top: 1rem; }
.site-footer__col h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin: 0 0 .9rem; font-weight: 600; }
.site-footer__col a { display: block; color: var(--ink-2); text-decoration: none; padding: .28rem 0; font-size: .95rem; transition: color .2s; }
.site-footer__col a:hover { color: var(--ink); }
.site-footer__bar { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.5rem 2.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--ink-3); }