*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:
    radial-gradient(ellipse 70% 55% at 18% 12%, #F7DBDDCC 0%, #F7DBDD00 70%),
    radial-gradient(ellipse 65% 55% at 88% 88%, #C9E4DACC 0%, #C9E4DA00 70%),
    radial-gradient(ellipse 60% 50% at 82% 18%, #E8E2F0E6 0%, #E8E2F000 70%),
    radial-gradient(ellipse 55% 45% at 12% 85%, #F6EDE8 0%, #F6EDE800 70%),
    #F7F4EF;
  background-attachment:fixed;
  color:#252126;
  font-family:"Inter",Arial,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  min-height:100vh;min-height:100svh;
  max-width:440px;margin:0 auto;
  padding:max(40px,env(safe-area-inset-top,0px)) 18px max(40px,env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;
}
.logo{display:block;width:150px;height:auto}
h1{margin:0;font-size:36px;font-weight:650;line-height:1.05;letter-spacing:-.052em;text-wrap:balance}
h1 em{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:#9C8AAD;letter-spacing:-.02em}
.lead{margin:0;font-size:16px;line-height:1.5;color:#4A3D4F}
.fine{margin:0;font-size:13px;color:#6E625F}

/* Marble — same glass treatment as the app */
.orb{display:block;flex:none;position:relative;width:160px;aspect-ratio:1;margin:8px 0;border-radius:50%;overflow:hidden;border:1px solid #FFFFFF82;
  --c1:#C9B8EC;--c2:#F0B8A6;--c3:#EBC99C;--c4:#A9D8C2;
  background:radial-gradient(ellipse at 22% 18%, #FFFFFFD4 0%, #FFFFFF65 12%, transparent 39%),
    conic-gradient(from 48deg at 49% 53%, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  box-shadow:inset -14px -17px 26px #29234718, inset 10px 11px 18px #FFFFFFAD, 2px 15px 24px #47404E30}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 32% 22%, #FFFFFFA9 1%, transparent 29%), radial-gradient(ellipse at 84% 75%, #3C415E40, transparent 60%), radial-gradient(ellipse at 48% 50%, transparent 30%, #FFFFFF5C 93%)}
.orb::after{content:"";position:absolute;width:38%;height:16%;top:10%;left:19%;border-radius:50%;background:#FFFFFF9C;filter:blur(6px);transform:rotate(-25deg)}

/* Form */
form{width:100%;display:flex;flex-direction:column;gap:10px}
#fields{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.field input{width:100%;min-height:52px;padding:0 22px;font:inherit;font-size:16px;color:#252126;background:#FFFEFA;border:1px solid #E7DEDC;border-radius:100px;text-align:center}
.field input::placeholder{color:#8A8086}
.field input[aria-invalid="true"]{border-color:#B0566A}
.error{margin:0;font-size:13px;color:#9A3E52}
.status{margin:0;font-size:14px;color:#6E625F}
.btn{width:100%;min-height:52px;padding:14px 22px;font:inherit;font-size:15px;font-weight:650;color:#fff;background:#29272A;border:1px solid transparent;border-radius:100px;cursor:pointer;transition:background .2s ease,transform .2s ease}
.btn:hover{background:#484047;transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
input:focus-visible,.btn:focus-visible{outline:3px solid #BA98D6;outline-offset:3px}
.thanks{width:100%;padding:18px 22px;background:#FFFEFAD9;border:1px solid #EDE6E0;border-radius:26px;font-size:16px;line-height:1.5;color:#4A3D4F}
.thanks p{margin:0}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}