/* Alfalfa Depot: landing page only (index.html)
   Two layouts, chosen by orientation rather than width alone:
     portrait   drawn at 390 wide, scales to every phone and upright tablet
     landscape  drawn at 1366 wide, scales from a sideways phone to 4K
   --u is one design pixel. Every size is max(rem floor, N * --u), so the page
   keeps its proportions at any size but text and tap targets never drop below
   a readable floor, and browser zoom still enlarges the floors. */

.landing{ --u:calc(100vw / 390); }
@media (orientation: landscape) and (min-width: 600px){
  .landing{ --u:calc(100vw / 1366); }
}

/* Native controls (the checkbox) follow the theme */
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){color-scheme:dark} }

/* Anchor jumps land below the sticky header; --hdrH is measured in landing.js */
html{scroll-padding-top:var(--hdrH, 56px)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* ---------- Header: deep green in both themes, stays on screen ---------- */
.ld-header{position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#1e5631; border-bottom:1px solid rgba(255,255,255,0.14);
  padding:max(8px, calc(8 * var(--u))) max(14px, calc(15.6 * var(--u)))}
.ld-brand{display:flex; align-items:center; gap:max(10px, calc(10 * var(--u)))}
.ld-chip{background:#fff; border-radius:max(8px, calc(8 * var(--u))); padding:max(5px, calc(5 * var(--u)));
  display:grid; place-items:center}
.ld-chip img{display:block; object-fit:contain;
  width:max(1.75rem, calc(28 * var(--u))); height:max(1.75rem, calc(28 * var(--u)))}
.ld-wordmark{font-family:Lora,Georgia,serif; font-weight:600; white-space:nowrap;
  font-size:max(1.0625rem, calc(17 * var(--u))); color:#e8d9a8}
.ld-wordmark span{color:#fff; font-weight:400; letter-spacing:0.14em}
.ld-brand:hover .ld-wordmark{color:#fff}

/* Phone: menu button opens a panel under the header */
.ld-menu-btn{display:grid; place-items:center; flex-shrink:0; cursor:pointer;
  width:max(2.75rem, calc(44 * var(--u))); height:max(2.75rem, calc(44 * var(--u)));
  background:transparent; border:1px solid rgba(232,217,168,0.45);
  border-radius:max(10px, calc(10 * var(--u)))}
.ld-burger{display:flex; flex-direction:column; gap:max(4px, calc(4 * var(--u)))}
.ld-burger i{display:block; width:max(18px, calc(18 * var(--u))); height:2px; border-radius:1px;
  background:#fff; transition:transform .2s, opacity .2s}
.ld-menu-btn[aria-expanded="true"] .ld-burger i:nth-child(1){transform:translateY(calc(max(4px, calc(4 * var(--u))) + 2px)) rotate(45deg)}
.ld-menu-btn[aria-expanded="true"] .ld-burger i:nth-child(2){opacity:0}
.ld-menu-btn[aria-expanded="true"] .ld-burger i:nth-child(3){transform:translateY(calc(-1 * max(4px, calc(4 * var(--u))) - 2px)) rotate(-45deg)}

.ld-nav{display:none; position:absolute; top:100%; left:0; right:0;
  flex-direction:column; background:#1e5631;
  border-bottom:1px solid rgba(255,255,255,0.14); box-shadow:0 12px 24px rgba(0,0,0,0.25);
  padding:max(4px, calc(4 * var(--u))) max(14px, calc(15.6 * var(--u))) max(10px, calc(10 * var(--u)))}
.ld-nav.is-open{display:flex}
.ld-nav a{display:flex; align-items:center; color:#fff; font-weight:600;
  min-height:max(2.75rem, calc(48 * var(--u))); font-size:max(1rem, calc(17 * var(--u)));
  border-top:1px solid rgba(255,255,255,0.12)}
.ld-nav a:first-child{border-top:0}
.ld-nav a:hover{color:#e8d9a8}

/* ---------- Hero: one screen under the header ---------- */
.ld-hero{position:relative; overflow:hidden; background:#22301f;
  display:flex; align-items:stretch;
  min-height:calc(100vh - var(--hdrH, 56px)); min-height:calc(100svh - var(--hdrH, 56px));
  padding:max(20px, calc(28 * var(--u))) max(22px, calc(26 * var(--u)))}
.ld-photo{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%; opacity:0.85}
.ld-shade{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,32,18,0.7) 0%, rgba(20,32,18,0.88) 100%)}
.ld-grid{position:relative; width:100%; margin:0 auto; display:grid;
  grid-template-columns:1fr; align-content:space-evenly; justify-items:center;
  gap:max(24px, calc(28 * var(--u)))}

.ld-copy{text-align:center}
.ld-copy h1{font-family:Lora,Georgia,serif; font-weight:600; color:#fff; margin:0;
  line-height:1.12; font-size:max(1.625rem, calc(32 * var(--u)))}
.ld-nw{white-space:nowrap}
@media not all and (orientation: landscape) and (min-width: 600px){ .ld-br-wide{display:none} }

/* Distribution centers, highlighted as two tiles */
.ld-centers{width:100%; display:flex; flex-direction:column; align-items:center;
  gap:max(14px, calc(18 * var(--u)))}
.ld-label{color:#e8d9a8; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  font-size:max(0.875rem, calc(12 * var(--u)))}
.ld-cities{width:100%; display:grid; grid-template-columns:1fr; gap:max(10px, calc(10 * var(--u)))}
.ld-city{display:flex; align-items:center; justify-content:center; gap:max(8px, calc(9 * var(--u)));
  background:rgba(255,255,255,0.07); border:1px solid rgba(232,217,168,0.5);
  border-radius:max(12px, calc(12 * var(--u)));
  padding:max(14px, calc(16 * var(--u))) max(10px, calc(10 * var(--u)));
  color:#fff; font-family:Lora,Georgia,serif; font-weight:600;
  font-size:max(1.0625rem, calc(18 * var(--u)))}
.ld-city i{flex-shrink:0; width:max(9px, calc(9 * var(--u))); height:max(9px, calc(9 * var(--u)));
  border-radius:50%; background:#e8d9a8}
.ld-rule{align-self:stretch; margin:0; border:0; height:1px;
  background:rgba(232,217,168,0.45)}

/* Jumps down to the Programs section */
.ld-cta{display:inline-flex; align-items:center; justify-content:center;
  min-height:max(2.75rem, calc(50 * var(--u))); padding:0 max(24px, calc(28 * var(--u)));
  border-radius:max(10px, calc(10 * var(--u))); background:#e8d9a8; color:#1e5631;
  font-weight:700; font-size:max(1rem, calc(16 * var(--u)));
  box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.ld-cta:hover{background:#fff; color:#1e5631}

/* ---------- Shared section parts ---------- */
.ld-inner{width:100%; margin:0 auto; padding:0 max(20px, calc(22 * var(--u)))}
.ld-kicker{font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  font-size:max(0.875rem, calc(12 * var(--u)))}

/* ---------- Nutrition ---------- */
.ld-band{background:#1e5631; color:#fff;
  padding:max(40px, calc(44 * var(--u))) 0}
.ld-band .ld-kicker{color:#e8d9a8}
.ld-band h2{font-weight:600; margin:max(10px, calc(12 * var(--u))) 0; line-height:1.12;
  font-size:max(1.75rem, calc(30 * var(--u)))}
.ld-band p{margin:0; max-width:40em; line-height:1.6; color:rgba(255,255,255,0.86);
  font-size:max(1rem, calc(16 * var(--u)))}

.ld-stats-wrap{padding-top:max(28px, calc(32 * var(--u))); padding-bottom:max(40px, calc(44 * var(--u)))}
.ld-stats-head{margin:0 0 max(12px, calc(14 * var(--u))); font-weight:600; color:var(--ink);
  font-size:max(1.25rem, calc(20 * var(--u)))}
.ld-stats + .ld-stats-head{margin-top:max(28px, calc(32 * var(--u)))}
.ld-stats{display:grid; grid-template-columns:1fr 1fr; gap:max(10px, calc(10 * var(--u)))}
.ld-stats-5 .ld-stat:last-child{grid-column:1 / -1}
.ld-stat{background:var(--bg2); border:1px solid var(--line);
  border-radius:max(12px, calc(14 * var(--u))); padding:max(14px, calc(14 * var(--u))) max(8px, calc(8 * var(--u)));
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.ld-v{font-family:Lora,Georgia,serif; font-weight:600; color:var(--link); line-height:1.1;
  font-size:max(1.5rem, calc(26 * var(--u))); margin-bottom:max(8px, calc(8 * var(--u)))}
.ld-l{font-weight:700; color:var(--ink); line-height:1.3;
  font-size:max(0.875rem, calc(14 * var(--u))); text-wrap:balance}
.ld-footnote{margin:max(18px, calc(20 * var(--u))) 0 0; font-style:italic; color:var(--muted); line-height:1.55;
  font-size:max(1rem, calc(14 * var(--u)))}

/* ---------- Programs ---------- */
.ld-programs{background:var(--soft); padding:max(40px, calc(44 * var(--u))) 0}
.ld-programs-grid{display:grid; grid-template-columns:1fr; gap:max(20px, calc(24 * var(--u)))}
.ld-programs-copy .ld-kicker{color:var(--hayInk)}
.ld-programs-copy h2{font-weight:600; color:var(--link); line-height:1.12;
  margin:max(10px, calc(12 * var(--u))) 0; font-size:max(1.75rem, calc(30 * var(--u)))}
.ld-programs-copy p{margin:0; color:var(--muted); line-height:1.6; font-size:max(1rem, calc(16 * var(--u)))}

/* ---------- Ambassador card ---------- */
.ld-card{background:var(--bg2); color:var(--ink); width:100%; justify-self:center;
  border:1px solid var(--line); border-radius:max(14px, calc(18 * var(--u))); padding:max(16px, calc(16 * var(--u)));
  box-shadow:0 12px 32px rgba(34,48,31,0.12);
  display:flex; flex-direction:column; gap:max(10px, calc(10 * var(--u)))}
.ld-card-kicker{color:var(--hayInk); font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  font-size:max(0.875rem, calc(12 * var(--u)))}
.ld-card h2{font-family:Lora,Georgia,serif; font-weight:600; margin:0; line-height:1.15;
  color:var(--link); font-size:max(1.25rem, calc(20 * var(--u)))}
.ld-card p{margin:0; color:var(--muted); line-height:1.5; font-size:max(1rem, calc(14 * var(--u)))}

.ld-form{display:grid; gap:max(8px, calc(8 * var(--u)))}
.ld-names{display:grid; grid-template-columns:1fr 1fr; gap:max(8px, calc(8 * var(--u)))}
.ld-form label{display:block; min-width:0}
.ld-form input[type="text"], .ld-form input[type="email"]{width:100%;
  height:max(2.75rem, calc(42 * var(--u))); padding:0 max(12px, calc(12 * var(--u)));
  border:1px solid var(--line); border-radius:max(10px, calc(10 * var(--u)));
  background:var(--bg); color:var(--ink); font-family:inherit;
  font-size:max(1rem, calc(14.5 * var(--u)))}
.ld-form input::placeholder{color:#8a927f}
.ld-form input:focus{outline:2px solid #2a6e42; outline-offset:1px}
.ld-form input[aria-invalid="true"]{border-color:#b8412d}

.ld-form .ld-consent{display:flex; align-items:flex-start; gap:max(10px, calc(10 * var(--u)));
  cursor:pointer; color:var(--muted); line-height:1.45;
  font-size:max(0.875rem, calc(13 * var(--u)))}
.ld-consent input{flex-shrink:0; margin:0.1em 0 0; accent-color:#1e5631;
  width:max(1.25rem, calc(18 * var(--u))); height:max(1.25rem, calc(18 * var(--u)))}

/* Honeypot: invisible to people, tempting to bots */
.ld-trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.ld-submit{height:max(2.75rem, calc(44 * var(--u))); border:none; cursor:pointer;
  border-radius:max(10px, calc(10 * var(--u))); background:var(--green); color:#f3f0e4;
  font-family:inherit; font-weight:700; font-size:max(1rem, calc(14.5 * var(--u)))}
.ld-submit:hover{background:var(--greenH)}
.ld-submit:disabled{opacity:0.7; cursor:progress}
.ld-error{color:#b8412d; font-size:max(0.875rem, calc(13 * var(--u)))}
:root[data-theme="dark"] .ld-error{color:#f0907c}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ld-error{color:#f0907c} }
.ld-error:empty{display:none}

/* ---------- Success toast: holds 3s, fades out over 2s ---------- */
.ld-toast{position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:100;
  width:max-content; max-width:min(90vw, max(24rem, calc(420 * var(--u))));
  background:#1e5631; color:#fff; text-align:center; line-height:1.4; overflow-wrap:anywhere;
  display:flex; flex-direction:column; gap:max(6px, calc(8 * var(--u)));
  font-size:max(1rem, calc(15 * var(--u)));
  padding:max(16px, calc(18 * var(--u))) max(20px, calc(24 * var(--u)));
  border-radius:max(12px, calc(14 * var(--u))); box-shadow:0 20px 50px rgba(0,0,0,0.4);
  pointer-events:none; animation:ld-toast 5s linear forwards}
.ld-toast-title{font-family:Lora,Georgia,serif; font-weight:600;
  font-size:max(1.375rem, calc(24 * var(--u))); margin-bottom:max(2px, calc(4 * var(--u)))}
.ld-toast-email{color:#e8d9a8; font-weight:600}
@keyframes ld-toast{ 0%, 60%{opacity:1} 100%{opacity:0} }

/* ---------- Footer ---------- */
.ld-footer{background:#182615; color:rgba(255,255,255,0.8);
  padding:max(32px, calc(36 * var(--u))) 0 max(20px, calc(24 * var(--u)));
  font-size:max(1rem, calc(15 * var(--u))); line-height:1.6}
.ld-footer-grid{display:grid; grid-template-columns:1fr; justify-items:center; text-align:center;
  gap:max(22px, calc(24 * var(--u)))}
.ld-footer-col{display:flex; flex-direction:column; align-items:center}
.ld-footer-cities{display:flex; flex-direction:column; align-items:center; color:#fff;
  gap:max(8px, calc(10 * var(--u)))}
.ld-footer-label{color:#e8d9a8; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  font-size:max(0.875rem, calc(12 * var(--u))); margin-bottom:max(4px, calc(6 * var(--u)))}
.ld-footer-copy{text-align:center; color:rgba(255,255,255,0.6);
  font-size:max(0.875rem, calc(13 * var(--u)));
  margin-top:max(24px, calc(28 * var(--u))); padding-top:max(16px, calc(18 * var(--u)));
  border-top:1px solid rgba(255,255,255,0.12)}

/* ---------- Landscape: headline left, centers right, CTA centred below ---------- */
@media (orientation: landscape) and (min-width: 600px){
  .ld-header{padding:max(8px, calc(8 * var(--u))) max(16px, calc(40 * var(--u)))}
  .ld-menu-btn{display:none}
  .ld-nav{display:flex; position:static; flex-direction:row; align-items:center;
    background:none; border:0; box-shadow:none; padding:0; gap:max(4px, calc(8 * var(--u)))}
  .ld-nav a{border:0; min-height:max(2.75rem, calc(40 * var(--u)));
    padding:0 max(10px, calc(14 * var(--u))); font-size:max(1rem, calc(16 * var(--u)))}

  .ld-hero{align-items:center; padding:max(24px, calc(40 * var(--u))) max(20px, calc(56 * var(--u)))}
  .ld-shade{background:linear-gradient(90deg, rgba(20,32,18,0.88) 0%, rgba(20,32,18,0.62) 60%, rgba(20,32,18,0.5) 100%)}
  .ld-grid{grid-template-columns:3fr 2fr; align-content:center; align-items:center;
    max-width:calc(1160 * var(--u));
    gap:max(28px, calc(56 * var(--u))) max(24px, calc(64 * var(--u)))}
  .ld-copy{text-align:left; justify-self:start}
  .ld-copy h1{font-size:max(1.75rem, calc(44 * var(--u)))}
  .ld-centers{align-items:flex-start; justify-self:end; max-width:max(16rem, calc(440 * var(--u)));
    gap:max(12px, calc(14 * var(--u)))}
  .ld-label{font-size:max(0.875rem, calc(14 * var(--u)))}
  .ld-cities{grid-template-columns:1fr; gap:max(12px, calc(14 * var(--u)))}
  .ld-city{justify-content:flex-start; gap:max(12px, calc(14 * var(--u)));
    padding:max(14px, calc(22 * var(--u))) max(18px, calc(26 * var(--u)));
    font-size:max(1.25rem, calc(30 * var(--u)))}
  .ld-city i{width:max(10px, calc(12 * var(--u))); height:max(10px, calc(12 * var(--u)))}
  .ld-cta{grid-column:1 / -1; font-size:max(1rem, calc(18 * var(--u)));
    min-height:max(2.75rem, calc(56 * var(--u))); padding:0 max(28px, calc(40 * var(--u)))}
  .ld-br{display:none}
  .ld-rule{display:none}

  .ld-inner{max-width:calc(1160 * var(--u) + 2 * max(20px, calc(56 * var(--u))));
    padding:0 max(20px, calc(56 * var(--u)))}
  .ld-kicker{font-size:max(0.875rem, calc(14 * var(--u)))}
  .ld-band{padding:max(48px, calc(80 * var(--u))) 0}
  .ld-band h2{font-size:max(2rem, calc(56 * var(--u))); margin:max(12px, calc(18 * var(--u))) 0}
  .ld-band p{font-size:max(1.0625rem, calc(19 * var(--u)))}
  .ld-stats-wrap{padding-top:max(36px, calc(64 * var(--u))); padding-bottom:max(48px, calc(80 * var(--u)))}
  .ld-stats-head{font-size:max(1.25rem, calc(26 * var(--u))); margin-bottom:max(14px, calc(20 * var(--u)))}
  .ld-stats + .ld-stats-head{margin-top:max(32px, calc(48 * var(--u)))}
  .ld-stats{gap:max(12px, calc(18 * var(--u)))}
  .ld-stats-5{grid-template-columns:repeat(5, 1fr)}
  .ld-stats-4{grid-template-columns:repeat(4, 1fr)}
  .ld-stats-5 .ld-stat:last-child{grid-column:auto}
  .ld-stat{padding:max(16px, calc(26 * var(--u))) max(10px, calc(12 * var(--u)))}
  .ld-v{font-size:max(1.5rem, calc(40 * var(--u))); margin-bottom:max(8px, calc(14 * var(--u)))}
  .ld-l{font-size:max(1rem, calc(16 * var(--u)))}
  .ld-footnote{font-size:max(1rem, calc(16 * var(--u))); margin-top:max(18px, calc(28 * var(--u)))}

  .ld-footer{padding:max(36px, calc(56 * var(--u))) 0 max(20px, calc(28 * var(--u)));
    font-size:max(1rem, calc(16 * var(--u)))}
  .ld-footer-grid{grid-template-columns:auto auto; justify-content:space-between; align-items:center; text-align:left;
    gap:max(24px, calc(64 * var(--u)))}
  .ld-footer-col{align-items:flex-end}
  .ld-footer-cities{flex-direction:row; gap:max(32px, calc(72 * var(--u)))}
  .ld-footer-label{font-size:max(0.875rem, calc(13 * var(--u)))}
  .ld-footer-copy{text-align:left; font-size:max(0.875rem, calc(14 * var(--u)))}

  .ld-programs{padding:max(48px, calc(96 * var(--u))) 0}
  .ld-programs-grid{grid-template-columns:1fr 1fr; align-items:center; gap:max(24px, calc(64 * var(--u)))}
  .ld-programs-copy h2{white-space:nowrap; font-size:max(2rem, calc(50 * var(--u))); margin:max(12px, calc(18 * var(--u))) 0}
  .ld-programs-copy p{font-size:max(1.0625rem, calc(19 * var(--u))); max-width:28em}
  .ld-card{justify-self:end; max-width:max(20rem, calc(440 * var(--u)));
    padding:max(16px, calc(30 * var(--u)))}
  .ld-card h2{font-size:max(1.25rem, calc(28 * var(--u)))}
}

/* Short landscape (phones held sideways): let the page scroll, never squeeze */
@media (orientation: landscape) and (min-width: 600px) and (max-height: 500px){
  .ld-hero{padding-top:16px; padding-bottom:16px}
  .ld-form{gap:8px}
  .ld-card{gap:8px}
}