/* ═══════════════════════════════════════════════════════════════
   crude — discovery-era additions
   Evolves the locked token system. Bolder, still warm & editorial.
   Loaded AFTER the inline <style>, so these win on conflict.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --hero-scale: 1;                 /* tweakable headline scale */
  --ring-bg: var(--bg-card);
  --green: var(--score-green);
  --amber: var(--score-amber);
  --red:   var(--score-red);
}

/* cool paper tone (tweak) */
html[data-paper="cool"]{ --bg:#F2F1EC; --rule:#E1E0DA; --rule-2:#D5D4CC; }

/* lowercase posture everywhere brand copy lives — headlines already styled */
.kicker{ text-transform: uppercase; }
.hero__kicker .kicker{ white-space: nowrap; }
.nav a{ white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   HEADER — waitlist register
   ───────────────────────────────────────────────────────────── */
.nav__cta{ letter-spacing: .005em; }

/* ─────────────────────────────────────────────────────────────
   HERO — re-centred on the ranked board
   ───────────────────────────────────────────────────────────── */
.hero{ padding-top: clamp(34px,5vw,64px); padding-bottom: clamp(64px,8vw,120px); }
.hero__grid{ grid-template-columns: 1.08fr 0.92fr; gap: clamp(40px,5.5vw,80px); align-items: center; }
@media (max-width: 1000px){ .hero__grid{ grid-template-columns: 1fr; gap: 48px; } }

.hero__copy{ max-width: 600px; }

.hero__headline{
  font-weight: 200;
  font-size: calc(var(--fs-display) * var(--hero-scale));
  line-height: 1.0;
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.hero__headline .accent{ position: relative; font-weight: 300; white-space: nowrap; }
.hero__headline .accent::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom: 0.07em;
  height: 0.30em; background: var(--yellow); z-index:-1; opacity:.95;
  transform: scaleX(0); transform-origin: left center;
  animation: underline 1.05s var(--ease) .85s forwards;
}
.hero__sub{
  font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2);
  max-width: 40ch; margin: clamp(20px,2.2vw,30px) 0 clamp(30px,3.4vw,40px);
  text-transform: lowercase;
}

/* ─────────────────────────────────────────────────────────────
   WAITLIST — inline, single field + role toggle
   ───────────────────────────────────────────────────────────── */
.wl{ max-width: 480px; opacity:0; transform: translateY(8px); animation: rise 1s var(--ease) .5s forwards; }
.wl__field{
  display:flex; align-items:center; gap: 8px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 13px;
  transition: border-color .2s var(--ease);
}
.wl__field:focus-within{ border-bottom-color: var(--yellow-2); }
.wl__email{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family: var(--sans); font-weight: 300; font-size: 17px; color: var(--ink);
  padding: 4px 0;
}
.wl__email::placeholder{ color: var(--ink-4); font-weight: 300; }
.wl__submit{
  display:inline-flex; align-items:center; gap: 9px; white-space:nowrap;
  font-family: var(--sans); font-weight: 400; font-size: 14.5px; color: var(--ink);
  padding: 6px 0 6px 14px; letter-spacing: .005em;
}
.wl__submit .arrow{ width: 18px; height: 9px; transition: transform .25s var(--ease); }
.wl__submit:hover .arrow{ transform: translateX(4px); }
.wl__submit:disabled{ opacity:.5; cursor: default; }

.wl__roles{ display:flex; gap: 8px; margin-top: 16px; }
.wl__role{
  flex:0 1 auto; padding: 8px 15px; border: 1px solid var(--rule-2); border-radius: 999px;
  background: transparent; font-family: var(--sans); font-weight: 400; font-size: 13px;
  color: var(--ink-3); cursor:pointer; transition: all .18s var(--ease); text-transform: lowercase; white-space: nowrap;
}
.wl__role:hover{ border-color: var(--ink-4); color: var(--ink-2); }
.wl__role[aria-pressed="true"]{ border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.wl__err{ min-height: 16px; margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--score-red); }
.hero__promise{ margin: clamp(18px,2vw,26px) 0 clamp(28px,3.2vw,38px); font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:9px; }
.hero__promise::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--yellow); flex-shrink:0; }

/* hero mission / vision line */
.hero__mission{
  margin: 0;
  max-width: 30ch;
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-lede);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 1.1s var(--ease) .3s forwards;
}
html[data-herosub="none"] .hero__mission{ display: none; }

/* hero point — glowing dot + highlighter-swipe word change */
.hero__promise::before{
  box-shadow: 0 0 7px 1px color-mix(in oklab, var(--yellow) 55%, transparent);
  animation: dotGlow 2.4s var(--ease) infinite;
}
@keyframes dotGlow{
  0%, 100% { box-shadow: 0 0 5px 0 color-mix(in oklab, var(--yellow) 40%, transparent); }
  50%      { box-shadow: 0 0 11px 2px color-mix(in oklab, var(--yellow) 78%, transparent); }
}

.hero__swap{ position: relative; display: inline-block; white-space: nowrap; }
.hero__promise-prefix{ white-space: nowrap; }
.hero__swap-word{ display: inline-block; }
.hero__swap-wipe{
  position: absolute;
  top: -2px; bottom: -2px; left: -3px; right: -3px;
  background: var(--yellow);
  border-radius: 1.5px;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.hero__swap.is-cover .hero__swap-wipe{
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .15s cubic-bezier(.55, 0, .85, .25);
}
.hero__swap.is-reveal .hero__swap-wipe{
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .26s cubic-bezier(.18, .85, .28, 1);
}

.home__logoslot{ border-radius:50%; overflow:hidden; background:#F1EFE9; }

/* hero subtext variants (tweakable: stamp / full / none) */
.hero__sub--full{ display:none; }
html[data-herosub="full"] .hero__promise{ display:none; }
html[data-herosub="full"] .hero__sub--full{ display:block; }
html[data-herosub="none"] .hero__promise,
html[data-herosub="none"] .hero__sub--full{ display:none; }
html[data-herosub="none"] .wl{ margin-top: clamp(20px,2.4vw,30px); }
.wl__rest{
  display:inline-flex; align-items:center; gap: 7px; margin-top: 18px; white-space: nowrap;
  font-size: 13.5px; color: var(--ink-3); border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px; transition: color .18s var(--ease), border-color .18s var(--ease);
  text-transform: lowercase;
}
.wl__rest:hover{ color: var(--ink); border-color: var(--ink); opacity: 1; }
.cta__wl .wl__rest{ margin-top: 22px; }
.wl__micro{
  margin-top: 4px; font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
}

.wl__done{ max-width: 480px; animation: rise .5s var(--ease); }
.wl__done[hidden]{ display:none; }
.wl__check{
  width: 46px; height: 46px; border-radius: 50%; background: var(--score-green); color:#fff;
  display:grid; place-items:center; font-size: 22px; margin-bottom: 18px;
}
.wl__doneTitle{ font-size: clamp(24px,2.4vw,30px); font-weight: 300; letter-spacing: -.02em; text-transform: lowercase; }
.wl__doneMsg{ color: var(--ink-2); font-size: 16px; margin-top: 8px; max-width: 34ch; text-transform: lowercase; }

/* ─────────────────────────────────────────────────────────────
   SCORE RING — conic, contextual inner
   ───────────────────────────────────────────────────────────── */
.ring{
  --rc: var(--score-green); --sz: 42px;
  position: relative; width: var(--sz); height: var(--sz);
  display:grid; place-items:center; flex-shrink:0;
}
.ring svg{ width:100%; height:100%; display:block; }
.ring circle{ fill:none; stroke-width:3; }
.ring .rbg{ stroke: var(--rule); }
.ring .rfg{ stroke: var(--rc); stroke-linecap:round; }
.ring b{ position:absolute; font-family: var(--mono); font-weight: 400; font-size: calc(var(--sz) * .33); color: var(--rc); letter-spacing: -.04em; }

/* ─────────────────────────────────────────────────────────────
   THE BOARD — the ranked list, on the page (default hero right)
   ───────────────────────────────────────────────────────────── */
.hero__right{ justify-self: stretch; }

.board{
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 18px; padding: clamp(18px,1.8vw,26px) clamp(18px,1.8vw,28px) clamp(14px,1.4vw,18px);
  box-shadow: 0 1px 1px rgba(26,26,24,.03), 0 30px 60px -34px rgba(26,26,24,.22);
}
.board__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.board__title{ font-size: clamp(19px,1.7vw,23px); font-weight: 500; letter-spacing: -.02em; line-height:1.1; }
.board__date{ font-family: var(--mono); font-size: var(--fs-micro); letter-spacing:.06em; text-transform: uppercase; color: var(--ink-3); display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; text-align:right; }
.board__date .ck{ color: var(--score-green); }
.board__date .sep{ color: var(--ink-5); }

.board__list{ list-style:none; margin:0; padding:0; }
.board__row{
  display:flex; align-items:center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule);
  opacity:0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.is-in .board__row{ opacity:1; transform:none; }
.is-in .board__row:nth-child(1){ transition-delay:.08s; }
.is-in .board__row:nth-child(2){ transition-delay:.15s; }
.is-in .board__row:nth-child(3){ transition-delay:.22s; }
.is-in .board__row:nth-child(4){ transition-delay:.29s; }
.is-in .board__row:nth-child(5){ transition-delay:.36s; }
.is-in .board__row:nth-child(6){ transition-delay:.43s; }
.is-in .board__row:nth-child(7){ transition-delay:.50s; }
.is-in .board__row:nth-child(8){ transition-delay:.57s; }
.board__rank{ font-family: var(--mono); font-size: 11px; color: var(--ink-4); width: 18px; flex-shrink:0; letter-spacing:.04em; }
.board__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap: 2px; }
.board__name{ font-size: 15.5px; font-weight: 400; letter-spacing: -.01em; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board__meta{ font-size: 12.5px; color: var(--ink-3); }
.board__row .ring{ --sz: 40px; }
.board__foot{
  display:flex; align-items:center; gap: 10px; padding-top: 14px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.board__foot::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--yellow); flex-shrink:0; }

/* ─────────────────────────────────────────────────────────────
   HERO DIRECTION VARIANTS (tweakable)
   ───────────────────────────────────────────────────────────── */
/* default = home (the app's main page, feature button) */
html[data-hero="centered"] .hero__grid{ grid-template-columns: 1fr; text-align:center; gap: clamp(40px,5vw,64px); }
html[data-hero="centered"] .hero__copy{ max-width: 760px; margin-inline:auto; }
html[data-hero="centered"] .hero__sub{ margin-inline:auto; }
html[data-hero="centered"] .wl{ margin-inline:auto; }
html[data-hero="centered"] .hero__home{ margin-inline:auto; }

/* ── HERO HOME SCREEN — the app's main page with the feature button ── */
.hero__home{ justify-self:center; width:min(100%,328px); opacity:0; transform:translateY(18px); animation: rise 1.2s var(--ease) .3s forwards; }
.home{ flex:1; display:flex; flex-direction:column; background:var(--bg); min-height:0; overflow:hidden; }
.home__header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px 8px; }
.home__wordmark{ height:21px; width:auto; display:block; }
.home__actions{ display:flex; align-items:center; gap:8px; }
.home__icobtn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.home__icobtn svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.6; fill:none; }
.home__search{ padding:10px 18px 6px; }
.home__searchbar{ display:flex; align-items:center; height:42px; border:1px solid var(--rule-2); border-radius:999px; padding:0 16px; }
.home__searchbar span{ font-size:13.5px; color:var(--ink-3); }
.home__scroll{ flex:1; overflow:hidden; }
.feat-band{ display:flex; align-items:center; gap:13px; width:100%; padding:20px 18px; text-align:left; position:relative; overflow:hidden; margin-top:8px; background:#FAF0CB; border-top:1px solid #ECD98C; border-bottom:1px solid #ECD98C; }
.band-orb{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; background:var(--yellow); color:var(--ink); }
.band-orb svg{ width:17px; height:17px; stroke:currentColor; stroke-width:1.4; fill:none; }
.band-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; position:relative; z-index:1; }
.band-title{ font-size:21px; font-weight:500; letter-spacing:-.3px; color:var(--ink); }
.band-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:rgba(26,26,24,.55); }
.band-arrow{ display:inline-flex; flex-shrink:0; position:relative; z-index:1; color:var(--ink); }
.band-arrow svg{ width:21px; height:21px; stroke:currentColor; stroke-width:1.8; fill:none; }
.feat-band .sweep{ position:absolute; top:0; bottom:0; width:45%; left:-45%; background:linear-gradient(90deg,transparent,rgba(242,196,56,.30),transparent); animation:sweepMove 3.4s ease-in-out infinite; pointer-events:none; z-index:0; }
@keyframes sweepMove{ 0%{ left:-45%; } 60%,100%{ left:100%; } }
.home__label{ padding:20px 18px 4px; font-family:var(--mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-3); }
.home__row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px 18px; border-bottom:1px solid var(--rule); }
.home__logo{ width:36px; height:36px; border-radius:50%; background:#FFFFFF; box-shadow: inset 0 0 0 1px var(--rule); overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink-2); flex-shrink:0; }
.home__logo img{ width:100%; height:100%; object-fit:cover; display:block; }
.home__rc{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.home__topline{ display:flex; align-items:center; gap:8px; }
.home__name{ font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.home__pill{ border:1px solid var(--rule-2); border-radius:999px; padding:2px 9px; font-size:10px; color:var(--ink-2); flex-shrink:0; white-space:nowrap; }
.home__sub{ font-size:13px; color:var(--ink-3); }
.home__chev{ font-size:20px; color:var(--ink-4); margin-left:10px; flex-shrink:0; }

/* ─────────────────────────────────────────────────────────────
   NEAR YOU — the feed, in the device
   ───────────────────────────────────────────────────────────── */
.nearyou{ padding: var(--section-y) 0; border-top: 1px solid var(--rule); }
.nearyou__grid{ display:grid; grid-template-columns: 1fr 0.92fr; gap: clamp(40px,6vw,96px); align-items:center; }
@media (max-width: 920px){ .nearyou__grid{ grid-template-columns:1fr; gap: 56px; } }
.nearyou__copy h2{ font-family: var(--sans); font-weight: 200; font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -.03em; margin: clamp(20px,2.4vw,30px) 0 0; text-transform: lowercase; }
.nearyou__copy h2 em{ font-style: normal; font-weight: 300; }
.nearyou__lede{ font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); font-weight: 300; max-width: 40ch; margin: clamp(20px,2.2vw,28px) 0 0; text-transform: lowercase; }
.nearyou__spine{
  margin-top: clamp(26px,3vw,36px); padding-top: clamp(18px,2vw,24px); border-top: 1px solid var(--rule);
  font-size: clamp(17px,1.5vw,21px); font-weight: 300; letter-spacing: -.01em; color: var(--ink); text-transform: lowercase;
}
.nearyou__spine b{ font-weight: 500; }
.nearyou__device{ justify-self:center; width:min(100%,322px); }

/* feed list inside the device */
.feed{ flex:1; display:flex; flex-direction:column; background: var(--bg); min-height:0; --ring-bg: var(--bg); }
.feed__nav{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.feed__nav .ico{ width:24px; height:24px; color: var(--ink); }
.feed__nav .ico svg{ width:20px; height:20px; stroke: currentColor; stroke-width:1.6; fill:none; }
.feed__nav .t{ font-size: 14.5px; font-weight: 400; }
.feed__head{ padding: 18px 18px 8px; }
.feed__title{ font-size: 22px; font-weight: 500; letter-spacing: -.03em; line-height:1.15; }
.feed__date{ margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing:.05em; text-transform: uppercase; color: var(--ink-3); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.feed__date .ck{ color: var(--score-green); }
.feed__date .sep{ color: var(--ink-5); }
.feed__list{ flex:1; overflow:hidden; padding: 2px 18px 0; }
.feed__row{ display:flex; align-items:center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.feed__photo{ width: 46px; height: 46px; border-radius: 9px; flex-shrink:0; }
.feed__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap: 2px; }
.feed__name{ font-size: 14.5px; font-weight: 400; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed__meta{ font-size: 12px; color: var(--ink-3); }
.feed__row .ring{ --sz: 40px; }
.feed__chev{ font-size: 19px; color: var(--ink-5); flex-shrink:0; }

/* gradient dish placeholders — the app's own */
.p0{ background: radial-gradient(ellipse at 30% 30%, rgba(255,235,180,.45), transparent 55%), linear-gradient(135deg,#C99A4A,#5C3B1E); }
.p1{ background: radial-gradient(ellipse at 30% 30%, rgba(235,255,220,.4), transparent 55%), linear-gradient(135deg,#8FA76B,#3C4A2A); }
.p2{ background: radial-gradient(ellipse at 30% 30%, rgba(255,225,210,.4), transparent 55%), linear-gradient(135deg,#C77E5A,#5E3520); }
.p3{ background: radial-gradient(ellipse at 30% 30%, rgba(255,245,225,.4), transparent 55%), linear-gradient(135deg,#B8A06A,#4E4226); }

/* ─────────────────────────────────────────────────────────────
   PROOF — tap any dish, see what's in it (item detail moves here)
   ───────────────────────────────────────────────────────────── */
.proof{ padding: var(--section-y) 0; border-top: 1px solid var(--rule); }
.proof__grid{ display:grid; grid-template-columns: 0.92fr 1fr; gap: clamp(40px,6vw,96px); align-items:center; }
@media (max-width: 920px){ .proof__grid{ grid-template-columns:1fr; gap: 56px; } .proof__device{ order:-1; } }
.proof__device{ justify-self:center; width:min(100%,322px); }
.proof__copy h2{ font-family: var(--sans); font-weight: 200; font-size: var(--fs-h1); line-height:1.03; letter-spacing:-.03em; margin: clamp(20px,2.4vw,30px) 0 0; text-transform: lowercase; }
.proof__copy h2 em{ font-style: normal; font-weight: 300; position:relative; }
.proof__copy h2 em::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.26em; background: var(--yellow); z-index:-1; opacity:.9; }
.proof__lede{ font-size: var(--fs-lede); line-height:1.5; color: var(--ink-2); font-weight:300; max-width: 38ch; margin: clamp(20px,2.2vw,28px) 0 0; text-transform: lowercase; }
.legend{ list-style:none; margin: clamp(22px,2.6vw,30px) 0 0; padding:0; display:flex; flex-direction:column; gap: 11px; }
.legend li{ display:flex; align-items:center; gap: 12px; font-size: 15px; font-weight: 300; color: var(--ink-2); text-transform: lowercase; }
.legend .sw{ width: 11px; height: 11px; border-radius: 3px; flex-shrink:0; }
.legend .sw--green{ background: var(--score-green); }
.legend .sw--amber{ background: var(--score-amber); }
.legend .sw--red{ background: var(--score-red); }
.legend b{ color: var(--ink); font-weight: 500; }
.proof__checked{
  margin-top: clamp(26px,3vw,36px); padding-top: clamp(18px,2vw,24px); border-top: 1px solid var(--rule);
  font-size: clamp(18px,1.6vw,22px); font-weight: 300; letter-spacing:-.01em; color: var(--ink); text-transform: lowercase;
}

/* ─────────────────────────────────────────────────────────────
   FINAL CTA — waitlist
   ───────────────────────────────────────────────────────────── */
.cta h3{ text-transform: lowercase; }
.cta__wl{ margin: clamp(36px,4.5vw,52px) auto 0; max-width: 460px; }
.cta__wl .wl{ animation: none; opacity:1; transform:none; }
.cta__wl .wl__roles{ justify-content: center; }
.cta__wl .wl__field{ text-align:left; }
.cta__sub{ font-size: var(--fs-lede); color: var(--ink-2); font-weight: 300; margin: 18px auto 0; max-width: 40ch; text-transform: lowercase; }
.cta__spine{ margin-top: 26px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing:.12em; text-transform: uppercase; color: var(--ink-4); }

/* ─────────────────────────────────────────────────────────────
   FOOTER tweaks
   ───────────────────────────────────────────────────────────── */
.site-footer__soon{ font-family: var(--mono); font-size: var(--fs-micro); letter-spacing:.16em; text-transform: uppercase; color: var(--ink-4); }

@media (prefers-reduced-motion: reduce){
  .board__row, .wl{ opacity:1 !important; transform:none !important; }
  .hero__headline .accent::after{ animation:none; transform: scaleX(1); }
}