/* ============================================================
   Ugly Duck Produce — shared stylesheet
   ============================================================ */
:root{
  --cream:#FFF4E1;
  --paper:#FFFDF8;
  --yolk:#FFC83D;
  --leaf:#3F7D4E;
  --leaf-dark:#2C5A37;
  --tomato:#E8503A;
  --plum:#8B3F8C;
  --ink:#1B1B1B;
  --line: 3px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Fredoka', sans-serif;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.01em;
}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- outline utility ---------- */
.toon{
  border:var(--line) solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:var(--line) solid var(--ink);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
}
.logo{display:flex; align-items:center; gap:10px; font-family:'Fredoka'; font-weight:700; font-size:22px; text-decoration:none;}
.logo img{width:44px; height:44px; flex-shrink:0;}
.navlinks{display:flex; gap:28px; font-weight:600; font-size:15px;}
.navlinks a{text-decoration:none; position:relative;}
.navlinks a:hover{color:var(--leaf-dark);}
.navlinks a.active{color:var(--tomato);}
.cta-btn{
  font-family:'Fredoka'; font-weight:600; font-size:15px;
  background:var(--yolk); color:var(--ink);
  border:var(--line) solid var(--ink);
  padding:10px 20px; border-radius:40px;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none; display:inline-block;
}
.cta-btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.cta-btn:active{transform:translate(0,0); box-shadow:2px 2px 0 var(--ink);}
.cta-btn.big{padding:16px 32px; font-size:19px; border-radius:50px;}
.cta-btn.tomato{background:var(--tomato); color:var(--paper);}
.cta-btn.leaf{background:var(--leaf); color:var(--paper);}
.cta-btn.ghost{background:var(--paper);}
.cta-btn:disabled{opacity:.6; cursor:not-allowed;}

@media (max-width: 760px){ .navlinks{display:none;} }

/* ---------- hero ---------- */
.hero{
  padding:70px 0 40px;
  position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.stamp{
  position:absolute;
  font-family:'Fredoka'; font-weight:700;
  color:var(--tomato);
  border:5px solid var(--tomato);
  border-radius:12px;
  padding:6px 16px;
  transform:rotate(-9deg);
  font-size:15px;
  letter-spacing:0.06em;
  opacity:0.9;
  top:6px; right:0;
}
.eyebrow{
  display:inline-block;
  background:var(--leaf); color:var(--paper);
  font-weight:600; font-size:13px;
  padding:6px 14px; border-radius:30px;
  border:2.5px solid var(--ink);
  margin-bottom:18px;
  transform:rotate(-2deg);
}
.eyebrow.yolk{background:var(--yolk); color:var(--ink);}
.eyebrow.tomato{background:var(--tomato);}
.eyebrow.plum{background:var(--plum);}
.hero h1{
  font-size:clamp(38px, 5.4vw, 62px);
  margin-bottom:20px;
}
.hero h1 .hl, .subhero h1 .hl{
  color:var(--paper);
  background:var(--tomato);
  padding:2px 10px;
  display:inline-block;
  border:var(--line) solid var(--ink);
  border-radius:8px;
  transform:rotate(-1.5deg);
}
.hero h1 .hl.leaf, .subhero h1 .hl.leaf{background:var(--leaf);}
.hero p.sub{
  font-size:19px; max-width:520px; margin-bottom:28px; line-height:1.5;
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px;}
.stat-row{display:flex; gap:14px; flex-wrap:wrap;}
.stat-chip{
  background:var(--paper); border:var(--line) solid var(--ink);
  border-radius:14px; padding:10px 16px;
  box-shadow:4px 4px 0 var(--ink);
  font-size:14px; font-weight:600;
}
.stat-chip b{font-family:'Fredoka'; font-size:20px; display:block; color:var(--leaf-dark);}

.hero-art{position:relative; display:flex; justify-content:center;}
.hero-art img{width:100%; max-width:440px; height:auto;}

/* ---------- sub-page hero (smaller, no illustration) ---------- */
.subhero{
  padding:56px 0 48px;
  border-bottom:var(--line) solid var(--ink);
}
.subhero.buyers{background:#FFE9C2;}
.subhero.sellers{background:#D9ECD6;}
.subhero.about{background:#F4E3F4;}
.subhero.faq{background:#FFE3DC;}
.subhero h1{font-size:clamp(32px,4.6vw,50px); margin-bottom:16px;}
.subhero p{font-size:18px; max-width:600px; line-height:1.5;}

/* ---------- marquee ---------- */
.marquee{
  background:var(--ink); color:var(--cream);
  padding:14px 0; overflow:hidden;
  border-top:var(--line) solid var(--ink); border-bottom:var(--line) solid var(--ink);
}
.marquee-track{
  display:flex; gap:40px; white-space:nowrap;
  animation:scroll 22s linear infinite;
  width:max-content;
  font-family:'Fredoka'; font-weight:600; font-size:18px;
}
.marquee-track span{display:flex; align-items:center; gap:14px;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ---------- how it works ---------- */
section{padding:80px 0;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head .eyebrow{background:var(--yolk);}
.section-head h2{font-size:clamp(30px,4vw,42px);}
.section-head p{font-size:17px; margin-top:12px; line-height:1.5;}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:860px){.steps{grid-template-columns:1fr;}}
.step-card{
  background:var(--paper); border:var(--line) solid var(--ink);
  border-radius:20px; padding:28px;
  box-shadow:7px 7px 0 var(--ink);
  position:relative;
  transition:transform .15s ease;
}
.step-card:hover{transform:translateY(-4px);}
.step-num{
  font-family:'Fredoka'; font-weight:700; font-size:15px;
  background:var(--ink); color:var(--cream);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.step-card h3{font-size:21px; margin-bottom:10px;}
.step-card p{font-size:15px; line-height:1.5;}
.step-card img{width:56px; height:56px; margin-bottom:14px;}

/* ---------- split paths ---------- */
.paths{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
@media (max-width:860px){.paths{grid-template-columns:1fr;}}
.path-card{
  border:var(--line) solid var(--ink); border-radius:22px;
  padding:34px; box-shadow:8px 8px 0 var(--ink);
  position:relative; overflow:hidden;
}
.path-card.buyers{background:#FFE9C2;}
.path-card.farms{background:#D9ECD6;}
.path-card .tag{
  font-family:'Fredoka'; font-weight:600; font-size:13px;
  display:inline-block; border:2.5px solid var(--ink);
  padding:4px 12px; border-radius:20px; margin-bottom:16px;
  background:var(--paper);
}
.path-card h3{font-size:26px; margin-bottom:12px;}
.path-card ul{margin:16px 0 22px 0; padding-left:0; list-style:none;}
.path-card li, .check-list li{
  font-size:15px; margin-bottom:10px; padding-left:28px; position:relative; line-height:1.4;
}
.path-card li::before, .check-list li::before{
  content:"✓"; position:absolute; left:0; top:0;
  font-weight:700; color:var(--leaf-dark);
  background:var(--paper); border:2px solid var(--ink);
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.check-list{list-style:none; padding-left:0;}

/* ---------- why section ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}
.why-card{
  background:var(--paper); border:var(--line) solid var(--ink); border-radius:18px;
  padding:22px; text-align:center; box-shadow:5px 5px 0 var(--ink);
}
.why-card img{width:44px; height:44px; margin-bottom:12px;}
.why-card h4{font-family:'Fredoka'; font-size:16px; margin-bottom:6px;}
.why-card p{font-size:13.5px; line-height:1.4;}

/* ---------- forms (buyer / seller intake) ---------- */
.form-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:32px; align-items:start;}
@media (max-width:900px){.form-grid{grid-template-columns:1fr;}}
.form-card{
  background:var(--paper); border:var(--line) solid var(--ink); border-radius:22px;
  padding:34px; box-shadow:8px 8px 0 var(--ink);
}
.form-card h2{font-size:26px; margin-bottom:8px;}
.form-card > p{font-size:15px; margin-bottom:26px; line-height:1.5;}
.field{margin-bottom:18px; display:flex; flex-direction:column; gap:6px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.field label{font-weight:600; font-size:14px;}
.field label .req{color:var(--tomato);}
.field input, .field select, .field textarea{
  padding:12px 16px; border-radius:12px; border:var(--line) solid var(--ink);
  font-family:'Space Grotesk'; font-size:15px; background:var(--paper); color:var(--ink);
  width:100%;
}
.field textarea{resize:vertical; min-height:100px;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:3px solid var(--yolk); outline-offset:2px;
}
.field-hint{font-size:12.5px; opacity:.7;}
.form-actions{margin-top:8px;}
.form-error{color:var(--tomato); font-size:14px; font-weight:600; margin-top:12px;}

.side-info{
  background:var(--paper); border:var(--line) solid var(--ink); border-radius:22px;
  padding:28px; box-shadow:8px 8px 0 var(--ink);
}
.side-info.buyers{background:#FFE9C2;}
.side-info.sellers{background:#D9ECD6;}
.side-info h3{font-size:20px; margin-bottom:14px;}
.side-info ul{margin:14px 0 0 0;}
.side-info .stat-row{margin-top:20px;}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex; flex-direction:column; gap:16px; max-width:820px;}
.faq-item{
  background:var(--paper); border:var(--line) solid var(--ink); border-radius:16px;
  padding:4px 22px; box-shadow:5px 5px 0 var(--ink);
}
.faq-item summary{
  font-family:'Fredoka'; font-weight:600; font-size:17px; padding:18px 0;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:24px; flex-shrink:0; line-height:1;}
.faq-item[open] summary::after{content:"\2013";}
.faq-item p{padding-bottom:18px; font-size:15px; line-height:1.6; max-width:680px;}
.faq-group-label{font-family:'Fredoka'; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--leaf-dark); margin:36px 0 16px;}
.faq-group-label:first-child{margin-top:0;}

/* ---------- about page ---------- */
.mission-block{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
@media (max-width:860px){.mission-block{grid-template-columns:1fr;}}
.mission-card{
  background:var(--paper); border:var(--line) solid var(--ink); border-radius:22px;
  padding:32px; box-shadow:8px 8px 0 var(--ink);
}
.mission-card img{width:80px; height:80px; margin-bottom:16px;}

/* ---------- cta / footer ---------- */
.cta-band{
  background:var(--leaf-dark); color:var(--paper);
  border-top:var(--line) solid var(--ink); border-bottom:var(--line) solid var(--ink);
  padding:70px 0; text-align:center;
}
.cta-band h2{font-size:clamp(28px,4vw,40px); margin-bottom:16px; color:var(--paper);}
.cta-band p{font-size:17px; max-width:520px; margin:0 auto 30px; opacity:.92;}
.form-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:520px; margin:0 auto;
}
.form-row input{
  flex:1; min-width:220px;
  padding:14px 18px; border-radius:40px;
  border:var(--line) solid var(--ink);
  font-family:'Space Grotesk'; font-size:15px;
  background:var(--paper); color:var(--ink);
}
.form-row input:focus{outline:3px solid var(--yolk); outline-offset:2px;}
.form-note{font-size:13px; margin-top:14px; opacity:.8;}

footer{padding:40px 0; }
.foot-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.foot-logo{display:flex; align-items:center; gap:10px; font-family:'Fredoka'; font-weight:700; font-size:18px; text-decoration:none;}
.foot-logo img{width:32px; height:32px;}
.foot-links{display:flex; gap:22px; font-size:14px; font-weight:600;}
.foot-links a{text-decoration:none;}
.foot-links a:hover{color:var(--leaf-dark);}
.foot-tag{font-size:13px; margin-top:18px; opacity:.75;}

.wobble{animation:wobble 4.5s ease-in-out infinite;}
@keyframes wobble{ 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);} }
@media (prefers-reduced-motion: reduce){ .wobble{animation:none;} }

/* ---------- thank you page ---------- */
.thanks-wrap{max-width:620px; margin:0 auto; text-align:center; padding:100px 28px 110px;}
.thanks-wrap .stamp-badge{
  display:inline-block; margin-bottom:24px;
}
.thanks-wrap h1{font-size:clamp(32px,5vw,48px); margin-bottom:18px;}
.thanks-wrap p{font-size:18px; line-height:1.5; margin-bottom:10px;}
.thanks-wrap .recap{
  margin:28px auto 34px; text-align:left; display:inline-block;
  background:var(--paper); border:var(--line) solid var(--ink); border-radius:18px;
  padding:20px 26px; box-shadow:6px 6px 0 var(--ink); font-size:14.5px;
}
.thanks-wrap .recap b{font-family:'Fredoka';}
.thanks-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:20px;}