:root{
  --bg-overlay: rgba(0,0,0,0.12);
  --cream: #f7efe6;
  --muted: #9aa3a3;
  --navy: #0f3550;
  --panel-shadow: rgba(15,53,80,0.18);
}
*{box-sizing:border-box}
html,body{height:100%}
.body-bg{background-image: url('/static/mobile.png');background-size:auto;background-position:center}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
  min-height:100vh;
}
.hero{width:100%;max-width:680px;text-align:center;color:#082233;position:relative}


.mailbox-art{margin:6px auto 18px}

.content{padding:18px 12px;margin-top:80px}

.headline{font-family:'Playfair Display', Georgia, serif;font-size:clamp(28px, 4.8vw, 56px);line-height:1.02;margin:12px 0 22px;color:var(--cream);font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,0.06)}

.cta{display:flex;gap:14px;align-items:center;justify-content:center}
.cta-input{flex:1;min-width:260px;padding:14px 18px;border-radius:12px;border:0;background:var(--cream);color:#2b3b3f;font-size:clamp(14px,2.6vw,18px);box-shadow:inset 0 1px 0 rgba(0,0,0,0.03)}
.cta-input::placeholder{color:var(--muted)}
.cta-btn{background:var(--navy);color:var(--cream);border:0;padding:12px 20px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px var(--panel-shadow)}

.greeting{margin-top:28px;font-size:clamp(14px,2.4vw,18px);color:var(--cream)}
.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}

/* overlay and verify modal */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.45);backdrop-filter:blur(2px);z-index:40}
.overlay.hidden{display:none}
.verify-modal{background:var(--cream);border-radius:12px;padding:20px;min-width:320px;max-width:420px;box-shadow:0 18px 50px rgba(2,6,23,0.3)}
.verify-body h2{margin:0 0 12px;font-family:'Playfair Display', Georgia, serif;color:#102b36}
.verify-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);margin-bottom:12px}
.verify-actions{text-align:right}
.verify-btn{background:var(--navy);color:var(--cream);border:0;padding:8px 14px;border-radius:8px;cursor:pointer}

/* small sending animation */
.sending{opacity:0.6;transform:translateY(4px)}

/* result message */
.result-message{position:fixed;left:50%;transform:translateX(-50%);bottom:36px;background:rgba(16,24,40,0.9);color:var(--cream);padding:12px 18px;border-radius:8px;box-shadow:0 10px 30px rgba(2,6,23,0.35);z-index:45;opacity:0;transition:opacity .18s ease}
.result-message.visible{opacity:1}
.result-message.hidden{display:none}

@media (max-width:520px){
  .headline{font-size:28px}
  .content{margin-top:40px}
  .cta{flex-direction:column;padding:0}
  .cta-btn{width:100%}
}

/* apply background wrapper to the body via a small helper class in the template */
.page{width:100%;max-width:980px}

/* large rounded panel */
.panel{
  background:linear-gradient(180deg,#eef0f2 0%, #d7dbe0 40%, #bfc6d0 100%);
  border-radius:14px;
  padding:48px 36px;
  box-shadow:0 18px 60px rgba(15,23,42,0.06);
}

.letterbox-wrap{display:flex;justify-content:center}
.letterbox{
  width:100%;
  max-width:700px;
  height:120px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* dark slot */
.slot{width:86%;height:42px;background:#0f172a;border-radius:10px;position:relative;box-shadow:inset 0 6px 18px rgba(2,6,23,0.7), 0 8px 30px rgba(2,6,23,0.08);display:flex;align-items:center;justify-content:center}
.slot-inner{width:86%;height:22px;background:linear-gradient(180deg,#0b1220,#1e293b);border-radius:8px;box-shadow:inset 0 3px 10px rgba(0,0,0,0.6)}

/* paper card centered above the slot */
.paper{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  width:66%;
  background:var(--box);
  border-radius:8px;
  padding:14px 14px;
  box-shadow:0 12px 30px rgba(15,23,42,0.12);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(15,23,42,0.04);
}
.paper:focus-within{transform:translateX(-50%) translateY(-6px);box-shadow:0 30px 60px rgba(15,23,42,0.14)}

.paper-label{display:none}
.paper-input{flex:1;padding:14px 16px;border:1px solid #f0f1f3;border-radius:8px;font-size:15px;background:linear-gradient(#ffffff,#fbfbfb);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
.paper-input::placeholder{color:#9aa3ad}

.paper-btn{margin-left:12px;background:#101827;color:#fff;border:0;padding:10px 16px;border-radius:10px;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(255,255,255,0.02), 0 8px 20px rgba(2,6,23,0.12)}
.paper-btn:hover{filter:brightness(0.96)}

.greeting{margin-top:20px;font-size:18px;color:#111827;text-align:center}
.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}

/* responsive */
@media (max-width:620px){
  .panel{padding:28px}
  .paper{width:86%}
  .slot{width:92%}
}