/* HW-MASTER-022 Run 5 (SITE-005): the first screen before the app's bundle runs.
 * A static file, not inline, so the CSP is unchanged. The layer is fixed, so
 * removing it when the app is ready moves nothing in the page beneath it
 * (App.jsx `dismissFirstPaint`). With JavaScript off it stays, and its links
 * work. The colours are the public pages' own (index.css `.hw-pub`). */
#first-paint {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background:
    radial-gradient(60rem 40rem at 10% -10%, #dfe8ff, transparent 60%),
    radial-gradient(50rem 36rem at 95% 5%, #ffe6d5, transparent 60%),
    #fbfcff;
  color: #0f172a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  padding: 0 16px;
  box-sizing: border-box;
}
#first-paint .fp-wrap { max-width: 1200px; margin: 0 auto; padding-bottom: 4rem; }
#first-paint .fp-head { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; }
#first-paint .fp-brand { font-weight: 800; font-size: 1.25rem; color: #0f172a; text-decoration: none; margin-right: auto; }
#first-paint .fp-head a:not(.fp-brand) { color: #3346c8; font-weight: 600; text-decoration: none; }
/* the front page hero's own type, column and height (LandingPage.jsx Hero),
 * so the heading does not move when the app takes over */
#first-paint h1 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800;
  margin: 94px 0 0;
}
#first-paint .fp-line { color: #475569; font-size: 1rem; max-width: 36rem; margin: 1.25rem 0 0; }
#first-paint .fp-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
#first-paint .fp-btn { display: inline-block; border-radius: 999px; padding: 0.75rem 1.4rem; font-weight: 700; text-decoration: none; }
#first-paint .fp-primary { background: #3346c8; color: #fff; }
#first-paint .fp-alt { border: 1px solid #e4e9f2; background: #fff; color: #0f172a; }
/* a server-rendered page's own text, in the same layer (seo_routes `_inject`) */
#first-paint main { max-width: 1200px; margin: 0 auto; padding: 1rem 0 4rem; }
@media (min-width: 640px) {
  #first-paint { padding: 0 5%; }
  #first-paint h1 { margin-top: 115px; }
  #first-paint .fp-line { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  #first-paint h1 { max-width: calc((100% - 3rem) / 2); }
}