/* ============================================================================
   DESIGN PASS
   ----------------------------------------------------------------------------
   Visual only. No copy, data or honesty label is touched here; every rule
   below restyles something that already exists. Loaded after each page's
   inline <style>, so it wins the cascade without !important.
   ========================================================================= */

/* --- headings: the copy-link button no longer takes a line of its own ------
   initAnchors() appends it after the masked lines, which are display:block,
   so it wrapped onto a fresh ~1.1em line and opened a dead gap under every
   section heading. It now hangs in the gutter instead. */
h2, h3 { position:relative; }
h2 > .anchor-link, h3 > .anchor-link { position:absolute; top:0.12em; left:-1.75em; margin:0; }
@media (max-width:1180px) {
  h2 > .anchor-link, h3 > .anchor-link { left:auto; right:0; }
  h2.hd { padding-right:1.4em; }
}

/* --- nav: frosted on scroll, active-section underline --------------------- */
nav.bar { background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:opacity 200ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
nav.bar.on { background:var(--nav-bg); border-bottom-color:transparent;
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 10px 30px -24px var(--paper-shadow); }
nav.bar .links a { background-size:0% 2px; background-position:0 calc(100% + 1px); }
nav.bar .links a:hover, nav.bar .links a:focus-visible { background-size:100% 2px; }
/* initSectionHighlight() sets aria-current="true" on the link whose section
   is in view; it gets a brand underline that stays put. */
nav.bar .links a[aria-current="true"],
nav.bar .links a[aria-current="true"]:hover { color:var(--brand); box-shadow:none;
  background-image:linear-gradient(var(--accent), var(--accent)); background-size:100% 2px; }
@media (max-width:800px) {
  /* The link row was 377px wide on a 390px phone and pushed the page sideways.
     The in-page links are one tap away in the page itself; the CTA stays. */
  nav.bar .links a:not(.cta):not(.login) { display:none; }
  nav.bar .links { gap:6px; }
  #themeToggle .theme-name { display:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  nav.bar.on { background:var(--bg); }
}

/* --- hero: full-bleed wash, bigger and tighter headline, status pill ------ */
#heropin { position:relative; background:
  radial-gradient(120% 90% at 85% 40%, var(--tint) 0%, transparent 62%),
  linear-gradient(to bottom, transparent 70%, var(--bg)); }
.hero-h1 { font-size:clamp(36px,4.4vw,64px); line-height:1.03; letter-spacing:-0.035em; max-width:18ch; }
/* Brand orange. --accent-text is the AA-safe shade of #E8871E on the light
   grounds (and #E8871E's own dark-mode sibling elsewhere), so the line stays
   orange without failing contrast in any theme. */
.hero-h1 em { font-style:italic; color:var(--accent-text); margin-top:0.18em; letter-spacing:-0.03em; }
.prelaunch { background:none; border-left:none; border-radius:0; padding:0; margin:28px 0 0; }
.prelaunch-tag { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:6px 12px 6px 10px;
  border:1px solid var(--brand-line-mid); border-radius:999px; background:var(--surface);
  font-family:'DM Mono',ui-monospace,Menlo,monospace; font-weight:500; font-size:11.5px; letter-spacing:0.08em;
  color:var(--brand); box-shadow:0 1px 0 var(--line-soft); }
.prelaunch-tag::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 var(--accent); animation:statusPulse 2.2s ease-out infinite; flex:none; }
@keyframes statusPulse { 0% { box-shadow:0 0 0 0 rgba(232,135,30,0.55); } 70% { box-shadow:0 0 0 7px rgba(232,135,30,0); } 100% { box-shadow:0 0 0 0 rgba(232,135,30,0); } }
.prelaunch-line { font-size:clamp(18px,1.7vw,21px); }
.prelaunch-sub { max-width:52ch; }
@media (prefers-reduced-motion: reduce) { .prelaunch-tag::before { animation:none !important; } }
/* The hero status is a full sentence, so it sets in sentence case rather
   than the tag's caps, and softens its corners if it has to wrap. */
#heroStatus { max-width:none; }
#heroStatus .prelaunch-tag { text-transform:none; letter-spacing:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-weight:500; font-size:13.5px; line-height:1.4; margin:0; }
@media (max-width:520px) { #heroStatus .prelaunch-tag { border-radius:14px; align-items:flex-start; } #heroStatus .prelaunch-tag::before { margin-top:5px; } }

/* --- statband: the 4% is the number to remember -------------------------- */
.statband .grid { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  grid-template-areas:"pct meals" "pct ready"; gap:16px; padding:40px 0 20px; }
.statband .cell { border-radius:12px; }
.statband .cell:nth-child(1) { grid-area:meals; }
.statband .cell:nth-child(2) { grid-area:pct; display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px 32px 30px; border-color:var(--accent); background:
  linear-gradient(160deg, var(--surface) 55%, color-mix(in srgb, var(--accent) 10%, var(--surface))); }
.statband .cell:nth-child(3) { grid-area:ready; }
.statband #statPct { font-size:clamp(96px,14vw,188px); line-height:0.86; letter-spacing:-0.06em; color:var(--accent-text); font-weight:800; }
.statband .cell:nth-child(2) .cap { font-size:clamp(16px,1.6vw,20px); color:var(--text); font-weight:500; max-width:24ch; margin-top:14px; }
.statband #statMeals { font-size:clamp(48px,5.6vw,80px); line-height:0.95; letter-spacing:-0.045em; }
.statband .cell:nth-child(1) { display:flex; flex-direction:column; justify-content:center; }
.statband .cell:nth-child(1) .cap { font-size:clamp(15px,1.3vw,17px); margin-top:12px; }
/* Partner schools: the same size as the meals figure beside it. */
.statband #statSchools { font-size:clamp(48px,5.6vw,80px); line-height:0.95; letter-spacing:-0.045em; color:var(--brand); }
.statband .cell:nth-child(3) { display:flex; flex-direction:column; justify-content:center; }
.statband .cell:nth-child(3) .cap { font-size:clamp(15px,1.3vw,17px); margin-top:12px; }
@media (max-width:700px) {
  .statband .grid { grid-template-columns:minmax(0,1fr); grid-template-areas:"pct" "meals" "ready"; }
}

/* --- instrument band: #sensors + #boxpin + #tracker ----------------------
   The thesis section reads as lab equipment: graph paper behind it, DM Mono
   labels, panels framed like instrument faces. It takes every colour from
   the active theme (light, dark or stock), so it switches with the rest of
   the page instead of staying a fixed dark panel. The grid, glows and tints
   are mixed from --brand and --accent, never hard-coded. */
.instrument {
  --grid-minor:color-mix(in srgb, var(--brand) 6%, transparent);
  --grid-major:color-mix(in srgb, var(--brand) 11%, transparent);
  position:relative; isolation:isolate; color:var(--text); }
/* The graph paper fades in and out at the band's top and bottom, so the page
   flows into and out of it with no edge or rule. */
.instrument::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(70% 50% at 50% 50%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 75%),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size:100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position:0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
@media (prefers-contrast: more) {
  .instrument { --grid-minor:transparent; }
}
.instrument .box-band, .instrument #tracker { background:transparent; border:none; }
/* Instrument labels: mono caps with a status LED, like a panel legend. */
.instrument .eyebrow { display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Mono',ui-monospace,Menlo,monospace; font-weight:500; font-size:12px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--brand); }
.instrument .eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent), 0 0 10px color-mix(in srgb, var(--brand) 60%, transparent); flex:none; }
.instrument .unverified { color:var(--accent-text); }
/* Panels read as instrument faces: one hairline frame and inset glass. */
.instrument .cold-panel, .instrument .manifest {
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, transparent), transparent 40%), var(--surface);
  border:1px solid var(--brand-line); border-radius:12px;
  box-shadow:0 20px 50px -30px var(--paper-shadow); }
.instrument .cold-panel { position:relative; }
.instrument .manifest { overflow:hidden; }
.instrument .mhead { background:color-mix(in srgb, var(--brand) 5%, transparent); }
.instrument .thead { background:var(--surface); }
.instrument .mrow:hover { background:color-mix(in srgb, var(--brand) 6%, transparent); }
/* The threshold is the one line that matters on the chart, so it glows. */
.instrument .cs-threshold { stroke:var(--accent); stroke-width:1.5; stroke-dasharray:4 4; opacity:1;
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent)); }
.instrument .cs-threshold-lbl { fill:var(--accent-text); opacity:1; letter-spacing:0.06em; }
.instrument .cs-line { filter:drop-shadow(0 0 3px color-mix(in srgb, var(--brand) 35%, transparent)); }
.instrument .cs-xlabel { letter-spacing:0.04em; }
.instrument .sim-btn { background:transparent; }
.instrument .sim-btn.is-on { background:var(--brand); color:var(--on-brand); }
.instrument .sim-banner { background:color-mix(in srgb, var(--accent) 6%, transparent); }
.instrument .btn-sm { background:transparent; }
.instrument .step-icon { color:var(--brand); }
@media print { .instrument { background:none !important; color:#000; box-shadow:none; } }

/* --- cards: one radius, one lift ---------------------------------------- */
.cards-grid .card, .done-card, .site-row, .statband .cell, .map-shell, .sim-banner { border-radius:12px; }
.cards-grid .card, .site-row { transition:transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease, border-color 160ms ease, background-color 160ms ease; }
.cards-grid .card:hover, .site-row:hover { transform:translateY(-2px);
  box-shadow:0 10px 28px -14px var(--paper-shadow), 0 2px 6px -2px var(--line); }
#team .card { border-top:3px solid var(--brand); padding-top:24px; }
#team .card .name { font-size:20px; }
@media (max-width:640px) {
  /* The memo card spanned two 260px tracks and forced a 428px card onto a
     390px screen. */
  .cards-grid .card[style*="span 2"] { grid-column:auto !important; }
}

/* --- school list: status pills ------------------------------------------ */
/* A later rule set .site-row { padding:14px 0 }, which zeroed the side
   padding and left every school name touching its card edge. */
.site-row { padding:16px 16px 14px; }
.site-row:hover { background:var(--surface); border-color:var(--brand-line-mid); }
.site-row .status { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px 4px 8px;
  font-size:10px; letter-spacing:0.06em; border:1.5px solid transparent; }
.site-row .status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
/* Delivering (and the older "setup"/"operating"): green outline. */
.site-row .status.s-active, .site-row .status.s-setup, .site-row .status.s-operating { color:var(--brand); background:transparent; border-color:var(--brand); }
/* In conversation: orange. */
.site-row .status.s-conversation { color:var(--accent-text); background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
/* Target: gray. */
.site-row .status.s-target { color:var(--text-secondary); background:var(--line-soft); border:1.5px solid var(--line); }
/* Map pins wear the same three colours. */
.pin-dot.pin-active, .pin-dot.pin-setup, .pin-dot.pin-operating { border-radius:50%; background:var(--surface); border:3.5px solid var(--brand); box-shadow:0 0 0 1.5px var(--surface); background-image:none; }
.pin-dot.pin-conversation { border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--accent); background-image:none; }
.pin-dot.pin-target { border-radius:50%; background:var(--line); border:2px solid var(--text-secondary); opacity:0.9; }
.pin-cluster-live { background:var(--surface); border-color:var(--brand); }
.pin-cluster-live b { color:var(--brand); }
.pin-cluster-live .pin-cluster-lbl { color:var(--text-secondary); }
/* Status key in the map legend, built by map.js from SITE_STATUS. */
.map-legend-card .lg-sep { height:1px; background:var(--line); margin:4px 0 2px; }
.map-legend-card .lg-pin { position:relative; width:12px; height:12px; display:inline-block; flex:none; }
.map-legend-card .lg-pin .pin-dot { box-shadow:none; }
.map-legend-card .lg-pin .pin-dot.pin-active, .map-legend-card .lg-pin .pin-dot.pin-setup, .map-legend-card .lg-pin .pin-dot.pin-operating { border-width:3px; }
/* Community fridge: a small filled square, so it never reads as a school. */
.pin-dot.pin-fridge { border-radius:3px; background:var(--brand); border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--brand); }
.pin-dot.pin-fridge::after { content:""; position:absolute; left:2px; right:2px; top:40%; height:1.5px; background:var(--surface); border-radius:1px; }
/* The story on Play: pins not yet in it are dimmed, the one it's about is
   lifted, with its label shown even where labels would otherwise clash. */
.pin-wrap, .pin-dim .pin-wrap { transition:opacity 400ms ease, transform 400ms cubic-bezier(0.22,1,0.36,1); }
.pin-dim .pin-wrap { opacity:0.28; }
.pin-focus .pin-wrap { transform:scale(1.35); }
.pin-focus { z-index:1000 !important; }
.pin-focus.pin-muted .pin-text { opacity:1; }
/* Real routes: a dotted line with the dots flowing from school to fridge. */
.route-line.route-animate { animation:routeFlow 0.9s linear infinite; }
@keyframes routeFlow { to { stroke-dashoffset:-20; } }
/* OpenStreetMap's tiles are colourful; greyed (and inverted in the dark
   themes) they sit quietly under the data like the old CARTO ones did. */
#networkMap .leaflet-tile-pane { filter:grayscale(1) contrast(0.9) brightness(1.06); opacity:0.85; }
:root[data-theme="dark"] #networkMap .leaflet-tile-pane,
:root[data-theme="stock"] #networkMap .leaflet-tile-pane { filter:grayscale(1) invert(1) brightness(0.78) contrast(0.9); opacity:0.8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #networkMap .leaflet-tile-pane { filter:grayscale(1) invert(1) brightness(0.78) contrast(0.9); opacity:0.8; }
}

/* --- join form: two columns that can actually shrink --------------------- */
form.join { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
form.join input, form.join select, form.join textarea { width:100%; min-width:0; }
@media (max-width:520px) { form.join { grid-template-columns:minmax(0,1fr); } form.join .span2, form.join button { grid-column:auto; } }

/* --- manifest on phones: scroll the table, not the page ------------------- */
@media (max-width:640px) {
  .manifest { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .manifest .thead, .manifest .mrow { min-width:560px; }
  .manifest #mempty, .manifest .manifest-foot, .manifest .mhead { position:sticky; left:0; max-width:calc(100vw - 50px); }
  .manifest .thead { position:relative; top:auto; }
}

/* --- footer + small sections --------------------------------------------- */
/* One continuous surface: the footer shares the page background and is set
   apart by space, not by a rule or a colour change. */
footer { background:transparent; border-top:none; }
footer .wrap.top { padding-top:56px; }
.sources-list li { padding-left:2.2em; text-indent:-2.2em; }

/* --- nav always visible, with a Sign in button --------------------------
   The nav used to stay invisible until you scrolled 100px, which would hide
   the Sign in button at the top of the page. It now shows from the start:
   transparent at the top, frosted once you scroll (.on, from initNav). */
   nav.bar { opacity:1; pointer-events:auto; }
   nav.bar .links a.login { padding:6px 14px; border:1.5px solid var(--brand-line-mid); border-radius:999px;
     background-image:none; font-weight:600; color:var(--brand); transition:border-color 160ms ease, background-color 160ms ease; }
   nav.bar .links a.login:hover, nav.bar .links a.login:focus-visible { border-color:var(--brand); background-color:var(--surface); }
   @media (max-width:800px) { nav.bar .links a.login { display:inline-block; padding:5px 11px; font-size:13px; } }

/* ============================================================================
   PHONES — a calmer, less cluttered layout
   ----------------------------------------------------------------------------
   Every rule below sits inside a phone-width media query, so the desktop
   layout is untouched. This file loads last, which is why the home page's
   phone rules live here too: at equal specificity they must come after the
   desktop rules above (and after assets/mainpage.css) to win.
   ========================================================================= */
/* Menu bar on one line: the logo, Sign in, the theme switch and the menu.
   "Work with us" moves into the menu too; the hero button and the join
   section both carry it. */
@media (max-width:800px) {
  nav.bar a.brand { white-space:nowrap; }
  nav.bar .links a.cta { display:none; }
  nav.bar .links { gap:4px; }
  nav.bar .links a.login { white-space:nowrap; }
  #themeToggle { width:40px; height:40px; }
}
@media (max-width:700px) {

  /* Type sized for a phone, not a monitor: 20px body copy and 30px headings
     made every paragraph a wall and orphaned words in two-line headings. */
  .body-p { font-size:17px; line-height:1.6; }
  h2.hd { font-size:27px; line-height:1.12; text-wrap:balance; }
  /* Headings are written as two fixed lines for desktop; on a phone the first
     line can't fit, which left one word stranded on a line of its own. Here
     they flow as one sentence and balance, so no line ends up a lone word. */
  h2.hd .mask-l, h2.hd .mask-l > span { display:inline; }
  footer .wrap.top { padding-top:40px; }

  /* Home hero (#heropin exists only there; other pages also use #top for
     their header): fits one screen, so the pinned lid-and-fruit scroll plays
     with the whole hero in view instead of scrolling past empty space. */
  #heropin #top { min-height:100svh !important; }
  .hero-grid { padding-top:56px; padding-bottom:16px; gap:20px; }
  .hero-grid > .visual { max-width:150px; }
  .hero-h1 { font-size:31px; line-height:1.08; max-width:none; }
  .hero-h1 em { margin-top:0.12em; }
  #heroStatus { margin-top:18px; }
  #heropin #top .btn { flex:1 1 0; min-width:0; text-align:center; font-size:16px; padding:12px 14px; }

  .emblems { padding:8px 0 24px; }

  /* Stats: snugger cards. */
  .statband .grid { padding:24px 0 12px; gap:12px; }
  .statband .cell:nth-child(2) { padding:22px 20px 24px; }

  /* Food safety: a smaller mascot keeps the panel from towering. */
  .cold-mascot { width:130px; }
  .cold-mascot.is-3d { height:118px; }

  /* Learn-more cards and the join form. */
  .cards-grid .card { padding:20px; }
  .cards-grid .card p.body { font-size:16px; }
  .learn-grid { gap:12px; }

  /* Map: the floating legend covered half the map on a phone. Here it is a
     thin strip across the top, and the caption underneath is quieter. */
  .map-shell .map-legend-card { left:8px; right:8px; top:8px; bottom:auto; max-width:none;
    display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; padding:6px 10px; }
  .map-shell .map-legend-card .lg-title { font-size:9px; }
  .map-shell .map-legend-card .lg-item { font-size:10px; }
  .map-shell .map-legend-card .lg-sep { display:none; }
  .map-shell .map-legend-card .lg-sw { width:10px; height:10px; }
  .hud-caption { font-size:12px; }
  .hud-stat b { font-size:16px; }

  /* School emblems a size down, so more of the strip shows at once. */
  .emblem { min-width:104px; min-height:90px; }
  .emblem-mark { width:64px; height:64px; }
  .emblem.wide .emblem-mark { width:112px; }
  .emblem-track.is-moving .emblem { margin-right:36px; }

  /* Form fields at 16px: below that, iPhones zoom the whole page in when a
     field is tapped. Covers the join form and the member portal's forms. */
  form.join input, form.join select, form.join textarea { font-size:16px; }
  body .portal input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  body .portal select, body .portal textarea { font-size:16px; }
}

/* Short phones (iPhone SE and similar): a more compact hero so it still fits
   one screen. */
@media (max-width:700px) and (max-height:780px) {
  .hero-grid { padding-top:52px; gap:12px; }
  .hero-grid > .visual { max-width:112px; }
  .hero-h1 { font-size:26px; }
  #heropin #top .body-p { font-size:15.5px; line-height:1.5; }
  #heropin #top .eyebrow { margin-bottom:8px; font-size:13px; }
  #heroStatus { margin-top:12px; }
  #heropin #top .btn { padding:10px 12px; }
}

/* --- live impact counter (home hero) ---------------------------------------
   The first thing on the page: pounds of food waste eliminated, read live
   from the public delivery log. Desktop: a card above the box mascot, in the
   hero's right column. Phones: the box and the number side by side above
   the headline, with no card. --live is a brighter green than --brand, used
   only for "this is live" signals. */
:root { --live:#1E9E50; }
:root[data-theme="dark"] { --live:#5CD58C; }
:root[data-theme="stock"] { --live:#86E3A6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="stock"]) { --live:#5CD58C; } }

.hero-grid { grid-template-areas:"text impact" "text visual"; row-gap:0; }
.hero-grid > .hero-text { grid-area:text; }
.hero-grid > .impact { grid-area:impact; align-self:end; }
.hero-grid > .visual { grid-area:visual; align-self:start; }

.impact { justify-self:center; width:100%; max-width:400px; box-sizing:border-box; text-align:center; padding:20px 24px 18px;
  background:color-mix(in srgb, var(--surface) 84%, transparent); border:1px solid var(--brand-line); border-radius:20px;
  box-shadow:0 1px 2px var(--line-soft), 0 24px 48px -30px var(--paper-shadow);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 200ms both; }
.impact-live { display:inline-flex; align-items:center; gap:8px; margin:0; color:var(--live);
  font-family:'DM Mono',ui-monospace,Menlo,monospace; font-weight:500; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; }
.live-dot { position:relative; width:8px; height:8px; border-radius:50%; background:var(--live); flex:none; }
.live-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--live); animation:livePing 1.8s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes livePing { 0% { transform:scale(1); opacity:0.65; } 80%, 100% { transform:scale(2.8); opacity:0; } }
.impact[data-state="connecting"] .live-dot::after, .impact[data-state="offline"] .live-dot::after { animation:none; opacity:0; }
.impact[data-state="connecting"] .impact-live { opacity:0.7; }
.impact[data-state="offline"] .impact-live { color:var(--text-secondary); }
.impact[data-state="offline"] .live-dot { background:var(--text-secondary); }

.impact-fig { margin:8px 0 0; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:800;
  line-height:0.95; letter-spacing:-0.05em; color:var(--brand); font-variant-numeric:tabular-nums; white-space:nowrap; }
.impact-num { font-size:clamp(72px,8vw,124px); }
.impact.is-long .impact-num { font-size:clamp(52px,5.4vw,84px); }
.impact-unit { font-size:clamp(30px,3vw,46px); letter-spacing:-0.03em; }
.impact.is-bump .impact-num { animation:impactBump 1.2s ease-out; }
@keyframes impactBump { 0% { color:var(--live); } 100% { color:var(--brand); } }
.impact-label { margin:6px 0 0; font-size:clamp(18px,1.6vw,21px); font-weight:700; letter-spacing:-0.02em; line-height:1.2; color:var(--text); }
.impact-meta { margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-secondary); }
.impact-meta #impactCount { font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.impact-link { display:inline-block; margin-top:10px; font-size:14px; font-weight:600; color:var(--brand); }
.impact-link:hover { text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion: reduce) { .live-dot::after, .impact.is-bump .impact-num, .impact { animation:none !important; } }

/* The hero status pill turns green now that deliveries are running. */
#heroStatus.is-live .prelaunch-tag::before { background:var(--live); animation:livePulse 2.2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 70%, 100% { box-shadow:0 0 0 7px color-mix(in srgb, var(--live) 0%, transparent); } }

@media (max-width:760px) {
  .hero-grid { grid-template-columns:104px minmax(0,1fr); grid-template-areas:"visual impact" "text text"; column-gap:16px; row-gap:22px; align-items:center; }
  .hero-grid > .visual { order:0; max-width:none; margin:0; align-self:center; }
  .hero-grid > .impact { align-self:center; }
  .impact { justify-self:stretch; max-width:none; text-align:left; padding:0; background:none; border:none; border-radius:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; }
  .impact-live { font-size:10.5px; gap:7px; }
  .impact-fig { margin-top:4px; }
  .impact-num { font-size:54px; }
  .impact.is-long .impact-num { font-size:44px; }
  .impact-unit { font-size:24px; }
  .impact-label { font-size:16px; margin-top:4px; }
  .impact-meta { font-size:12.5px; margin-top:5px; line-height:1.4; }
  .impact-link { display:none; }
}
@media (max-width:700px) and (max-height:780px) {
  .hero-grid { grid-template-columns:88px minmax(0,1fr); row-gap:16px; }
  .impact-num { font-size:46px; }
  .impact-label { font-size:15px; }
}

/* ============================================================================
   Home page sections
   Every section below the hero opens the same way: a centred title in brand
   green with a short orange rule under it, then one or two plain sentences.
   Spacing between sections is the same everywhere (.sec): each section pads
   64px above and below, so two in a row sit 128px apart.
   ============================================================================ */
.sec { padding:64px 0; }
.sec-head { max-width:780px; margin:0 auto 56px; text-align:center; }
.sec-title { margin:0; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:800;
  font-size:clamp(36px,4.6vw,56px); line-height:1.04; letter-spacing:-0.04em; color:var(--brand); text-wrap:balance; }
.sec-title::after { content:""; display:block; width:44px; height:4px; border-radius:2px; background:var(--accent); margin:20px auto 0; }
/* Shrink-wrapped, so the copy-link button hangs just right of the words
   rather than at the far edge of the page. */
.sec-title { display:table; margin-left:auto; margin-right:auto; }
h2.sec-title > .anchor-link { left:auto; right:-1.6em; top:0.2em; }
.sec-lede { margin:20px auto 0; max-width:60ch; font-size:clamp(17px,1.45vw,19px); line-height:1.6; color:var(--text-secondary); text-wrap:pretty; }
.sec-note { margin:-24px auto 28px; max-width:66ch; text-align:center; font-size:14.5px; line-height:1.6; color:var(--text-secondary); }
.sec-more { margin:32px 0 0; text-align:center; }
.sec-more .doc-toggle { display:inline-flex; }
/* Food safety keeps its framed instrument panel but drops the graph paper,
   so it sits on the same background as every other section. */
.instrument.is-plain::before { display:none; }
.instrument.is-plain .cold-panel { margin-top:0; }

/* --- Our Impact ---------------------------------------------------------- */
.metrics { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 24px; }
.metric { display:flex; flex-direction:column; align-items:center; text-align:center; }
.metric-ico { display:block; width:clamp(108px,11vw,148px); aspect-ratio:1; }
.metric-ico svg { display:block; width:100%; height:100%; overflow:visible; }
.metric-num { margin:18px 0 0; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:800;
  font-size:clamp(40px,4.4vw,58px); line-height:1; letter-spacing:-0.04em; color:var(--brand); font-variant-numeric:tabular-nums; white-space:nowrap; }
.metric-label { margin:12px 0 0; max-width:17ch; font-size:clamp(15px,1.3vw,17px); line-height:1.4; font-weight:600; color:var(--text); }
.metrics-live { margin:40px auto 0; max-width:60ch; text-align:center; font-size:13.5px; line-height:1.5; color:var(--text-secondary); }
.metrics-live .live-dot { display:inline-block; vertical-align:middle; margin:-2px 8px 0 0; }
.metrics-live a { color:var(--brand); font-weight:600; }
.metrics-live[data-state="connecting"] .live-dot::after, .metrics-live[data-state="offline"] .live-dot::after { animation:none; opacity:0; }
.metrics-live[data-state="offline"] .live-dot { background:var(--text-secondary); }

/* The icons: line drawings in brand green on a soft green disc, with orange
   and fruit colours as accents. Every colour is a theme token except the
   fruit, so they switch with light, dark and stock. */
.mi-line { fill:none; stroke:var(--brand); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.mi-blob { fill:color-mix(in srgb, var(--brand) 18%, var(--tint)); }
.mi-fill { fill:var(--surface); }
.mi-soft, .mi-win { fill:color-mix(in srgb, var(--brand) 28%, var(--surface)); }
.mi-accent { fill:var(--accent); }
.mi-flag { fill:var(--accent); stroke:var(--brand); stroke-width:2.6; stroke-linejoin:round; }
.mi-side { fill:var(--box-side); }
.mi-body { fill:var(--mascot-fill); }
.mi-smile { fill:none; stroke:var(--accent); stroke-width:3.6; stroke-linecap:round; }
.mi-badge circle { fill:var(--brand); }
.mi-tick { fill:none; stroke:var(--on-brand); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; }
.mi-leaf { fill:var(--brand); }
.mi-applebody { fill:#D9534F; }
.mi-banana { fill:#F2C14E; stroke-width:2.6; }
.mi-plate { fill:var(--brand); }
.mi-needle { stroke:var(--accent); stroke-width:3.4; stroke-linecap:round; }

/* One short animation per icon, once, when the row first scrolls into view
   (mainpage.js adds .is-in): the flag waves, a volunteer waves, the box
   hops and gets its check, the food drops onto the scale. */
.mi-flag { transform-box:fill-box; transform-origin:left center; }
.mi-arm, .mi-hand { transform-box:view-box; transform-origin:73px 76px; }
.mi-badge { transform-box:view-box; transform-origin:90px 38px; }
.mi-needle { transform-box:view-box; transform-origin:60px 81px; transform:rotate(38deg); }
.metrics.is-in .mi-flag { animation:miFlag 1.4s ease-in-out 250ms 2; }
.metrics.is-in .mi-p1 { animation:miBob 700ms ease-out 350ms; }
.metrics.is-in .mi-p3 { animation:miBob 700ms ease-out 500ms; }
.metrics.is-in .mi-arm, .metrics.is-in .mi-hand { animation:miWave 1.2s ease-in-out 450ms 2; }
.metrics.is-in .mi-crate { animation:miHop 800ms cubic-bezier(0.3,1.5,0.5,1) 600ms; }
.metrics.is-in .mi-badge { animation:miPop 600ms cubic-bezier(0.3,1.6,0.5,1) 1000ms both; }
.metrics.is-in .mi-tick { animation:miTick 450ms ease-out 1350ms both; }
.metrics.is-in .mi-food { animation:miDrop 900ms cubic-bezier(0.3,1.4,0.5,1) 750ms both; }
.metrics.is-in .mi-needle { animation:miNeedle 1.1s cubic-bezier(0.3,1.4,0.5,1) 1050ms both; }
@keyframes miFlag { 0%, 100% { transform:skewY(0) scaleX(1); } 25% { transform:skewY(-9deg) scaleX(0.9); } 50% { transform:skewY(5deg) scaleX(1.04); } 75% { transform:skewY(-4deg) scaleX(0.95); } }
@keyframes miBob { 0%, 100% { transform:translateY(0); } 40% { transform:translateY(-6px); } }
@keyframes miWave { 0%, 100% { transform:rotate(0); } 25% { transform:rotate(-14deg); } 75% { transform:rotate(10deg); } }
@keyframes miHop { 0%, 100% { transform:translateY(0); } 40% { transform:translateY(-10px); } }
@keyframes miPop { 0% { transform:scale(0); } 100% { transform:scale(1); } }
@keyframes miTick { 0% { stroke-dashoffset:24; } 100% { stroke-dashoffset:0; } }
@keyframes miDrop { 0% { transform:translateY(-26px); opacity:0; } 30% { opacity:1; } 100% { transform:translateY(0); opacity:1; } }
@keyframes miNeedle { 0% { transform:rotate(-50deg); } 100% { transform:rotate(38deg); } }

@media (max-width:760px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 16px; }
  .metric-ico { width:96px; }
  .metric-num { margin-top:14px; font-size:42px; }
  .metric-label { font-size:15px; margin-top:8px; }
  .metrics-live { margin-top:32px; font-size:13px; }
}

/* --- Our Process: the stepper ----------------------------------------------
   Built by mainpage.js. Each stage puts three things in the grid, in its
   own column (--col): its scene (row 1), its dot (row 2) and its words
   (row 3). The line runs through row 2 from the first dot's centre to the
   last's (columns are equal, so that is 12.5% in from each side), and the
   green runner rides it to whichever stage is current (--progress, 0 to 1). */
.proc { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.proc-scene { grid-row:1; grid-column:var(--col); margin:0 12px 30px; padding:8px 10px 4px;
  background:var(--surface); border:1px solid var(--brand-line); border-radius:18px; box-shadow:0 14px 34px -26px var(--paper-shadow);
  opacity:0.45; transform:scale(0.95); transition:opacity 450ms ease, transform 450ms cubic-bezier(0.22,1,0.36,1), border-color 450ms ease; }
.proc-scene.is-current { opacity:1; transform:none; border-color:var(--brand-line-mid); }
.proc .scene { --d:0s; }
.proc.in-view .proc-scene.is-current .scene { --play:running; }

.proc-line { grid-row:2; grid-column:1 / -1; align-self:center; position:relative; height:4px; margin:0 12.5%; border-radius:2px; background:var(--line); }
.proc-fill { position:absolute; left:0; top:0; bottom:0; width:calc(var(--progress, 0) * 100%); border-radius:inherit; background:var(--brand);
  transition:width 700ms cubic-bezier(0.22,1,0.36,1); }
.proc-runner { position:absolute; top:50%; left:calc(var(--progress, 0) * 100%); z-index:3; width:32px; height:32px; margin:-16px 0 0 -16px;
  box-sizing:border-box; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:2px solid var(--live);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--live) 14%, transparent); pointer-events:none;
  transition:left 700ms cubic-bezier(0.22,1,0.36,1); }
.proc-runner .live-dot { width:12px; height:12px; }

.proc-node { grid-row:2; grid-column:var(--col); justify-self:center; position:relative; z-index:2; display:grid; place-items:center;
  width:40px; height:40px; padding:0; border:none; border-radius:50%; background:none; cursor:pointer; color:inherit; font:inherit; }
.proc-node:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.proc-dot { display:block; width:18px; height:18px; box-sizing:border-box; border-radius:50%; background:var(--surface); border:2px solid var(--line);
  transition:background-color 300ms ease, border-color 300ms ease; }
.proc-node:hover .proc-dot { border-color:var(--brand-line-mid); }
.proc-node.is-done .proc-dot { background:var(--brand); border-color:var(--brand); }
.proc-short { display:none; }

.proc-text { grid-row:3; grid-column:var(--col); padding:22px 14px 0; text-align:center; opacity:0.5; transition:opacity 450ms ease; }
.proc-text.is-current { opacity:1; }
.proc-text h3 { margin:0; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:700;
  font-size:18px; line-height:1.3; letter-spacing:-0.015em; color:var(--text); text-wrap:balance; }
.proc-text p { margin:8px auto 0; max-width:30ch; font-size:15px; line-height:1.55; color:var(--text-secondary); }

/* Phones: four dots with short names in a row, and the current stage's
   scene and words underneath, one at a time. */
@media (max-width:700px) {
  .proc-node { grid-row:1; width:auto; height:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 2px; border-radius:10px; }
  .proc-short { display:block; font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:600;
    font-size:13px; color:var(--text-secondary); transition:color 300ms ease; }
  .proc-node.is-current .proc-short { color:var(--text); }
  .proc-line { grid-row:1; align-self:start; margin-top:11px; }
  .proc-runner { width:28px; height:28px; margin:-14px 0 0 -14px; }
  .proc-runner .live-dot { width:10px; height:10px; }
  .proc-scene, .proc-text { grid-column:1 / -1; display:none; }
  .proc-scene { grid-row:2; width:min(100%, 360px); margin:28px auto 0; box-sizing:border-box; }
  .proc-text { grid-row:3; padding:18px 8px 0; }
  .proc-scene.is-current, .proc-text.is-current { display:block; animation:procIn 450ms ease both; }
  .proc-text h3 { font-size:19px; }
  .proc-text p { font-size:16px; max-width:34ch; }
}
@keyframes procIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .proc-scene, .proc-text { opacity:1; transform:none; }
  .proc-fill, .proc-runner { transition:none; }
}

/* --- Work With Us and the footer sources ---------------------------------- */
.join-wrap { max-width:720px; margin:0 auto; }
.join-foot { display:flex; align-items:center; justify-content:center; gap:12px; margin:28px 0 0; }
.join-foot p { margin:0; font-size:15px; line-height:1.5; color:var(--text-secondary); }
.join-foot a { color:var(--brand); font-weight:600; }
.foot-sources p { margin:0; padding:4px 0 8px; max-width:120ch; font-size:12.5px; line-height:1.6; color:var(--text-secondary); }
.foot-sources a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

@media (max-width:700px) {
  .sec { padding:44px 0; }
  .sec-head { margin-bottom:36px; }
  .sec-title { font-size:34px; }
  .sec-title::after { width:36px; margin-top:16px; }
  .sec-lede { margin-top:16px; font-size:16.5px; }
  .sec-note { margin:-12px auto 20px; font-size:14px; }
}