/* Page-only layout. Shared site styles provide the fonts and light/dark tokens. */
.screen-main { padding-block: 32px 64px; background: linear-gradient(160deg, var(--color-surface), var(--color-sunken)); }
.screen-main h1 { max-width: 22em; margin-bottom: 28px; font-size: clamp(30px, 4vw, 48px); line-height: 1.2; letter-spacing: -0.025em; }
.screen-grid { display: grid; gap: 24px; align-items: start; }
.screen-card { min-width: 0; padding: 24px 20px; border: 1px solid var(--color-line); border-radius: var(--ds-radius-lg); background: var(--color-panel); box-shadow: var(--mk-float); }
.screen-inputs { display: grid; gap: 28px; }
.screen-inputs fieldset { min-width: 0; padding: 0; border: 0; }
.screen-inputs legend, .screen-number > label { margin-bottom: 10px; font-weight: 600; line-height: 1.5; }
.screen-help, .screen-protection, .screen-caption { color: var(--color-ink-muted); font-size: 14px; line-height: 1.6; }
.screen-help { margin-bottom: 12px; }
.screen-options { display: grid; gap: 6px; }
.screen-option { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 9px 12px; border: 1px solid var(--color-input-border); border-radius: var(--ds-radius-sm); background: var(--color-input-bg); cursor: pointer; }
.screen-option:has(input:checked) { border-color: var(--color-accent); }
.screen-option input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--color-accent); }
.screen-option span { min-width: 0; overflow-wrap: anywhere; }
.screen-number { display: grid; gap: 8px; }
.screen-number input { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--color-input-border); border-radius: var(--ds-radius-sm); background: var(--color-input-bg); color: var(--color-ink); font: inherit; }
.screen-number input:user-invalid { border: 2px solid var(--color-fail); }
.screen-own { margin-top: 12px; }
.screen-page [hidden] { display: none; }
.screen-page :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.screen-page input { scroll-margin-block: 110px 40px; }
.screen-optional { border-top: 1px solid var(--color-line); padding-top: 12px; }
.screen-optional summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-weight: 600; }
.screen-optional-body { display: grid; gap: 24px; padding-top: 20px; }
.screen-result h2 { font-size: 24px; line-height: 1.3; }
.screen-result h3 { font-size: 18px; line-height: 1.4; }
.screen-result p, .screen-result h3 { margin-top: 16px; }
.screen-result { overflow-wrap: anywhere; }
.screen-arithmetic { font-size: 20px; line-height: 1.6; color: var(--color-accent); }
.screen-band, .screen-firms { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-line); }
.screen-actions { display: grid; gap: 12px; margin-top: 24px; }
.screen-actions .btn { min-height: 48px; white-space: normal; text-align: center; }
.screen-protection { margin-top: 16px; overflow-wrap: anywhere; }
@media (min-width: 960px) {
  .screen-main { padding-block: 48px 72px; }
  .screen-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .screen-card { padding: 32px; }
}

/* Job 275: native waitlist controls share the enquiry form's accessible sizing. */
.screen-waitlist { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-line); scroll-margin-top: 110px; }
.screen-waitlist h2 { font-size: 24px; line-height: 1.3; }
.screen-waitlist form { display: grid; gap: 20px; margin-top: 20px; }
.screen-waitlist .field-label-row { flex-wrap: wrap; }
.screen-marketing { align-items: flex-start; }
.screen-marketing input { margin-top: 3px; }
.screen-waitlist-notice { margin: 0; overflow-wrap: anywhere; }
.screen-waitlist-notice a { color: var(--color-accent); }
.screen-waitlist .btn { min-height: 48px; white-space: normal; }