/* Sub-pages: download, success, account and legal pages. Builds on style.css. */

.page-shell {
  position: relative;
  z-index: 1;
  padding: 8.5rem 1.5rem 5rem;
  min-height: 72vh;
}

.page-wrap { max-width: 780px; margin: 0 auto; }

.page-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.page-lead { color: var(--text-secondary); font-size: 1.0625rem; margin-bottom: 2rem; }

.page-card {
  background: #0e0e1a;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 1.25rem;
}
.page-card.center { text-align: center; max-width: 560px; margin: 0 auto; }
.page-card.center .btn-primary { display: inline-flex; margin-top: 1.5rem; }
.page-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.page-card p { color: var(--text-secondary); overflow-wrap: anywhere; }
.page-card p + p { margin-top: 0.75rem; }
.page-card p + form { margin-top: 1.25rem; }

.field {
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-muted);
  background: #07070d;
  color: #fff;
  font: inherit;
  font-size: 1rem;
}
.field:focus { outline: none; border-color: var(--brand-indigo); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); }
.field::placeholder { color: var(--text-muted); opacity: 1; }
.field.mono { font-family: 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; }

.form-row { display: flex; gap: 0.75rem; margin-top: 1rem; }
.form-row .btn-primary, .form-row .btn-secondary { flex: none; height: 50px; }
@media (max-width: 620px) { .form-row { flex-direction: column; } }

.key-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0.5rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(124, 135, 250, 0.4);
  background: #07070d;
}
.key-box code {
  flex: 1;
  font-family: 'Cascadia Mono', Consolas, monospace;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: 0.06em;
  color: #fff;
  overflow-wrap: anywhere;
  user-select: all;
}
.copy-btn {
  flex: none;
  padding: 0.55rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--border-muted);
  background: #1a1a28;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--border-glow); }

.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.5rem; }
.steps li { counter-increment: step; display: flex; gap: 1rem; align-items: flex-start; color: var(--text-secondary); }
.steps li::before {
  content: counter(step);
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #388bfd);
}
.steps strong { color: #fff; }
.steps li > div { min-width: 0; }

.plain-list { margin-top: 1rem; padding-left: 1.25rem; display: grid; gap: 0.5rem; color: var(--text-secondary); }

.notice { margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 12px; border: 1px solid; font-size: 0.9375rem; }
.notice.ok { color: #bbf7d0; background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.3); }
.notice.warn { color: #fde68a; background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.notice.err { color: #fecaca; background: rgba(240, 88, 88, 0.1); border-color: rgba(240, 88, 88, 0.35); }
.notice[hidden] { display: none; }

.muted { color: var(--text-muted); font-size: 0.875rem; }
.muted a, .page-card a:not([class]), .legal a { color: var(--brand-indigo-bright); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

@media (max-width: 480px) {
  .page-shell { padding-left: 1rem; padding-right: 1rem; }
  .page-card { padding: 1.25rem; }
  .key-box { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Sub-page footer: only the bottom bar, so keep a single full-width divider */
.page-shell + .site-footer { padding-top: 2.5rem; }
.page-shell + .site-footer .footer-bottom { border-top: 0; padding-top: 0; }
.footer-bottom a { color: var(--text-muted); text-decoration: underline; text-decoration-color: rgba(129, 129, 140, 0.45); text-underline-offset: 3px; transition: color 0.2s ease; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: #fff; text-decoration-color: currentColor; }

/* Legal pages */
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; }
.legal h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.legal p, .legal li { color: var(--text-secondary); line-height: 1.75; }
.legal p + p { margin-top: 0.75rem; }
.legal ul { padding-left: 1.25rem; margin: 0.5rem 0; display: grid; gap: 0.35rem; }
.legal .updated { color: var(--text-muted); font-size: 0.875rem; }
.legal strong { color: #fff; }

/* Details the owner must fill in before going live */
.fill-in {
  background: rgba(251, 191, 36, 0.16);
  color: #fde68a;
  padding: 0 0.3rem;
  border-radius: 4px;
  white-space: nowrap;
}