/* The pre-launch "coming soon" page (layouts/mede/prelaunch, Mede::PrelaunchLock).
   Tokens only: every colour and font is a --mede-* variable. */

.mede-prelaunch { min-height: 100vh; background: var(--mede-cream); }
.mede-prelaunch-frame { box-sizing: border-box; min-height: 100vh; max-width: 1080px; margin: 0 auto; padding: 32px 40px; display: flex; flex-direction: column; gap: 48px; }

.mede-prelaunch-brand { display: flex; align-items: center; gap: 10px; }
.mede-prelaunch-name { display: flex; flex-direction: column; line-height: 1.1; font-size: 14px; font-weight: 800; }

.mede-prelaunch-main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; max-width: 720px; }
.mede-prelaunch-eyebrow { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--mede-lime-light); border: 1px solid var(--mede-lime-border); color: var(--mede-lime-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.mede-prelaunch-main h1 { margin: 0; font-size: 56px; line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; color: var(--mede-ink); }
.mede-prelaunch-lede { margin: 0; font-size: 22px; line-height: 1.45; color: var(--mede-ink2); max-width: 600px; }

.mede-prelaunch-grades { display: flex; gap: 8px; margin: 4px 0 8px; }
.mede-prelaunch-grade { width: 40px; height: 40px; font-size: 20px; color: var(--mede-white); }
.mede-prelaunch-grade:nth-child(3) { color: var(--mede-ink); }

.mede-prelaunch-preview { box-sizing: border-box; width: 100%; max-width: 520px; padding: 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mede-prelaunch-preview h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--mede-ink); }
.mede-prelaunch-preview p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--mede-muted); }
.mede-prelaunch-preview .btn-dark:hover { color: var(--mede-white); background: var(--mede-slate-deep); }
.mede-prelaunch-form { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.mede-prelaunch-label { font-size: 13px; font-weight: 700; color: var(--mede-ink); }
.mede-prelaunch-row { display: flex; gap: 10px; width: 100%; }
.mede-prelaunch-row input { flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 14px; font: inherit; font-size: 15px; color: var(--mede-ink); background: var(--mede-white); border: 1px solid var(--mede-line); border-radius: 10px; }
.mede-prelaunch-row input:focus { outline: 2px solid var(--mede-slate); outline-offset: 1px; border-color: var(--mede-slate); }
.mede-prelaunch-row input[aria-invalid="true"] { border-color: var(--mede-grade-f); }
.mede-prelaunch-row .btn-dark { flex: none; height: 44px; border: 0; cursor: pointer; }
.mede-prelaunch-preview .mede-prelaunch-error { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--mede-grade-f-text); }

.mede-prelaunch-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--mede-line); }
.mede-prelaunch-foot > a { font-size: 13px; font-weight: 700; color: var(--mede-muted); }
.mede-prelaunch-foot > a:hover { color: var(--mede-slate); }

@media (max-width: 640px) {
  .mede-prelaunch-frame { padding: 20px 16px; gap: 32px; }
  .mede-prelaunch-main h1 { font-size: 38px; }
  .mede-prelaunch-lede { font-size: 19px; }
  .mede-prelaunch-grade { width: 32px; height: 32px; font-size: 16px; }
  .mede-prelaunch-foot { flex-direction: column; align-items: flex-start; }
  .mede-prelaunch-row { flex-direction: column; }
}