/*
 * page.css — the coming-soon page's own styles (order 283 section 4).
 *
 * The page-level rules are the live page's own <style> block, copied as served on
 * 20 October 2026. The field and the button below are the styles the live page
 * COMPUTED for the design system's Input and Button (measured in a browser, 20 October
 * 2026, 1440 x 900), written as plain CSS because the bundle that drew them is not
 * admitted to the repository (CLAUDE.md section 12: the _ds_bundle.js exclusion).
 * tools/dns/site/README.md carries the measurement.
 */

html, body { margin: 0; padding: 0; background: #070D1A radial-gradient(circle 640px at 50% 38%, rgba(20,40,69,0.5), transparent 70%) no-repeat fixed; min-height: 100%; }
a { color: var(--accent-400, #D4A574); text-decoration: none; }
a:hover { color: var(--accent-tint, #E4BC8C); }
[hidden] { display: none !important; }
@keyframes el-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes el-pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.45); } 50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb),0); } }
@keyframes el-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes el-bloom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
@keyframes el-veil-dot { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
[data-portrait="true"] h1 { white-space: normal !important; font-size: clamp(34px, 10.5vw, 56px) !important; line-height: 1.12 !important; }
[data-portrait="true"] [data-el="main"] { width: 100% !important; padding: 24px 20px 48px !important; }
[data-portrait="true"] [data-el="main"] p { font-size: 15.5px !important; }
[data-portrait="true"] [data-el="map"] { width: 140% !important; top: auto !important; height: auto !important; bottom: 140px !important; }
[data-portrait="true"] [data-el="card"] { margin-top: 40px !important; width: 100% !important; box-sizing: border-box; }
[data-portrait="true"] [data-el="card"] > div { width: 100% !important; text-align: center !important; }
[data-portrait="true"] [data-el="card"] input { text-align: center !important; }
[data-portrait="true"] [data-el="card"] > div { justify-content: center !important; }
[data-portrait="true"] [data-el="watermark-name"] { font-size: 15vw !important; white-space: normal !important; }
[data-portrait="true"] [data-el="footer"] { flex-direction: column !important; align-items: center !important; gap: 16px !important; padding: 24px 20px 32px !important; }
[data-portrait="true"] [data-el="footer"] img { position: static !important; transform: none !important; order: 1; }
[data-portrait="true"] [data-el="footer"] div:last-of-type { order: 2; }
[data-portrait="true"] [data-el="footer"] div:first-of-type { order: 3; }
[data-portrait="true"] header { padding: 28px 20px 0 !important; }

/* The design system's Input, as the live page computed it, its error state included (measured with an
   empty address submitted). The focus ring is not the live page's measured value: it is the accent's,
   unmeasured, and the one line of this file not copied from the original. */
.field { font-family: var(--font-ui); }
.field-label { display: block; font-size: 12px; font-weight: 500; color: rgb(201, 207, 218); margin-bottom: 6px; }
.field-input {
  width: 100%; box-sizing: border-box; height: 40px;
  background: rgba(245, 241, 232, 0.05); border: 1px solid rgba(245, 241, 232, 0.1); outline: none;
  backdrop-filter: blur(12px); border-radius: 12px; padding: 11px 14px;
  font-size: 13px; font-family: inherit; color: rgb(245, 241, 232);
  box-shadow: rgba(245, 241, 232, 0.05) 0px 1px 0px inset;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.field-input:focus { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
.field-input[aria-invalid="true"] { border-color: rgba(200, 16, 46, 0.55); }
.field-error { margin-top: 5px; font-size: 11.5px; color: rgb(248, 113, 113); }

/* The design system's primary Button with its glow, as the live page computed it. */
.primary-button {
  appearance: none; border: none; outline: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  max-width: 100%; min-width: 0; overflow: hidden; height: 40px;
  padding: 10px 20px; border-radius: var(--radius-pill, 999px);
  font-size: 13px; font-family: var(--font-ui); letter-spacing: 0; line-height: 1.2; font-weight: 600;
  transform: scale(1); transition: background 120ms, transform 80ms, border-color 120ms, box-shadow 120ms;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.35); background: var(--accent-500); color: rgb(250, 250, 247);
}
.primary-button:hover { background: var(--accent-hover, var(--accent-500)); }
.primary-button:active { transform: scale(0.98); }
.primary-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: inline-flex; align-items: center; gap: 8px; }