@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Karla:wght@400;500;600;700&display=swap');

:root{
  --bg: #F5F1E2;
  --bg-card: #FFFDF7;
  --ink: #2B2318;
  --ink-soft: #6B6151;
  --green: #3F6444;
  --green-deep: #2C4830;
  --green-soft: #DCE6D0;
  --orange: #E2672A;
  --orange-soft: #F6D9C4;
  --yellow: #E8B84B;
  --line: rgba(43,35,24,0.12);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

em{
  font-style: italic;
  font-weight: 500;
  color: var(--green-deep);
}

a{ color: inherit; }

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- NAV ---------- */
nav{
  padding: 28px 0 0;
}
nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wordmark{
  font-family:'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-block;
}
.wordmark span{ color: var(--orange); }
.nav-note{
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-deep);
  background: var(--green-soft);
  padding: 7px 14px 7px 10px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--orange);
  display:inline-block;
}

.btn, button.btn, input[type="submit"].btn{
  appearance:none;
  border:none;
  cursor:pointer;
  font-family:'Karla', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #FFFDF7;
  background: var(--orange);
  padding: 16px 28px;
  border-radius: 12px;
  box-shadow: 0 3px 0 #B54E1D;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-decoration: none;
  display: inline-block;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 5px 0 #B54E1D; }
.btn:active{ transform: translateY(1px); box-shadow: 0 1px 0 #B54E1D; }
.btn:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }

footer{
  padding: 0 0 48px;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}

:focus-visible{
  outline: 2.5px solid var(--green-deep);
  outline-offset: 3px;
}
/* ---------- HERO ---------- */
.hero{
  padding: 64px 0 40px;
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items:center;
}
h1{
  font-size: 52px;
  line-height: 1.06;
  max-width: 620px;
}
.sub{
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 460px;
}

.cta-row{
  margin-top: 34px;
  display:flex;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
}
.cta-hint{
  font-size: 13.5px;
  color: var(--ink-soft);
}
.cta-hint strong{ color: var(--ink); font-weight: 600; }

/* ---------- FRIDGE ILLUSTRATION (signature element) ---------- */
.fridge-stage{
  position: relative;
  height: 460px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fridge{
  position: relative;
  width: 340px;
  height: 420px;
  background: linear-gradient(180deg, #FDFBF5 0%, #F6F1E6 100%);
  border-radius: 22px;
  border: 1.5px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(43,35,24,0.25), 0 2px 0 rgba(255,255,255,0.6) inset;
  transform-style: preserve-3d;
}
.fridge::before{
  content:"";
  position:absolute;
  left: -11px; top: 46px;
  width: 9px; height: 130px;
  background: #D8CFB8;
  border-radius: 6px;
  box-shadow: -1px 0 2px rgba(0,0,0,0.08);
}

.card{
  position:absolute;
  background: var(--bg-card);
  border-radius: 10px;
  box-shadow: 0 10px 22px -8px rgba(43,35,24,0.25);
  border: 1px solid var(--line);
  padding: 14px 14px 12px;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.card:hover{
  transform: translateY(-6px) rotate(0deg) !important;
}

.magnet{
  position:absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  z-index: 3;
}

.card-recipe{
  top: 26px; left: 24px;
  width: 168px;
  transform: rotate(-6deg);
  z-index: 2;
}
.card-recipe .magnet{ background: var(--orange); top: -10px; left: 66px; }
.card-recipe .tag{
  font-size: 10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color: var(--green-deep); background: var(--green-soft);
  display:inline-block; padding: 3px 7px; border-radius: 5px; margin-bottom: 8px;
}
.card-recipe h4{
  font-family:'Fraunces', serif; font-weight:500; font-size: 16px; margin: 0 0 8px;
  line-height: 1.2;
}
.card-recipe .lines span{
  display:block; height:6px; border-radius:3px; background: var(--line); margin-bottom:6px;
}
.card-recipe .lines span:nth-child(2){ width: 70%; }
.card-recipe .lines span:nth-child(3){ width: 45%; }

.card-calendar{
  top: 168px; right: -18px;
  width: 150px;
  transform: rotate(5deg);
  z-index: 3;
}
.card-calendar .magnet{ background: var(--yellow); top: -10px; left: 62px; }
.card-calendar h4{
  font-family:'Fraunces', serif; font-weight:500; font-size: 14px; margin: 0 0 10px;
}
.mini-week{
  display:grid; grid-template-columns: repeat(7,1fr); gap:4px;
}
.mini-week i{
  display:block; height: 16px; border-radius: 3px; background: var(--green-soft);
  font-style: normal;
}
.mini-week i.on{ background: var(--green); }

.card-list{
  bottom: -22px; left: 6px;
  width: 190px;
  transform: rotate(-3deg);
  z-index: 4;
  padding-bottom: 16px;
}
.card-list .magnet{ background: var(--green); top: -10px; left: 90px; }
.card-list h4{
  font-family:'Fraunces', serif; font-weight:500; font-size: 14px; margin:0 0 10px;
}
.checkitem{
  display:flex; align-items:center; gap:8px; margin-bottom:7px; font-size: 12px; color: var(--ink-soft);
}
.checkitem .box{
  width: 12px; height:12px; border-radius:3px; border: 1.5px solid var(--ink-soft); flex:none;
}
.checkitem.done .box{ background: var(--orange); border-color: var(--orange); }
.checkitem.done{ text-decoration: line-through; text-decoration-color: var(--line); }

/* ---------- HOW IT WORKS ---------- */
.how{
  padding: 96px 0 60px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.how-head{
  max-width: 520px;
  margin-bottom: 56px;
}
.how-head .eyebrow{ background: var(--orange-soft); color: #9A4416; }
.how-head .eyebrow .dot{ background: var(--green); }
.how-head h2{
  font-size: 34px;
  line-height: 1.15;
}

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.step{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 26px 28px;
  position: relative;
}
.step .num{
  font-family:'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--orange);
  margin-bottom: 18px;
  display:block;
}
.step .icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--green-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
}
.step h3{
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.25;
}
.step p{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- FOOTER CTA ---------- */
.footer-cta{
  margin: 40px 0 90px;
  background: var(--green-deep);
  border-radius: 24px;
  padding: 56px 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 32px;
  flex-wrap: wrap;
  color: #FBF6E9;
}
.footer-cta h2{
  font-size: 28px;
  color: #FBF6E9;
  max-width: 380px;
  line-height: 1.2;
}
.footer-cta .btn{
  background: var(--yellow);
  color: var(--green-deep);
  box-shadow: 0 3px 0 #B98F2E;
}
.footer-cta .btn:hover{ box-shadow: 0 5px 0 #B98F2E; }

@media (max-width: 880px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .fridge-stage{ height: 380px; order: -1; }
  h1{ font-size: 38px; }
  .steps{ grid-template-columns: 1fr; }
  .footer-cta{ padding: 40px 28px; }
}
/* ---------- FORM PAGE ---------- */
.form-page{
  padding: 56px 0 90px;
}
.form-head{
  max-width: 560px;
  margin-bottom: 40px;
}
.form-head h1{
  font-size: 38px;
  line-height: 1.15;
}
.form-head .sub{
  margin-top: 14px;
  font-size: 16px;
}

.form-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 40px 40px;
  max-width: 720px;
}

.field{
  margin-bottom: 28px;
}
.field label,
.field legend{
  display:block;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 10px;
  padding: 0;
  border: none;
}
.field .hint{
  font-size: 13px;
  color: var(--ink-soft);
  margin: -6px 0 12px;
}
.optional-hint{
  font-family: 'Karla', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-soft);
}

.field input[type="email"],
.field select{
  width: 100%;
  max-width: 340px;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--ink);
}
.field input[type="email"]:focus,
.field select:focus{
  border-color: var(--green);
}

.diet-options{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.diet-option{
  position: relative;
}
.diet-option input{
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.diet-option span{
  display:inline-block;
  padding: 10px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #FFFFFF;
  transition: all 0.12s ease;
}
.diet-option input:checked + span{
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green-deep);
}
.diet-option input:focus-visible + span{
  outline: 2.5px solid var(--green-deep);
  outline-offset: 2px;
}

.meals-table{
  width: 100%;
  border-collapse: collapse;
}
.meals-table th{
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0 10px 10px;
}
.meals-table th.day-col{ width: 40%; }
.col-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.select-all{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink-soft);
}
.select-all input{
  width: 14px; height: 14px;
  accent-color: var(--green);
  cursor: pointer;
}
.select-all:hover{ color: var(--green-deep); }
.meals-table td{
  padding: 10px;
  border-top: 1px solid var(--line);
}
.meals-table td.day-col{
  font-weight: 600;
  text-transform: capitalize;
}
.meal-checkbox{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
}
.meal-checkbox input{
  width: 18px; height: 18px;
  accent-color: var(--green);
}

.error-banner{
  background: var(--orange-soft);
  border: 1.5px solid var(--orange);
  color: #9A4416;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  font-size: 14.5px;
}
.error-banner ul{
  margin: 6px 0 0;
  padding-left: 18px;
}

.form-actions{
  margin-top: 8px;
}

@media (max-width: 880px){
  .form-card{ padding: 28px 22px 32px; }
  .meals-table{ font-size: 13px; }
}

/* ---------- CONFIRMATION PAGE ---------- */
.confirmation{
  padding: 110px 0;
  text-align: center;
}
.confirmation .icon-badge{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--green-soft);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 24px;
}
.confirmation h1{
  font-size: 34px;
  max-width: 520px;
  margin: 0 auto 14px;
}
.confirmation p{
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 460px;
  margin: 0 auto;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */