/* Shared look for the small storefront pages (verify, recover, success).
   The landing page carries its own copy of these styles plus its extras. */
:root { color-scheme: dark; --ink: #12091a; --pink: #ff3fa4; --lime: #d4ff3a; --paper: #f6e9f1; --plum: #b0247a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; color: #fdf2f8; -webkit-font-smoothing: antialiased;
  font-family: 'Chakra Petch', system-ui, sans-serif;
  background: radial-gradient(120% 55% at 50% 0%, #4a1450 0%, #1c0b24 45%, var(--ink) 70%) var(--ink);
}
a { color: #ff7ac6; text-underline-offset: 3px; }
a:hover { color: var(--lime); }
input, button { font: inherit; }
input::placeholder { color: #a27c96; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }

@keyframes cm-blink { 50% { opacity: .2 } }
@keyframes cm-pop { 0% { transform: scale(.6); opacity: 0 } 70% { transform: scale(1.04) } 100% { transform: scale(1); opacity: 1 } }

.grid { position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; pointer-events: none; perspective: 300px; overflow: hidden; opacity: .5; z-index: 0; }
.grid div {
  position: absolute; left: -50%; right: -50%; top: 0; bottom: -80%; transform: rotateX(64deg); transform-origin: top;
  background-image: linear-gradient(var(--pink) 1px, transparent 1px), linear-gradient(90deg, var(--pink) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%);
}

main { position: relative; z-index: 1; max-width: 460px; margin: 0 auto; padding: 18px 14px 28px; display: flex; flex-direction: column; gap: 18px; }

.home { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; align-self: flex-start; }
.home .cunty { font: 900 italic 40px/1 'Bodoni Moda', serif; letter-spacing: -.05em; color: #fff; text-shadow: 0 0 14px rgba(255, 63, 164, .5); }
.home .dotcom { font: 400 24px/1 'VT323', monospace; color: var(--ink); background: var(--pink); padding: 0 6px 1px; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--lime); }

.window { background: var(--paper); color: var(--ink); border: 2px solid #fff; border-radius: 6px; box-shadow: 0 0 0 2px var(--ink), 6px 6px 0 2px var(--pink), 0 0 40px rgba(255, 63, 164, .35); overflow: hidden; animation: cm-pop .4s ease-out; }
.titlebar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 10px; background: linear-gradient(90deg, var(--pink), #b03ad8); color: #fff; font: 400 18px/1 'VT323', monospace; }
.titlebar .ctl { display: flex; gap: 4px; }
.titlebar .ctl span { width: 16px; height: 14px; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); font: 400 14px/12px 'VT323', monospace; text-align: center; }
.body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.body form { display: flex; flex-direction: column; gap: 10px; }

.kicker { font: 400 18px/1 'VT323', monospace; color: var(--plum); }
h1 { margin: 0; font: 900 italic 34px/1.02 'Bodoni Moda', serif; letter-spacing: -.03em; }
.lede { margin: 0; font: 500 14px/1.5 'Chakra Petch', sans-serif; color: #3d2636; text-wrap: pretty; }
.lede a, .fine a { color: var(--plum); }

.label { margin-top: 4px; font: 700 11px/1 'Chakra Petch', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.addr { display: flex; align-items: baseline; flex-wrap: wrap; background: #fff; border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .12); padding: 10px 12px; gap: 2px; }
.addr:focus-within { outline: 3px solid var(--pink); outline-offset: 1px; }
.addr input { flex: 1 1 120px; min-width: 0; border: 0; outline: 0; background: transparent; font: 900 italic 26px/1.1 'Bodoni Moda', serif; letter-spacing: -.03em; color: var(--ink); padding: 0; }
.addr .domain { flex: none; font: 400 20px/1 'VT323', monospace; color: var(--plum); }
.field { min-height: 52px; border: 2px solid var(--ink); background: #fff; padding: 0 12px; font: 600 16px/1 'Chakra Petch', sans-serif; color: var(--ink); outline: 0; }
.field:focus { outline: 3px solid var(--pink); outline-offset: 1px; }

.cta { min-height: 56px; margin-top: 4px; border: 2px solid var(--ink); background: var(--pink); color: var(--ink); font: 700 17px/1 'Chakra Petch', sans-serif; letter-spacing: .02em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--ink); transition: background .2s; }
.cta:hover:not(:disabled) { background: var(--lime); }
.cta:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
a.cta { display: flex; align-items: center; justify-content: center; text-decoration: none; }

.msg { min-height: 20px; margin: 0; font: 700 13px/1.4 'Chakra Petch', sans-serif; color: #7a5a6f; }
.msg.err { color: #c0164f; }
.msg.ok { color: #2f7a00; }
.fine { margin: 0; font: 500 11.5px/1.45 'Chakra Petch', sans-serif; color: #5a3b50; text-wrap: pretty; }

footer { display: flex; flex-direction: column; gap: 8px; font: 500 12px/1.4 'Chakra Petch', sans-serif; color: #d9b3cc; }
footer .links { display: flex; gap: 14px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}