/* ──────────────────────────────────────────────────────────────────────────
   home.css — public, logged-out landing page (templates/home.html)

   ERP-product style landing for Marali Farm (Aruba Prime Foods): sticky glass
   header, deep-green hero holding a pure-CSS dashboard mockup, a 4-step
   workflow strip, role/module cards, real farm photo band, CTA, footer.

   Everything is scoped under `.lp` so it never collides with the authenticated
   app styles in style.css / farm-theme.css. NOTE: home.css is loaded BEFORE
   those two global sheets, so `.lp` rules must keep enough specificity to win —
   in particular every NEW heading needs an explicit `.lp`-scoped color rule
   (see the heading block below) or the app sheets repaint it dark.
   Brand palette is kept in sync with static/img/marali-mark.svg.
   ────────────────────────────────────────────────────────────────────────── */

.lp {
  /* Brand greens (in sync with marali-mark.svg) */
  --lp-green: #1d5c38;
  --lp-green-dark: #16472b;
  --lp-green-mid: #226e43;
  --lp-green-forest: #0f3b21;
  --lp-mint: #f0fbf5;
  --lp-accent: #d63031;
  /* Header brand + nav text: brand green on light, near-white on dark so it
     never collapses into the dark header background. */
  --lp-brand-ink: var(--lp-green);

  /* Surfaces & text (light defaults; overridden for dark below) */
  --lp-ink: #1f2a33;
  --lp-muted: #5b6b78;
  --lp-surface: #ffffff;
  --lp-surface-2: #f1f6f2;
  --lp-page: #f6f9f7;
  --lp-border: #e4ebe6;
  --lp-header-bg: rgba(246, 249, 247, 0.86);
  --lp-kicker-ink: var(--lp-green);

  /* Dashboard mockup ("app") tokens — its own set so dark mode can restyle
     the fake product UI without touching the page tokens. */
  --lp-app-bg: #ffffff;
  --lp-app-chrome: #eef3ef;
  --lp-app-side: #f4f8f5;
  --lp-app-panel: #f7faf8;
  --lp-app-border: #e3ebe5;
  --lp-app-ink: #24313b;
  --lp-app-muted: #7b8a94;

  /* Scale */
  --lp-max: 1160px;
  --lp-radius: 0.9rem;
  --lp-radius-sm: 0.6rem;

  color: var(--lp-ink);
  background: var(--lp-page);
  font-family: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.lp-main {
  flex: 1 0 auto;
}

/* Generic content-link colour. Exclude `.lp-btn` so it does NOT tint button
   labels — buttons are <a> elements, and a plain `.lp a` rule (specificity
   0,1,1) would otherwise override `.lp-btn-primary { color:#fff }` (0,1,0),
   rendering the white "Sign In" label green-on-green (invisible). `:where()`
   adds zero specificity, so component link colours still win. */
.lp a:where(:not(.lp-btn):not(.lp-nav-link):not(.lp-brand)) {
  color: var(--lp-green);
}

/* Headings — set their colour EXPLICITLY with `.lp`-scoped specificity.
   style.css / farm-theme.css load AFTER home.css and colour every <h1>-<h3>
   with the dark app ink; a direct heading rule beats inheritance, so these
   rules make the landing the authority on its own text (prevents the dark
   "black letters" bug on the green hero / CTA). */
.lp .lp-hero h1,
.lp .lp-cta h2,
.lp .lp-cta p {
  color: #fff;
}

.lp .lp-section-head h2,
.lp .lp-flow-step h3,
.lp .lp-role h3,
.lp .lp-card h3,
.lp .lp-footer-h {
  color: var(--lp-ink);
}

/* ── Shared button system ────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.2;
  padding: 0.68rem 1.25rem;
  min-height: 44px; /* comfortable tap target */
  border-radius: var(--lp-radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.04s ease, background-color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}

.lp-btn:active {
  transform: translateY(1px);
}

/* One focus ring for every control. Two layers (white outline + dark-green
   halo) so it stays visible on ANY background — the white header, the green
   hero, or the photo CTA band. */
.lp-btn:focus-visible,
.lp-nav-link:focus-visible,
.lp-footer a:focus-visible,
.lp-brand:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(11, 54, 30, 0.7);
}

/* Primary — solid green on light surfaces (header) */
.lp-btn-primary {
  background: var(--lp-green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 92, 56, 0.22);
}
.lp-btn-primary:hover {
  background: var(--lp-green-dark);
  color: #fff;
}
.lp-btn-primary:active {
  background: var(--lp-green-forest);
}

/* Light — white on the green hero / photo band */
.lp-btn-light {
  background: #fff;
  color: var(--lp-green);
}
.lp-btn-light:hover {
  background: var(--lp-mint);
  color: var(--lp-green-dark);
}
.lp-btn-light:active {
  background: #e3f4ea;
}

/* Ghost — outline on the green hero. Hover tints with translucent WHITE (not
   the near-white mint, which made the white label vanish). */
.lp-btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.lp-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
}
.lp-btn-ghost:active {
  background: rgba(255, 255, 255, 0.26);
}

/* ── Header — sticky glass bar ───────────────────────────────────────────── */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lp-header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lp-border);
}

.lp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--lp-max);
  width: 100%;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--lp-brand-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.lp-brand img {
  width: 38px;
  height: 38px;
}

.lp-nav {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.lp-nav-link {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--lp-brand-ink);
  text-decoration: none;
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
  border-radius: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lp-nav-link:hover {
  color: var(--lp-brand-ink);
  border-bottom-color: currentColor;
}

/* Smooth in-page anchor scrolling, offset for the sticky header. */
.lp section[id],
.lp footer[id] {
  scroll-margin-top: 76px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    158deg,
    var(--lp-green-mid) 0%,
    var(--lp-green) 46%,
    var(--lp-green-forest) 100%
  );
  color: #fff;
}
/* Faint blueprint grid + a soft glow behind the mockup — atmosphere, not noise. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(110% 120% at 78% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(110% 120% at 78% 30%, #000 30%, transparent 78%);
  pointer-events: none;
}
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    52% 62% at 76% 42%,
    rgba(122, 219, 165, 0.16) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.lp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 3.75rem 1.5rem 4.25rem;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 3rem;
  align-items: center;
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cdeeda;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  margin-bottom: 1.1rem;
}

.lp-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.15rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  max-width: 15ch;
}

.lp-hero p.lp-lead {
  font-size: 1.12rem;
  color: #e4f4ea;
  max-width: 32rem;
  margin: 0 0 1.7rem;
}

.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lp-hero-trust {
  margin: 1.2rem 0 0;
  font-size: 0.85rem;
  color: rgba(228, 244, 234, 0.72);
}

/* ── Hero media — pure-CSS dashboard mockup in a browser frame ───────────── */
.lp-hero-media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 560px;
}

.lp-app {
  background: var(--lp-app-bg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(4, 22, 12, 0.45),
    0 8px 20px rgba(4, 22, 12, 0.3);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--lp-app-ink);
}

/* Browser chrome */
.lp-app-chrome {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--lp-app-chrome);
  border-bottom: 1px solid var(--lp-app-border);
  padding: 0.5rem 0.75rem;
}
.lp-app-dots {
  display: inline-flex;
  gap: 0.32rem;
}
.lp-app-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8e2da;
}
.lp-app-url {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--lp-app-bg);
  border: 1px solid var(--lp-app-border);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  color: var(--lp-app-muted);
  font-weight: 500;
}
.lp-app-url i {
  font-size: 0.55rem;
  color: var(--lp-green);
}

/* App body: slim sidebar + main */
.lp-app-body {
  display: grid;
  grid-template-columns: 44px 1fr;
}
.lp-app-side {
  background: var(--lp-app-side);
  border-right: 1px solid var(--lp-app-border);
  padding: 0.7rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.lp-app-mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--lp-green);
  margin-bottom: 0.35rem;
}
.lp-app-navstub {
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: var(--lp-app-border);
}
.lp-app-navstub.is-active {
  background: var(--lp-green-mid);
}

.lp-app-main {
  padding: 0.8rem;
  display: grid;
  gap: 0.7rem;
}

/* Stat cards */
.lp-app-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}
.lp-app-stat {
  border: 1px solid var(--lp-app-border);
  border-radius: 0.55rem;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.12rem;
  background: var(--lp-app-bg);
}
.lp-app-stat-label {
  color: var(--lp-app-muted);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lp-app-stat-value {
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.lp-app-stat-delta {
  color: var(--lp-app-muted);
  font-weight: 600;
  font-size: 0.62rem;
}
.lp-app-stat-delta.is-up {
  color: #1f9d5b;
}

/* Bar chart */
.lp-app-panel {
  border: 1px solid var(--lp-app-border);
  border-radius: 0.55rem;
  background: var(--lp-app-panel);
  padding: 0.6rem 0.7rem 0.55rem;
}
.lp-app-panel-head {
  display: block;
  color: var(--lp-app-muted);
  font-weight: 600;
  font-size: 0.64rem;
  margin-bottom: 0.5rem;
}
.lp-app-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 66px;
}
.lp-app-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #4f9e75, var(--lp-green-mid));
  opacity: 0.78;
}
.lp-app-bars i.is-today {
  background: linear-gradient(180deg, #62c48f, var(--lp-green));
  opacity: 1;
}

/* Activity rows */
.lp-app-list {
  display: grid;
  gap: 0.4rem;
}
.lp-app-list-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--lp-app-border);
  border-radius: 0.55rem;
  padding: 0.42rem 0.6rem;
  background: var(--lp-app-bg);
}
.lp-app-list-text {
  font-weight: 600;
}
.lp-app-list-meta {
  margin-left: auto;
  color: var(--lp-app-muted);
  font-variant-numeric: tabular-nums;
}
.lp-app-chip {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
}
.lp-app-chip.is-ok {
  background: rgba(31, 157, 91, 0.14);
  color: #167a45;
}
.lp-app-chip.is-pending {
  background: rgba(196, 145, 15, 0.14);
  color: #9a7110;
}

/* Floating approval toast overlapping the frame */
.lp-app-toast {
  position: absolute;
  right: -0.9rem;
  bottom: -1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--lp-app-bg);
  color: var(--lp-app-ink);
  border: 1px solid var(--lp-app-border);
  border-radius: 0.7rem;
  padding: 0.55rem 0.85rem 0.55rem 0.6rem;
  font-size: 0.72rem;
  box-shadow: 0 16px 34px rgba(4, 22, 12, 0.4);
}
.lp-app-toast-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(31, 157, 91, 0.15);
  color: #1f9d5b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}
.lp-app-toast-text {
  display: grid;
  line-height: 1.3;
  color: var(--lp-app-muted);
}
.lp-app-toast-text strong {
  color: var(--lp-app-ink);
  font-weight: 700;
}

/* Hero entrance — one orchestrated load moment (disabled for reduced motion). */
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lp-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: none;
  }
}
.lp-hero-copy > * {
  animation: lp-rise 0.55s ease both;
}
.lp-hero-copy > *:nth-child(2) { animation-delay: 0.07s; }
.lp-hero-copy > *:nth-child(3) { animation-delay: 0.14s; }
.lp-hero-copy > *:nth-child(4) { animation-delay: 0.21s; }
.lp-hero-copy > *:nth-child(5) { animation-delay: 0.28s; }
.lp-hero-media {
  animation: lp-rise 0.6s 0.2s ease both;
}
.lp-app-bars i {
  transform-origin: bottom;
  animation: lp-grow 0.6s 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.lp-app-toast {
  animation: lp-rise 0.45s 0.95s ease both;
}

/* ── Workflow strip ──────────────────────────────────────────────────────── */
.lp-flow {
  background: var(--lp-surface);
  border-bottom: 1px solid var(--lp-border);
}
.lp-flow-inner {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 3.75rem 1.5rem;
}
.lp-flow-steps {
  list-style: none;
  counter-reset: lp-step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}
.lp-flow-step {
  counter-increment: lp-step;
  position: relative;
  text-align: center;
  padding: 0 0.5rem;
}
.lp-flow-icon {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 1rem;
  background: var(--lp-mint);
  color: var(--lp-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.9rem;
}
.lp-flow-icon::after {
  content: counter(lp-step);
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lp-green);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dashed connector between step icons (desktop only). */
@media (min-width: 960px) {
  .lp-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    border-top: 2px dashed #c6dccd;
  }
}
.lp-flow-step h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}
.lp-flow-step p {
  color: var(--lp-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ── Section head + kicker (shared pattern) ──────────────────────────────── */
.lp-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-kicker-ink);
  margin-bottom: 0.6rem;
}
.lp-section-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.4rem;
}
.lp-section-head h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 0.55rem;
}
.lp-section-head p {
  color: var(--lp-muted);
  font-size: 1.03rem;
  margin: 0;
}

/* ── Role cards ──────────────────────────────────────────────────────────── */
.lp-roles-inner {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 3.75rem 1.5rem 1rem;
}
.lp-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}
.lp-role {
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(31, 42, 51, 0.04);
}
.lp-role-icon {
  width: 46px;
  height: 46px;
  border-radius: 0.7rem;
  background: var(--lp-mint);
  color: var(--lp-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}
.lp-role h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}
.lp-role p {
  color: var(--lp-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ── "Inside the farm" band — portrait photo + short context ─────────────────
   The available house photo is portrait (900×1200). Rather than stretch it into
   a wide band (which would crop it to a sliver AND upscale it), it sits beside a
   short caption. Capping the photo column at 360px keeps it BELOW its native
   width — so it stays crisp even on Retina (360px × 2 dpr = 720 < 900). */
.lp-photostrip {
  max-width: var(--lp-max);
  width: 100%;
  margin: 0 auto;
  padding: 3rem 1.5rem 1rem;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2.25rem;
  align-items: center;
}
.lp-photostrip-frame {
  margin: 0;
  border-radius: var(--lp-radius);
  overflow: hidden;
  border: 1px solid var(--lp-border);
  box-shadow: 0 8px 24px rgba(31, 42, 51, 0.1);
  aspect-ratio: 3 / 4;
  background: var(--lp-green-dark);
}
.lp-photostrip-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.lp-photostrip-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-green);
  margin-bottom: 0.7rem;
}
.lp-photostrip-text p {
  color: var(--lp-muted);
  font-size: 1.02rem;
  margin: 0 0 0.6rem;
  max-width: 38rem;
}
.lp-photostrip-text p.lp-photostrip-lead {
  color: var(--lp-ink);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lp-photostrip-text p:last-child {
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .lp-photostrip {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding-top: 2.5rem;
  }
  .lp-photostrip-frame {
    max-width: 340px;
    margin: 0 auto;
  }
  .lp-photostrip-text {
    text-align: center;
  }
}

/* ── Module grid ─────────────────────────────────────────────────────────── */
.lp-section {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 3.75rem 1.5rem;
  width: 100%;
}

.lp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
}

.lp-card {
  background: var(--lp-surface);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius);
  padding: 1.4rem;
  box-shadow: 0 2px 10px rgba(31, 42, 51, 0.04);
  transition: transform 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.lp-card:hover {
  transform: translateY(-3px);
  border-color: #c9ddcf;
  box-shadow: 0 10px 26px rgba(31, 42, 51, 0.09);
}
.lp-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 0.7rem;
  background: var(--lp-mint);
  color: var(--lp-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.9rem;
}
.lp-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.lp-card p {
  color: var(--lp-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ── Staff-access CTA band (real flock photo background) ──────────────────── */
.lp-cta {
  background: var(--lp-green-dark);
  color: #fff;
}
.lp-cta-photo {
  position: relative;
  background-image: linear-gradient(
      rgba(16, 46, 29, 0.84),
      rgba(11, 33, 20, 0.92)
    ),
    url("../img/farm-flock.5608d727c7da.jpg");
  background-size: cover;
  background-position: center 30%;
}
.lp-cta-inner {
  position: relative;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.lp-cta-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
}
.lp-cta-inner > p {
  font-size: 1.08rem;
  color: #e4f4ea;
  margin: 0 0 1.5rem;
}
.lp-cta-note {
  font-size: 0.9rem;
  color: rgba(228, 244, 234, 0.82) !important;
  margin: 1.25rem 0 0 !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.lp-footer {
  margin-top: auto;
  border-top: 1px solid var(--lp-border);
  background: var(--lp-surface);
}
.lp-footer-inner {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2.5rem;
}
.lp-footer-brand .lp-brand-sm {
  font-size: 1.12rem;
}
.lp-footer-brand .lp-brand-sm img {
  width: 30px;
  height: 30px;
}
.lp-footer-brand p {
  color: var(--lp-muted);
  font-size: 0.92rem;
  margin: 0.6rem 0 0;
}
.lp-footer-h {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.85rem;
}
.lp-footer-links ul,
.lp-footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.lp-footer-links a {
  color: var(--lp-muted);
  font-size: 0.94rem;
  text-decoration: none;
}
.lp-footer-links a:hover {
  color: var(--lp-green);
  text-decoration: underline;
}
.lp-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--lp-muted);
  font-size: 0.94rem;
}
.lp-footer-contact li i {
  color: var(--lp-green);
  margin-top: 0.18rem;
  width: 16px;
  text-align: center;
}
.lp-footer-contact a {
  color: var(--lp-muted);
  text-decoration: none;
}
.lp-footer-contact a:hover {
  color: var(--lp-green);
  text-decoration: underline;
}
.lp-footer-bar {
  border-top: 1px solid var(--lp-border);
}
.lp-footer-bar {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 1.1rem 1.5rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--lp-muted);
  font-size: 0.88rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Modules: 4 → 3 columns */
@media (max-width: 1199px) {
  .lp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: hero stacks, workflow → 2, modules → 2 */
@media (max-width: 959px) {
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .lp-hero-copy {
    order: 1;
  }
  .lp-hero-media {
    order: 2;
    justify-self: center;
    max-width: 520px;
  }
  .lp-hero h1,
  .lp-hero p.lp-lead {
    max-width: none;
  }
  .lp-flow-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }
  .lp-roles-grid {
    grid-template-columns: 1fr;
  }
  .lp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Narrow: drop the text nav links (brand + Sign In stay). */
@media (max-width: 700px) {
  .lp-nav-link {
    display: none;
  }
}

/* Mobile: single column everywhere */
@media (max-width: 639px) {
  .lp-header-inner {
    padding: 0.7rem 1.1rem;
    gap: 0.75rem;
  }
  /* Keep the brand and the Sign In button on a single line each. At their
     default sizes the header items overflow a narrow phone, wrapping
     "Marali Farm" and "Sign In" onto two lines. Shrink them and disable wrap. */
  .lp-brand {
    font-size: 1.05rem;
    gap: 0.45rem;
  }
  .lp-brand img {
    width: 32px;
    height: 32px;
  }
  .lp-brand span {
    white-space: nowrap;
  }
  .lp-nav {
    gap: 0.6rem;
  }
  .lp-header .lp-btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .lp-hero-inner {
    padding: 2.5rem 1.25rem 3.25rem;
  }
  /* Hero typography: the desktop h1 clamp floors at 2.1rem, which never scales
     down on phones and dominates the small screen. Shrink the eyebrow, headline
     and lead so the hero fits comfortably above the fold. */
  .lp-eyebrow {
    font-size: 0.68rem;
    margin-bottom: 0.8rem;
  }
  .lp-hero h1 {
    font-size: clamp(1.55rem, 6.4vw, 2rem);
    margin-bottom: 0.85rem;
  }
  .lp-hero p.lp-lead {
    font-size: 1rem;
    margin-bottom: 1.4rem;
  }
  .lp-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-hero-cta .lp-btn {
    width: 100%;
  }
  /* Mockup: keep the floating toast inside the viewport. */
  .lp-app-toast {
    right: 0.25rem;
    bottom: -0.9rem;
    font-size: 0.68rem;
  }
  .lp-app {
    font-size: 0.62rem;
  }
  .lp-app-stat-value {
    font-size: 0.85rem;
  }
  .lp-flow-steps {
    grid-template-columns: 1fr;
    gap: 1.9rem;
  }
  .lp-grid {
    grid-template-columns: 1fr;
  }
  .lp-footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .lp-footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
html[data-theme="dark"] .lp,
html[data-theme="auto"] .lp {
  --lp-ink: #e4e9ee;
  --lp-muted: #9fb0ad;
  --lp-surface: #161d22;
  --lp-surface-2: #1b242a;
  --lp-page: #0f1419;
  --lp-border: #26303a;
  --lp-brand-ink: #e8eef0;
  --lp-header-bg: rgba(15, 20, 25, 0.82);
  --lp-kicker-ink: #6fd396;
  --lp-app-bg: #151c22;
  --lp-app-chrome: #10161b;
  --lp-app-side: #121920;
  --lp-app-panel: #182128;
  --lp-app-border: #2a3540;
  --lp-app-ink: #dfe7ec;
  --lp-app-muted: #8b9aa3;
}
html[data-theme="dark"] .lp .lp-footer-contact a:hover,
html[data-theme="auto"] .lp .lp-footer-contact a:hover,
html[data-theme="dark"] .lp .lp-footer-links a:hover,
html[data-theme="auto"] .lp .lp-footer-links a:hover {
  color: #6fd396;
}
html[data-theme="dark"] .lp .lp-role-icon,
html[data-theme="auto"] .lp .lp-role-icon,
html[data-theme="dark"] .lp .lp-card-icon,
html[data-theme="auto"] .lp .lp-card-icon,
html[data-theme="dark"] .lp .lp-flow-icon,
html[data-theme="auto"] .lp .lp-flow-icon {
  background: rgba(34, 110, 67, 0.18);
  color: #6fd396;
}
html[data-theme="dark"] .lp .lp-footer-contact li i,
html[data-theme="auto"] .lp .lp-footer-contact li i,
html[data-theme="dark"] .lp .lp-photostrip-kicker,
html[data-theme="auto"] .lp .lp-photostrip-kicker {
  color: #6fd396;
}
html[data-theme="dark"] .lp .lp-app-dots i,
html[data-theme="auto"] .lp .lp-app-dots i {
  background: #33404a;
}
html[data-theme="dark"] .lp .lp-flow-step:not(:last-child)::after,
html[data-theme="auto"] .lp .lp-flow-step:not(:last-child)::after {
  border-top-color: #2f4038;
}
html[data-theme="dark"] .lp .lp-card:hover,
html[data-theme="auto"] .lp .lp-card:hover {
  border-color: #3a4d42;
}

/* `auto` follows the OS; re-assert light tokens when the OS prefers light. */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .lp {
    --lp-ink: #1f2a33;
    --lp-muted: #5b6b78;
    --lp-surface: #ffffff;
    --lp-surface-2: #f1f6f2;
    --lp-page: #f6f9f7;
    --lp-border: #e4ebe6;
    --lp-brand-ink: var(--lp-green);
    --lp-header-bg: rgba(246, 249, 247, 0.86);
    --lp-kicker-ink: var(--lp-green);
    --lp-app-bg: #ffffff;
    --lp-app-chrome: #eef3ef;
    --lp-app-side: #f4f8f5;
    --lp-app-panel: #f7faf8;
    --lp-app-border: #e3ebe5;
    --lp-app-ink: #24313b;
    --lp-app-muted: #7b8a94;
  }
  html[data-theme="auto"] .lp .lp-role-icon,
  html[data-theme="auto"] .lp .lp-card-icon,
  html[data-theme="auto"] .lp .lp-flow-icon {
    background: var(--lp-mint);
    color: var(--lp-green);
  }
  html[data-theme="auto"] .lp .lp-footer-contact li i,
  html[data-theme="auto"] .lp .lp-photostrip-kicker {
    color: var(--lp-green);
  }
  html[data-theme="auto"] .lp .lp-footer-contact a:hover,
  html[data-theme="auto"] .lp .lp-footer-links a:hover {
    color: var(--lp-green);
  }
  html[data-theme="auto"] .lp .lp-app-dots i {
    background: #d8e2da;
  }
  html[data-theme="auto"] .lp .lp-flow-step:not(:last-child)::after {
    border-top-color: #c6dccd;
  }
  html[data-theme="auto"] .lp .lp-card:hover {
    border-color: #c9ddcf;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lp .lp-btn,
  .lp .lp-card,
  .lp .lp-nav-link {
    transition: none;
  }
  .lp .lp-card:hover {
    transform: none;
  }
  .lp .lp-btn:active {
    transform: none;
  }
  .lp .lp-hero-copy > *,
  .lp .lp-hero-media,
  .lp .lp-app-bars i,
  .lp .lp-app-toast {
    animation: none;
  }
}