/* the front door: deep-sea panel with the pearl, then the form. Phone = stacked, desktop = two halves. */
.gate { min-height:100dvh; display:grid; grid-template-rows:auto 1fr; background:var(--paper); }
.hero { position:relative; overflow:hidden; background:radial-gradient(120% 90% at 85% 0%, var(--sea-2) 0%, var(--sea) 62%); color:var(--on-sea); padding:calc(22px + env(safe-area-inset-top)) 22px 64px; }
.hero::before { content:""; position:absolute; inset:auto -30% -55% -30%; height:70%; background:radial-gradient(closest-side, rgba(179,233,228,.20), rgba(179,233,228,0)); pointer-events:none; }
.hero .wordmark { color:var(--on-sea); }
.hero-body { position:relative; max-width:30em; margin-top:42px; }
.hero h1 { color:var(--on-sea); font-size:clamp(32px,8.4vw,52px); line-height:1.2; margin:0 0 12px; }
.hero h1 em { font-style:normal; background:var(--nacre); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--on-sea-soft); margin:0; font-size:17px; max-width:28em; }
.hero > .hero-mark { position:absolute; inset-inline-end:20px; top:calc(14px + env(safe-area-inset-top)); width:78px; height:68px; color:var(--on-sea); animation:float 7s ease-in-out infinite; }
.hero .wm { height:34px; width:82px; }
@keyframes float { 50% { transform:translateY(-10px); } }
.door { margin-top:-34px; position:relative; background:var(--paper); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:26px 20px calc(30px + env(safe-area-inset-bottom)); }
.door-in { max-width:420px; margin:0 auto; }
.tabs { display:grid; grid-template-columns:1fr 1fr; background:var(--sunk); border-radius:999px; padding:4px; }
.tabs button { font:600 15px var(--body); border:0; background:transparent; color:var(--soft); border-radius:999px; min-height:44px; cursor:pointer; }
.tabs button[aria-selected=true] { background:var(--panel); color:var(--ink); box-shadow:var(--shadow); }
.door h2 { font:700 22px var(--display); color:var(--ink); margin:22px 0 2px; } .door .lede { color:var(--soft); margin:0 0 4px; font-size:15px; }
.terms { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--soft); margin-top:14px; line-height:1.6; }
.terms input { flex:none; width:22px; height:22px; margin:2px 0 0; accent-color:var(--primary); } .terms a { color:var(--primary); }
.fine { font-size:13px; color:var(--soft); margin:14px 0 0; text-align:center; }
#gBtn { display:flex; justify-content:center; min-height:44px; margin-top:20px; } .gwrap .hint { text-align:center; margin:8px 0 0; }
.or { display:flex; align-items:center; gap:12px; color:var(--soft); font-size:13px; margin:16px 0 -6px; } .or::before, .or::after { content:""; flex:1; height:1px; background:var(--rule); }
@media (min-width:900px) {
  .gate { grid-template-columns:1.05fr 1fr; grid-template-rows:1fr; }
  .hero { padding:44px 56px; display:flex; flex-direction:column; justify-content:space-between; }
  .hero-body { margin:0; max-width:32em; } .hero h1 { font-size:clamp(44px,4.6vw,64px); }
  .hero > .hero-mark { width:190px; height:164px; inset-inline-end:64px; inset-inline-start:auto; top:70px; }
  .hero .wm { height:40px; width:96px; }
  .door { margin:0; border-radius:0; display:grid; place-items:center; padding:48px; }
}

.gate-saved { background:var(--primary-soft); border-radius:var(--r); padding:10px 14px; font:600 15px var(--body); margin:16px 0 0; color:var(--ink); }