/* FRO Palm Wine – simple landing page */
/* Colors approximated from screenshots */
:root{
  --purple:#3c1f85;        /* page background */
  --purple-2:#3c1f85;      /* alt */
  --cream:#feedbb;         /* main headings/text */
  --copy:#feedbb;          /* body copy */
  --lavender:#e6daf6;      /* input bg */
  --green:#137700;         /* buttons */
  --green-hover:#137700;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background:var(--purple);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

main{display:block}

.container{
  width:min(1040px, 90%);
  margin:0 auto;
}

.narrow{width:min(820px, 90%)}

/* HERO */
.hero{
  padding:56px 0 40px;
  text-align:center;
}

.eyebrow{
  margin:0;
  font-weight:600;
  letter-spacing:.2px;
  opacity:.95;
}

.headline{
  font-size: clamp(40px, 7vw, 72px);
  line-height:1.05;
  margin:12px 0 10px;
  font-weight:800;
}

.logo{
  width:min(520px, 80%);
  height:auto;
  display:block;
  margin: 16px auto;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.35));
}

.tagline{
  font-size: clamp(28px, 5.5vw, 48px);
  line-height:1.15;
  margin:12px 0 8px;
  font-weight:800;
}

.subcopy1{
  color:#e5bd79;
  font-size:clamp(20px, 4vw, 25px);
  line-height:1.5;
  margin: 0px 0 0px;
}

.subcopy{
  color:#e5bd79;
  font-size:clamp(18px, 3.8vw, 22px);
  line-height:1.5;
  margin: 12px 0 18px;
}

.signup{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin:18px auto 16px;
  flex-wrap:wrap;
  width:min(820px, 95%);
}

.signup input{
  flex:1 1 520px;
  background:var(--lavender);
  color:#2b2540;
  padding:18px 18px;
  border:none;
  border-radius:16px;
  font-size:18px;
  outline:none;
  box-shadow: var(--shadow);
}

.signup button{
  flex:0 0 auto;
  padding:18px 32px;
  border-radius:16px;
  border:none;
  font-weight:700;
  font-size:20px;
  cursor:pointer;
  background:var(--green);
  color:#fff;
  box-shadow: var(--shadow);
}

.signup button:hover{background:var(--green-hover)}

.site-pill{
  display:inline-block;
  margin-top:10px;
  padding:10px 18px;
  border-radius:28px;
  background:#137700;
  color:#feedbb;
  text-decoration:none;
  font-weight:600;
  box-shadow: var(--shadow);
}

.site-pill--bottom{display:block; width:max-content; margin:22px auto 0}

/* RETAIL */
.retail{
  padding: 36px 0 24px;
}

.retail h3{
  font-size: clamp(26px, 5vw, 36px);
  margin:0 0 8px;
  font-weight:800;
}

.retail-copy{
  color:#e5bd79;
  font-size:18px;
  line-height:1.6;
  margin-bottom:18px;
}

.contact{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  max-width:760px;
}

.contact input, .contact textarea{
  background:var(--lavender);
  color:#2b2540;
  padding:16px 16px;
  border-radius:12px;
  border:none;
  font-size:16px;
  outline:none;
  box-shadow: var(--shadow);
}

.contact textarea{grid-column:1 / -1}

.contact .submit{
  grid-column:1 / span 1;
  width:120px;
  justify-self:start;
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:16px;
  padding:14px 18px;
  font-weight:700;
  cursor:pointer;
  box-shadow: var(--shadow);
}

.contact .submit:hover{background:var(--green-hover)}

@media (max-width: 680px){
  .contact{grid-template-columns: 1fr;}
  .contact .submit{grid-column:1}
}

/* STORY */
.story{
  padding: 24px 0 80px;
}

.story h3{
  text-align:center;
  font-size: clamp(28px, 5.6vw, 40px);
  margin:8px 0 18px;
  font-weight:800;
}

.story p{
  color:var(--copy);
  font-size:18px;
  line-height:1.8;
  margin: 10px 0;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px 0;
  text-align:center;
  color:rgba(255,255,255,.8)
}

.sr-only{
  position:absolute !important;
  height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);
  white-space:nowrap
}

/* small tweak for long lines at mobile */
.br-mobile{display:none}
@media (max-width:520px){
  .br-mobile{display:block}
}