/* landing.css — EatFirst marketing page styles
   Consumes tokens from tokens.css (loaded before this file).
   --------------------------------------------------------- */

/* Landing-page–only layout variable (not a design token) */
:root { --maxw: 1180px; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; margin:0; letter-spacing:-.018em; line-height:1.08;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}

:focus-visible{outline:2.5px solid var(--leaf); outline-offset:3px; border-radius:6px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leaf-deep);
}
.section-head{max-width:560px;}
.section-head h2{font-size:clamp(26px,3.4vw,36px); font-weight:600; margin-top:12px;}
.section-head p{color:var(--ink-soft); margin-top:12px; font-size:16.5px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:"Inter",sans-serif; font-weight:600; font-size:15.5px;
  padding:13px 22px; border-radius:12px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{background:var(--leaf); color:#fff; box-shadow:0 1px 2px rgba(35,92,58,.25), 0 8px 20px rgba(46,125,79,.22);}
.btn-primary:hover{background:var(--leaf-deep); transform:translateY(-1px);}
.btn-ghost{background:var(--card); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:#dcd4c3; transform:translateY(-1px);}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,246,.82); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px;}
.wordmark{display:flex; align-items:center; gap:9px; font-family:"Fraunces",serif; font-weight:600; font-size:20px; letter-spacing:-.02em;}
.wordmark .glyph{font-family:"Inter",sans-serif; font-size:20px;}
.nav-links{display:flex; align-items:center; gap:30px; font-size:14.5px; font-weight:500; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-signin{font-weight:600; font-size:14.5px; color:var(--ink);}
@media(max-width:860px){ .nav-links{display:none;} }

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(680px 420px at 78% 8%, rgba(239,180,0,.10), transparent 60%),
    radial-gradient(720px 520px at 12% 92%, rgba(46,125,79,.07), transparent 62%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.02fr 1fr; gap:54px; align-items:center;
  padding:72px 0 86px;
}
.hero-copy{max-width:520px;}
.hero-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 9px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--ink-soft); box-shadow:var(--shadow);
}
.hero-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--fresh); box-shadow:0 0 0 4px var(--fresh-wash);}
h1.hero-title{
  font-size:clamp(40px,6.0vw,68px); font-weight:600; margin:22px 0 0; letter-spacing:-.03em;
}
h1.hero-title .accent{color:var(--leaf-deep); font-style:italic; font-weight:500;}
.hero-sub{margin-top:20px; font-size:18.5px; color:var(--ink-soft); max-width:440px; line-height:1.5;}
.hero-actions{display:flex; gap:13px; margin-top:30px; flex-wrap:wrap;}
.hero-note{margin-top:18px; font-size:13.5px; color:var(--ink-faint); display:flex; align-items:center; gap:8px;}
.hero-note svg{flex:none;}

/* ---------- Living list (SIGNATURE) ---------- */
.stage{position:relative; min-height:480px;}
.worktop{
  position:relative; background:linear-gradient(180deg,#fff, #FCFBF7);
  border:1px solid var(--line); border-radius:24px; padding:26px 24px 28px;
  box-shadow:var(--shadow-lift);
}
.worktop::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-16px; height:30px; z-index:-1;
  background:radial-gradient(60% 100% at 50% 0, rgba(28,38,28,.13), transparent 72%); filter:blur(2px);
}
.list-head{display:flex; align-items:center; justify-content:space-between; padding:2px 4px 16px;}
.list-head .lh-title{display:flex; flex-direction:column; gap:2px;}
.list-head h3{font-size:19px; font-weight:600;}
.list-head .lh-sub{font-size:12.5px; color:var(--ink-faint); font-family:"Inter",sans-serif; letter-spacing:0;}
.live-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  color:var(--leaf-deep); background:var(--leaf-wash); padding:5px 10px; border-radius:999px;
}
.live-chip .pulse{width:7px; height:7px; border-radius:50%; background:var(--leaf); animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.45; transform:scale(.82);}50%{opacity:1; transform:scale(1.1);}}

.food-card{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; margin-bottom:10px; box-shadow:var(--shadow);
  transform-origin:center;
  animation:settle .62s cubic-bezier(.22,1.1,.36,1) both;
}
.food-card:last-child{margin-bottom:0;}
.food-card:nth-child(1){animation-delay:.05s;}
.food-card:nth-child(2){animation-delay:.16s;}
.food-card:nth-child(3){animation-delay:.27s;}
.food-card:nth-child(4){animation-delay:.38s;}
.food-card:nth-child(5){animation-delay:.49s;}
@keyframes settle{
  0%{opacity:0; transform:translateY(-16px) scale(.97);}
  60%{opacity:1;}
  100%{opacity:1; transform:translateY(0) scale(1);}
}

.ripeness{flex:none; width:13px; height:13px; border-radius:50%; position:relative;}
.ripeness::after{content:""; position:absolute; inset:-5px; border-radius:50%;}
.r-overdue{background:var(--overdue);} .r-overdue::after{box-shadow:0 0 0 4px var(--overdue-wash);}
.r-soon{background:var(--soon);} .r-soon::after{box-shadow:0 0 0 4px var(--soon-wash);}
.r-fresh{background:var(--fresh);} .r-fresh::after{box-shadow:0 0 0 4px var(--fresh-wash);}

.fc-icon{
  flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--leaf-wash); color:var(--leaf-deep);
}
.fc-icon.warm{background:var(--soon-wash); color:var(--soon);}
.fc-icon.cool{background:#EAF0F4; color:#3C6079;}
.fc-body{flex:1; min-width:0;}
.fc-name{font-weight:600; font-size:15.5px; letter-spacing:-.005em;}
.fc-meta{font-size:12.5px; color:var(--ink-faint); margin-top:1px;}
.fc-right{text-align:right; flex:none;}
.fc-days{font-weight:600; font-size:13px; white-space:nowrap;}
.d-overdue{color:var(--overdue);} .d-soon{color:var(--soon);} .d-fresh{color:var(--ink-soft);}
.fc-tag{font-size:11px; color:var(--ink-faint); margin-top:2px;}

.list-foot{display:flex; align-items:center; justify-content:space-between; padding:14px 4px 2px; margin-top:6px; border-top:1px solid var(--line-2);}
.list-foot .lf-count{font-size:12.5px; color:var(--ink-faint);}
.list-foot .lf-link{font-size:13px; font-weight:600; color:var(--leaf-deep); display:inline-flex; align-items:center; gap:5px;}

/* floating side tags */
.float-tag{
  position:absolute; z-index:5; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:9px 13px; box-shadow:var(--shadow-lift);
  font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:9px;
  animation:bob 5.5s ease-in-out infinite;
}
.float-tag .ft-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--leaf-wash);color:var(--leaf-deep);}
.float-a{top:-22px; right:-14px;}
.float-b{bottom:-18px; left:-18px; animation-delay:1.6s;}
.float-b .ft-ic{background:var(--soon-wash); color:var(--soon);}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* ---------- How it works ---------- */
section.block{padding:78px 0;}
.hiw-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px;}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:var(--shadow); position:relative;
}
.step-num{font-family:"Fraunces",serif; font-size:13px; font-weight:600; color:var(--leaf); letter-spacing:.05em;}
.step-ic{width:46px; height:46px; border-radius:12px; background:var(--leaf-wash); color:var(--leaf-deep); display:grid; place-items:center; margin:14px 0 16px;}
.step h3{font-size:19px; font-weight:600;}
.step p{color:var(--ink-soft); font-size:14.5px; margin-top:8px;}
.step-arrow{position:absolute; right:-19px; top:50%; transform:translateY(-50%); color:var(--ink-faint); z-index:2;}
.step:last-child .step-arrow{display:none;}

/* ---------- Bento ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(150px,auto); gap:18px; margin-top:44px;}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .22s ease;
}
.tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
.tile .t-ic{width:42px; height:42px; border-radius:11px; background:var(--leaf-wash); color:var(--leaf-deep); display:grid; place-items:center; margin-bottom:auto;}
.tile h3{font-size:17.5px; font-weight:600; margin-top:18px;}
.tile p{font-size:13.8px; color:var(--ink-soft); margin-top:6px;}
.t-wide{grid-column:span 3;} .t-reg{grid-column:span 2;} .t-tall{grid-column:span 2; grid-row:span 2;}
/* locations chips inside wide tile */
.loc-row{display:flex; gap:9px; margin-top:16px; flex-wrap:wrap;}
.loc-chip{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:7px 12px; border-radius:999px; background:var(--paper); border:1px solid var(--line);}
.loc-chip svg{color:var(--ink-soft);}
/* dates compare */
.date-row{display:flex; gap:10px; margin-top:16px;}
.date-pill{flex:1; border-radius:11px; padding:12px 13px; border:1px solid var(--line);}
.date-pill.bb{background:var(--soon-wash); border-color:#eddcb6;}
.date-pill.ub{background:var(--overdue-wash); border-color:#eecfc9;}
.date-pill .dp-k{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.date-pill.bb .dp-k{color:var(--soon);} .date-pill.ub .dp-k{color:var(--overdue);}
.date-pill .dp-v{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
/* insights mini bars (tall tile) */
.insight-stat{margin-top:18px;}
.insight-stat .big{font-family:"Fraunces",serif; font-size:38px; font-weight:600; line-height:1; color:var(--leaf-deep);}
.insight-stat .lbl{font-size:13px; color:var(--ink-soft); margin-top:5px;}
.bars{display:flex; align-items:flex-end; gap:8px; height:88px; margin-top:20px;}
.bar{flex:1; border-radius:6px 6px 3px 3px; background:var(--leaf-wash);}
.bar i{display:block; width:100%; border-radius:6px 6px 3px 3px; background:var(--leaf); height:var(--h,40%);}
.bar-cap{display:flex; gap:8px; margin-top:8px;}
.bar-cap span{flex:1; text-align:center; font-size:10.5px; color:var(--ink-faint);}

/* ---------- TRMNL panel ---------- */
.glance{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;}
.eink-wrap{display:flex; justify-content:center;}
.eink{
  width:100%; max-width:430px; background:#F4F2EC; border-radius:18px;
  border:1px solid #e3ddcf;
  padding:14px; box-shadow:var(--shadow-lift);
  position:relative;
}
.eink-bezel{background:#2A2722; border-radius:16px; padding:16px;}
.eink-screen{
  background:#EDEAE0; border-radius:6px; padding:20px 20px 18px;
  color:#1c1c1c; font-family:"Inter",sans-serif;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.015) 0 1px, transparent 1px 3px);
}
.eink-top{display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid #1c1c1c; padding-bottom:9px;}
.eink-top .et-title{font-family:"Fraunces",serif; font-weight:700; font-size:20px; letter-spacing:-.01em;}
.eink-top .et-date{font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#444;}
.eink-row{display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px solid #cfcabb;}
.eink-row:last-child{border-bottom:0;}
.eink-dot{width:12px; height:12px; border-radius:50%; flex:none; border:1.5px solid #1c1c1c;}
.eink-dot.full{background:#1c1c1c;}
.eink-dot.half{background:linear-gradient(90deg,#1c1c1c 50%, transparent 50%);}
.eink-dot.open{background:transparent;}
.eink-name{flex:1; font-weight:600; font-size:15px;}
.eink-days{font-size:12.5px; font-weight:700; letter-spacing:.02em;}
.eink-foot{margin-top:12px; display:flex; justify-content:space-between; font-size:11px; color:#555; border-top:2px solid #1c1c1c; padding-top:9px;}

/* ---------- CookNext teaser ---------- */
.cooknext{
  background:linear-gradient(180deg,#fff,#FCFBF7); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 30px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.cn-ic{width:52px; height:52px; border-radius:14px; background:var(--soon-wash); color:var(--soon); display:grid; place-items:center; flex:none;}
.cn-body{flex:1; min-width:240px;}
.cn-body h3{font-size:19px; font-weight:600;}
.cn-body p{font-size:14.5px; color:var(--ink-soft); margin-top:4px;}
.cn-soon{font-size:12px; font-weight:600; color:var(--soon); background:var(--soon-wash); padding:7px 13px; border-radius:999px; white-space:nowrap;}

/* ---------- Final CTA ---------- */
.cta-band{
  position:relative; overflow:hidden;
  background:var(--leaf-deep); color:#fff; border-radius:24px; padding:64px 32px; text-align:center;
  box-shadow:var(--shadow-lift);
}
.cta-band::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 320px at 50% -10%, rgba(239,180,0,.20), transparent 60%);}
.cta-band .inner{position:relative; z-index:1; max-width:560px; margin:0 auto;}
.cta-band h2{font-size:clamp(28px,4vw,42px); font-weight:600; letter-spacing:-.02em;}
.cta-band p{color:rgba(255,255,255,.82); margin-top:16px; font-size:17px;}
.cta-actions{display:flex; gap:13px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.btn-onleaf{background:#fff; color:var(--leaf-deep);}
.btn-onleaf:hover{background:#F4F2EC; transform:translateY(-1px);}
.btn-onleaf-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.btn-onleaf-ghost:hover{border-color:#fff; transform:translateY(-1px);}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); padding:48px 0 40px; margin-top:6px;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap;}
.foot-brand{max-width:280px;}
.foot-brand p{color:var(--ink-soft); font-size:13.5px; margin-top:12px;}
.foot-cols{display:flex; gap:64px; flex-wrap:wrap;}
.foot-col h4{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;}
.foot-col a{display:block; font-size:14px; color:var(--ink-soft); margin-bottom:10px;}
.foot-col a:hover{color:var(--ink);}
.foot-col span.soon{display:block; font-size:14px; color:var(--ink-faint); margin-bottom:10px;}
.foot-base{margin-top:36px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-faint);}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:60px; padding:54px 0 70px;}
  .hero-copy{max-width:560px;}
  .stage{max-width:480px; margin:0 auto;}
  .hiw-grid{grid-template-columns:1fr; gap:18px;}
  .step-arrow{display:none;}
  .glance{grid-template-columns:1fr; gap:40px;}
  .bento{grid-template-columns:repeat(2,1fr);}
  .t-wide,.t-reg,.t-tall{grid-column:span 2; grid-row:auto;}
}
@media(max-width:560px){
  .wrap{padding:0 18px;}
  section.block{padding:56px 0;}
  .bento{grid-template-columns:1fr;}
  .t-wide,.t-reg,.t-tall{grid-column:span 1;}
  .float-a{right:-4px;} .float-b{left:-6px;}
  .cta-band{padding:48px 22px;}
  .hero-actions .btn, .cta-actions .btn{flex:1;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .food-card,.float-tag,.live-chip .pulse{animation:none !important;}
  .food-card{opacity:1; transform:none;}
  *{transition:none !important;}
}