:root{
  --paper: #F3EEDC;
  --paper-2: #ECE4CC;
  --ink: #2B2118;
  --soil: #3E2A1E;
  --leaf: #3F6B3F;
  --leaf-2: #8FA84E;
  --rust: #A8532E;
  --line: rgba(43,33,24,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* subtle paper grain */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(43,33,24,0.035) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(43,33,24,0.035) 0, transparent 40%);
}

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

.packet{
  max-width:640px;
  margin:0 auto;
  padding:0 24px 48px;
  position:relative;
  z-index:2;
}

/* top bar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 0 20px;
  border-bottom:1px solid var(--line);
}
.brandmark{
  display:flex; align-items:center; gap:8px;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:0.01em;
}
.brandmark-logo{
  height:42px;
  width:auto;
  display:block;
}
.topbar-tag{
  font-family:'Space Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.55;
  text-align:right;
}

/* hero */
.hero{
  text-align:center;
  padding-top:56px;
}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  color:var(--rust);
  margin:0 0 18px;
  border:1px solid var(--rust);
  display:inline-block;
  padding:5px 12px;
  border-radius:2px;
}

h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2.4rem, 8vw, 3.6rem);
  line-height:1.05;
  margin:0 0 20px;
  letter-spacing:-0.01em;
}

.ink-underline{
  position:relative;
  color:var(--leaf);
  font-style:italic;
  font-weight:600;
}
.ink-underline::after{
  content:"";
  position:absolute;
  left:-2%;
  bottom:0.06em;
  width:104%;
  height:0.32em;
  background:var(--leaf-2);
  opacity:0.35;
  z-index:-1;
  border-radius:2px;
}

.sub{
  font-size:1rem;
  line-height:1.6;
  max-width:440px;
  margin:0 auto 36px;
  opacity:0.82;
}

/* sprout illustration */
.sprout-plot{
  margin:0 auto 36px;
  width:220px;
}
.sprout-svg{ display:block; width:100%; height:auto; }

.stem-group{
  transform-origin:110px 150px;
  animation: sway 5.5s ease-in-out infinite;
}
@keyframes sway{
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.3deg); }
}

.stem{
  stroke-dasharray:110;
  stroke-dashoffset:110;
  animation: grow-stem 1.4s 0.2s cubic-bezier(.22,.9,.34,1) forwards;
}
.leaf{
  opacity:0;
  transform:scale(0.2);
  transform-box:fill-box;
  transform-origin:center;
  animation: unfurl 0.9s cubic-bezier(.22,.9,.34,1) forwards;
}
.leaf-left{ animation-delay:1.1s; transform-origin: 110px 118px;}
.leaf-right{ animation-delay:1.45s; transform-origin: 111px 96px;}
.leaf-vein{ opacity:0; animation: fade-in 0.6s forwards; }
.leaf-vein-left{ animation-delay:1.6s; }
.leaf-vein-right{ animation-delay:1.9s; }
.bud{
  opacity:0;
  transform:scale(0.3);
  transform-box:fill-box;
  transform-origin:center;
  animation: pop-bud 0.5s 2.1s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes grow-stem{ to{ stroke-dashoffset:0; } }
@keyframes unfurl{ to{ opacity:1; transform:scale(1); } }
@keyframes fade-in{ to{ opacity:0.5; } }
@keyframes pop-bud{ to{ opacity:1; transform:scale(1); } }

/* form */
.notify-form{
  display:flex;
  gap:8px;
  max-width:400px;
  margin:0 auto;
}
.notify-form input{
  flex:1;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  font-family:'Work Sans', sans-serif;
  font-size:0.92rem;
  color:var(--ink);
}
.notify-form input:focus{
  outline:2px solid var(--leaf);
  outline-offset:1px;
}
.notify-form button{
  background:var(--leaf);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:13px 18px;
  font-family:'Work Sans', sans-serif;
  font-weight:500;
  font-size:0.9rem;
  cursor:pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space:nowrap;
}
.notify-form button:hover{ background:#345a34; }
.notify-form button:active{ transform: scale(0.98); }
.notify-form button:focus-visible,
.socials a:focus-visible,
.whatsapp:focus-visible{
  outline:2px solid var(--rust);
  outline-offset:2px;
}

.form-msg{
  min-height:1.4em;
  font-size:0.85rem;
  color:var(--leaf);
  margin:12px 0 0;
}
.form-msg.error{ color:var(--rust); }

@media (max-width:420px){
  .notify-form{ flex-direction:column; }
}

/* footer */
.footer{
  margin-top:56px;
  padding-top:26px;
  border-top:1px solid var(--line);
  text-align:center;
}
.whatsapp{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--leaf);
  text-decoration:none;
  font-size:0.88rem;
  font-weight:500;
}
.socials{
  display:flex;
  justify-content:center;
  gap:14px;
  margin:16px 0;
}
.socials a{
  font-family:'Space Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.04em;
  color:var(--ink);
  opacity:0.6;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 9px;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.socials a:hover{ opacity:1; border-color:var(--ink); }

.copy{
  font-size:0.72rem;
  opacity:0.5;
  margin:0;
}

@media (prefers-reduced-motion: reduce){
  .stem-group, .stem, .leaf, .leaf-vein, .bud{
    animation:none !important;
  }
  .stem{ stroke-dashoffset:0; }
  .leaf, .leaf-vein, .bud{ opacity:1; transform:none; }
}