/* Styles for the temporary coming-soon page only; delete together with coming-soon.html at launch. */
:root {
  --bg: #f8f7f2; --text: #17231d; --muted: #59655d; --border: #dfe2dc;
  --ember: #d8562f; --marigold: #f1c66b;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121915; --text: #ebece6; --muted: #a2ada5; --border: #2f3b34; --ember: #ee7a52; --marigold: #e2b65c; }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 720px; margin: 0 auto; padding: 48px 16px; }
footer { width: 100%; max-width: 720px; margin: 0 auto; padding: 16px; color: var(--muted); font-size: .85rem;
  border-top: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 1.15rem; margin: 0 0 40px; }
.brand-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ember); margin-right: .45rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; color: var(--ember); margin: 0 0 10px; }
h1 { font-size: clamp(1.8rem, 6vw, 2.8rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
.highlight { background: linear-gradient(transparent 62%, var(--marigold) 62%); }
@media (prefers-color-scheme: dark) { .highlight { background: none; color: var(--marigold); } }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 62ch; margin: 0 0 24px; }
.note { margin: 0; font-weight: 600; }
.access { max-width: 30rem; margin-top: 28px; }
#preview-login { display: flex; gap: .6rem; }
#preview-login input, #preview-login button { min-height: 3rem; border-radius: .75rem; font: inherit; }
#preview-login input { flex: 1; min-width: 0; padding: 0 1rem; border: 1px solid var(--border);
  background: transparent; color: var(--text); }
#preview-login input:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
#preview-login button { padding: 0 1.2rem; border: 0; background: var(--text); color: var(--bg);
  font-weight: 800; cursor: pointer; }
#preview-result { min-height: 1.4rem; margin: .6rem 0 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 520px) { #preview-login { flex-direction: column; } }