*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #0f172a;
    color: #e2e8f0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

main { width: 100%; max-width: 540px; }

.card {
    background: #1e293b;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

h1 {
    font-size: 1.25rem;
    font-weight: 400;
    color: #94a3b8;
    margin-bottom: 0.25rem;
    text-align: center;
}

.domain-name {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-top: 0.25rem;
}

.tagline {
    text-align: center;
    color: #64748b;
    margin-bottom: 1rem;
}

.price {
    text-align: center;
    font-size: 1.1rem;
    color: #38bdf8;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #334155;
}

.field { margin-bottom: 1rem; }

label {
    display: block;
    font-size: 0.875rem;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

.req { color: #f87171; }

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

input:focus, textarea:focus {
    outline: none;
    border-color: #38bdf8;
}

textarea { resize: vertical; }

.ohnohoney {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
    overflow: hidden;
}

button {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
}

button:hover { background: #1d4ed8; }

/* "How this works" section — text styled to match form labels for
   visual uniformity. Links inherit the surrounding color and use
   underline for affordance, so they don't compete with the button's
   blue. Generous breathing room above the section so it doesn't feel
   bolted onto the form. */
.how-it-works {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #334155;
    color: #94a3b8;          /* same as form labels */
    font-size: 0.875rem;     /* same as form labels */
    line-height: 1.65;
}
.how-it-works h3 {
    font-size: 0.875rem;     /* match label size */
    color: #94a3b8;          /* match label color */
    font-weight: 600;
    margin-bottom: 1rem;
}
.how-it-works ol {
    padding-left: 1.25rem;
    margin: 0;
}
.how-it-works li { margin-bottom: 0.75rem; }
.how-it-works li:last-child { margin-bottom: 0; }
/* Links inherit color so they don't fight the page palette; underline
   distinguishes them as links without adding a competing color. */
.how-it-works a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.how-it-works a:hover { color: #f1f5f9; }

.alert {
    padding: 0.85rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.alert.success { background: #064e3b; color: #6ee7b7; }
.alert.error   { background: #7f1d1d; color: #fca5a5; }