body{display:flex; flex-direction:column; align-items:center; min-height:100dvh;}

.page{
  position:relative; z-index:1; width:100%; max-width:520px;
  padding:18px 18px 60px; display:flex; flex-direction:column; align-items:center;
  flex:1;
}

.brandbar{
  display:flex; align-items:center; gap:10px; width:100%;
  margin-bottom:6px;
}
.brandbar__badge{
  width:36px; height:36px; border-radius:10px; background:var(--paper);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  flex:none; border:2px solid var(--orange);
}
.brandbar__badge img{width:100%; height:100%; object-fit:contain;}
.brandbar__text{line-height:1.15;}
.brandbar__text .t1{font-size:11px; letter-spacing:1.5px; color:var(--orange-2); text-transform:uppercase; font-weight:700;}
.brandbar__text .t2{font-family:'Bebas Neue',sans-serif; font-size:16px; color:var(--paper);}

.hero{text-align:center; margin:14px 0 6px;}
.hero__stamp{font-size:46px; line-height:1;}
.hero h1{
  font-family:'Bebas Neue',sans-serif; letter-spacing:1px;
  font-size:38px; margin:6px 0 2px; color:var(--paper);
}
.hero h1 span{color:var(--rosa); text-shadow:0 0 18px rgba(255,111,145,.55);}
.hero p{font-size:14px; color:var(--paper-2); margin:0; opacity:.9;}

.card{
  width:100%; background:var(--paper); color:var(--ink);
  border-radius:20px; padding:22px 20px 24px; margin-top:18px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.08);
  position:relative;
}
.card::before{
  content:""; position:absolute; inset:8px; border:1.5px dashed rgba(107,67,38,.35);
  border-radius:13px; pointer-events:none;
}

.field{margin-bottom:16px;}
.field label{
  display:flex; align-items:center; gap:6px;
  font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase;
  color:var(--wood); margin-bottom:7px;
}
.field input, .field textarea{
  width:100%; font-family:'Montserrat',sans-serif; font-size:15px;
  padding:12px 14px; border-radius:12px; border:1.5px solid rgba(107,67,38,.3);
  background:#fffdf7; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus{
  border-color:var(--rosa); box-shadow:0 0 0 3px rgba(255,111,145,.18);
}
.field textarea{
  min-height:150px; resize:vertical; line-height:1.5; font-family:'Caveat',cursive; font-size:20px;
}
.field .hint{font-size:11px; color:#8a7657; margin-top:5px;}
.field .counter{font-size:11px; color:#8a7657; text-align:right; margin-top:4px;}
.field .counter.limit{color:var(--vermelho); font-weight:700;}

.anon-toggle{
  display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12.5px; color:var(--wood);
  user-select:none; cursor:pointer;
}
.anon-toggle input{width:16px; height:16px; accent-color:var(--rosa);}

.submit-row{margin-top:6px; display:flex; flex-direction:column; align-items:center; gap:10px;}
.submit-row .btn{width:100%;}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.foot-note{
  margin-top:22px; text-align:center; font-size:11px; color:var(--paper-2); opacity:.75;
  line-height:1.6; max-width:380px;
}

/* --- success state --- */
.success{
  display:none; flex-direction:column; align-items:center; text-align:center;
  margin-top:26px; animation:pop .5s cubic-bezier(.2,.8,.2,1.2);
}
.success.show{display:flex;}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.95);} to{opacity:1; transform:none;}}
.success__envelope{font-size:70px; animation:fly 1.6s ease-in-out infinite;}
@keyframes fly{0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-10px) rotate(4deg);}}
.success h2{font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--paper); margin:12px 0 4px;}
.success p{font-size:14px; color:var(--paper-2); max-width:340px; margin:0 0 18px;}

@media (max-width:380px){
  .hero h1{font-size:32px;}
}