/* Eat First's cold-storage look, lifted from the app (EatFresh/Core/Theme.swift): the near-black
   void, carbon cards with a hairline edge, frost text, ash labels in small caps, monospaced data,
   one lime accent, and the urgency colours of the radar. No glows, no gradients. */
:root{
  --void:#0A0C0B; --night:#060707; --carbon:#141715; --plate:#1C201D;
  --frost:#EDF2ED; --body:#C2C9C4; --muted:#A3ACA5; --ash:#8A948C;
  --bio:#B3EB59; --mint:#7DD9A1; --amber:#E3BA61; --orange:#F08C4D; --red:#F26170;
  --hair:rgba(255,255,255,.08);
  --text:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--body);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--bio);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#CFF58F;text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--bio);outline-offset:3px;border-radius:6px}
::selection{background:var(--bio);color:var(--void)}
[hidden]{display:none !important}
h1,h2,h3{color:var(--frost);margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--frost);color:var(--void);padding:10px 14px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The app's two label voices: MicroLabel (small caps) and StampText (the date printer) */
.micro{font:600 11px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.stamp{font-family:var(--mono);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
/* Urgency, as on the radar */
.overdue{--c:var(--red)} .today{--c:var(--orange)} .soon{--c:var(--amber)} .week{--c:var(--bio)} .fresh{--c:var(--mint)}

/* Header: carbon capsules */
.top{position:absolute;top:0;left:0;right:0;z-index:6}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;padding-bottom:14px}
.brand,.top nav a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:6px 15px;border-radius:999px;background:var(--carbon);border:1px solid var(--hair);color:var(--frost);text-decoration:none;font:600 15px/1 var(--text)}
.brand{padding-left:6px;white-space:nowrap}
.brand img{width:28px;height:28px;border-radius:7px}
.top nav{display:flex;gap:8px}
.brand:hover,.top nav a:hover{color:var(--frost);background:var(--plate)}
@media (max-width:380px){.brand,.top nav a{padding:6px 12px;font-size:14px}.brand{padding-left:6px}.brand img{width:26px;height:26px}.top nav{gap:6px}}

/* ───────── Hero: the app's dot-matrix field behind, the radar you can scrub ───────── */
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);padding:96px 0 34px}
/* MeshBackground: 24 px pitch, 1.5 px dots of frost at 5.5 %, fading toward the bottom */
.hero::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:min(1000px,100%);pointer-events:none;
  background:radial-gradient(circle,rgba(237,242,237,.055) 1.5px,transparent 2px) 0 0 / 24px 24px;
  -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.25) 55%,transparent);mask-image:linear-gradient(#000,rgba(0,0,0,.25) 55%,transparent)}
.head{grid-column:2;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bio)}
h1{margin-top:16px;font-size:clamp(54px,16vw,80px);line-height:.95;letter-spacing:-.035em}
.tagline{margin-top:14px;font:500 clamp(20px,5.4vw,26px)/1.25 var(--text);color:var(--frost);text-wrap:balance}
.deck{grid-column:2;justify-self:center;max-width:34em;margin-top:30px;text-align:center}
.lede{font-size:18px}
/* The App Store button sits straight under the tagline, so a phone shows it in the first screen */
.get{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.fine{font-size:15px;color:var(--ash)}
/* The App Store button: the app's one lime action */
.cta{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:min(100%,260px);min-height:62px;padding:11px 34px 10px;border-radius:999px;background:var(--bio);color:var(--void);text-decoration:none}
.cta span{font:700 19px/1.15 var(--text);letter-spacing:-.01em}
.cta small{font:500 11px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cta:hover{color:var(--void);background:#C4F278}
.cta:active{transform:scale(.985)}
.cta:focus-visible{border-radius:999px}

/* ───────── The radar card (KitchenRadar.swift): header, scope, forecast, day ruler, readout ───────── */
.radar{grid-column:2;justify-self:center;width:min(440px,100%);margin:34px 0 0}
.instrument{display:grid;gap:14px;padding:18px;border-radius:20px;background:var(--carbon);border:1px solid var(--hair);-webkit-user-select:none;user-select:none}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.rhead .stamp{font-size:11px;color:var(--ash)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-10px -8px;padding:10px 8px;border:0;border-radius:8px;background:none;color:var(--frost);font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.back svg{width:11px;height:11px;fill:none;stroke:var(--bio);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.back:hover{background:var(--plate)}
/* The scope is drawn in the app's own points (340 × 304); --u is one point. */
.scope{position:relative;aspect-ratio:340 / 304;container-type:inline-size;touch-action:manipulation;cursor:crosshair;-webkit-tap-highlight-color:transparent}
.scope > *,.wake > *{position:absolute}
.scope > svg,.wake,.lit,.blips{inset:0;width:100%;height:100%}
.blips{--u:calc(100cqw / 340)}
.dim{fill:var(--bio);opacity:.07}
.lit{fill:var(--bio)}
.ring,.spoke{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.ring.outer{stroke:rgba(255,255,255,.12)}
.core{fill:var(--void);stroke:rgba(242,97,112,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.rl{font:500 8px var(--mono);fill:var(--ash);dominant-baseline:central}
/* The sweep: a disc in the card's colour turns over the lit dot matrix. It is clear just behind
   the beam and closes over 120°, so the dots it passes light up and fade like phosphor:
   1 − e^(−2.4·angle), the radarWake shader's curve. */
.shade{border-radius:50%;background:conic-gradient(from 90deg,#141715 0deg 240deg,rgba(20,23,21,.977) 270deg,rgba(20,23,21,.91) 303deg,rgba(20,23,21,.75) 327deg,rgba(20,23,21,.5) 343deg,rgba(20,23,21,.285) 352deg,rgba(20,23,21,0) 360deg)}
.beam{position:absolute;left:50%;top:50%;width:50%;height:1px;margin-top:-.5px;background:var(--bio);opacity:.6}
.still .wake{display:none}
/* Without JavaScript: the radar and the ruler at rest, drawn from this page with Reduce Motion on */
.scope noscript,.tape noscript{position:absolute;inset:0}
.scope .rest{width:100%;height:100%}
.tape .rest{width:402px;max-width:none;height:44px}
.sector{display:flex;align-items:baseline;gap:6px;margin:0;pointer-events:none;white-space:nowrap}
.sector .stamp{font-size:11px;color:var(--frost)}
.sector.fridge{top:0;left:50%;transform:translateX(-50%)}
.sector.pantry{left:0;bottom:0}
.sector.freezer{right:0;bottom:0}
.blip{position:absolute;width:max(24px,calc(22 * var(--u)));aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;transform:translate(-50%,-50%);cursor:pointer;-webkit-tap-highlight-color:transparent}
.blip:focus-visible{outline:0}
.blip i{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none}
.blip .dot{width:calc(7 * var(--u));height:calc(7 * var(--u));margin:calc(-3.5 * var(--u));background:var(--c)}
.blip:focus-visible .dot{outline:1px solid var(--frost);outline-offset:2px}
.blip .ping{display:none;width:calc(20 * var(--u));height:calc(20 * var(--u));margin:calc(-10 * var(--u));border:1px solid var(--c);opacity:0}
.blip.urgent .ping{display:block}
.reticle{position:absolute;width:calc(20 * var(--u));height:calc(20 * var(--u));transform:translate(-50%,-50%);fill:none;stroke:rgba(237,242,237,.9);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.reticle path{vector-effect:non-scaling-stroke}
.forecast{display:flex;flex-wrap:wrap;gap:6px 18px}
.stat{display:inline-flex;align-items:center;gap:6px;font:500 10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ash)}
.stat i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.stat b{font:500 13px/1 var(--mono);color:var(--frost)}
.stat b.zero{color:var(--ash)}
/* The day ruler: one tick a day for a month, 10 px apart; the playhead is the only white mark. */
.tape{position:relative;height:44px;overflow:hidden;touch-action:pan-y;cursor:grab;border-radius:6px 0 0 6px;margin-right:-18px}
.tape.held{cursor:grabbing}
.tape:focus-visible{outline-offset:-2px}
.ruler{position:absolute;top:0;left:12px;display:flex}
.tick{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;width:10px;height:44px}
.tick i{width:1px;height:5px;border-radius:1px;background:rgba(237,242,237,.16)}
.tick.weekly i{height:10px;background:rgba(237,242,237,.35)}
.tick.has i{width:2px;background:var(--c)}
.tick small{height:11px;font:500 9px/11px var(--mono);text-transform:uppercase;color:var(--ash);white-space:nowrap}
.playhead{position:absolute;top:0;left:16px;width:2px;height:28px;border-radius:1px;background:var(--frost);pointer-events:none}
.instrument hr{width:100%;margin:0;border:0;border-top:1px solid var(--hair)}
.readout{display:grid;gap:8px;min-width:0}
.rline{display:flex;align-items:center;gap:10px;min-width:0}
.rline i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--c)}
.rline b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 17px/1.3 var(--text);color:var(--frost)}
.rline .stamp{flex:none;font-size:11px;color:var(--ash)}
.rline .stamp.late{color:var(--red)}
.radar figcaption{margin-top:14px;text-align:center;font-size:15px;color:var(--ash);text-wrap:balance}
@media (min-width:1100px){
  .hero{--edge:max(var(--gutter),calc(50% - 590px + var(--gutter)));grid-template-columns:var(--edge) minmax(0,1fr) 64px 440px var(--edge);grid-template-rows:1fr auto auto auto 1fr;min-height:max(800px,100svh);padding:96px 0 32px}
  .head{grid-column:2;grid-row:2;text-align:left}
  h1{font-size:clamp(88px,8.4vw,116px)}
  .tagline{font-size:30px;margin-top:18px;max-width:16em}
  .deck{grid-column:2;grid-row:3;justify-self:start;text-align:left;margin-top:26px}
  .lede{font-size:19px;max-width:30em}
  .get{grid-row:4;justify-self:start;flex-direction:row;flex-wrap:wrap;gap:14px 22px}
  .radar{grid-column:4;grid-row:1 / -1;align-self:center;margin:0}
}

/* ───────── Sections ───────── */
.section{padding-top:clamp(72px,10vw,124px)}
.section h2{font-size:clamp(32px,5.4vw,52px);line-height:1.05;letter-spacing:-.025em}
.intro{margin-top:14px;max-width:36em;font-size:19px;color:var(--muted)}
h3{font-size:19px;line-height:1.25}
.cards{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cards > li,.panel{padding:22px;border-radius:20px;background:var(--carbon);border:1px solid var(--hair)}
.cards .micro{display:block;margin-bottom:10px}
.cards p{margin-top:8px;font-size:16px;color:var(--muted)}
.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.legend li{display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ash)}
.legend i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.legend b{font-weight:500;color:var(--frost)}
.split{display:grid;gap:28px;margin-top:40px}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.points{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.points p{margin-top:6px;color:var(--muted)}
/* Data cards: what the code or the pack says, in the date printer's type */
.panel .micro{display:block}
.rows{margin:16px 0 0;display:grid;gap:0}
.rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--hair)}
.rows dt{font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ash)}
.rows dd{margin:0;font:500 14px/1.4 var(--mono);color:var(--frost);text-align:right}
.rows .total dt,.rows .total dd{color:var(--frost)}
.rows .total dd{display:inline-flex;align-items:center;gap:8px}
.rows .total i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.codes{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;padding:0;list-style:none}
.codes li{padding:5px 9px;border-radius:8px;border:1px solid var(--hair);font:500 11px/1.2 var(--mono);letter-spacing:.04em;color:var(--body)}
.note{margin-top:14px;font-size:14px;color:var(--ash)}
/* Privacy in five lines */
.facts{margin:28px 0 0;max-width:780px;border-radius:20px;overflow:hidden;background:var(--carbon);border:1px solid var(--hair)}
.facts div{display:grid;gap:2px;padding:15px 22px}
.facts div + div{border-top:1px solid var(--hair)}
@media (min-width:560px){.facts div{grid-template-columns:170px 1fr;gap:16px}}
.facts dt{font:500 12px/2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bio)}
.facts dd{margin:0}
.more{margin-top:12px}
.more a,.foot nav a{display:inline-flex;align-items:center;min-height:44px}
/* Closing call */
.closing{padding:clamp(88px,11vw,140px) 0 clamp(72px,9vw,110px)}
.closing-grid{display:grid;justify-items:center;text-align:center;gap:22px}
.closing .icon{width:120px;height:120px;border-radius:27px;border:1px solid var(--hair)}
.closing .say{font:600 clamp(30px,5vw,48px)/1.08 var(--text);letter-spacing:-.02em;color:var(--frost);max-width:15em}
/* Footer */
.foot{background:var(--night);color:var(--ash);font-size:15px;border-top:1px solid rgba(255,255,255,.06)}
.foot .wrap{padding-top:36px;padding-bottom:40px;display:grid;gap:14px}
.foot a{color:var(--frost)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px}
/* Only transform and opacity animate, as Web Animations in radar.js. The switch stops the sweep;
   with Reduce Motion on, nothing moves and the switch goes away. */

/* ───────── 404: a page with no date, parked on the outer ring as the app parks undated food ───────── */
.lost{min-height:100vh;min-height:100svh;display:grid;place-content:center;justify-items:center;padding:32px 16px;text-align:center}
.lost .brand{margin-bottom:44px}
.blank{display:block;width:160px;height:160px;margin:0 auto 28px}
.nodate{fill:none;stroke:var(--ash);stroke-width:1.5}
.lost h1{margin-top:14px;font-size:clamp(40px,10vw,60px);line-height:1;letter-spacing:-.03em}
.lost .lede{margin:16px 0 30px;max-width:30em;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.plain{display:inline-flex;align-items:center;min-height:62px;padding:10px 28px;border-radius:999px;background:var(--carbon);border:1px solid var(--hair);color:var(--frost);text-decoration:none;font:600 17px/1 var(--text)}
.plain:hover{color:var(--frost);background:var(--plate)}
.lost .tr{margin-top:32px;font-size:15px;color:var(--ash)}