.access-loading #home, .access-loading #call,
.access-pending #home, .access-pending #call { display: none !important; }
.access-loading .top-right, .access-pending .top-right { visibility: hidden; }
.access-panel { max-width: 480px; margin: 32px auto 64px; padding: 28px 24px; }
.access-panel h1 { font-size: clamp(28px, 7vw, 38px); line-height: 1.15; margin: 0 0 18px; outline: none; }
.access-panel p { line-height: 1.6; }
.access-panel form { margin-top: 24px; }
.access-panel label { display: block; margin-bottom: 8px; font-weight: 600; }
.access-panel .birth-fields input, .access-panel .birth-fields select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid #5c6663; border-radius: 12px; background: #fbfbf7; color: #1a1d1c; font: inherit; color-scheme: light; }
.access-panel .primary { width: 100%; margin-top: 14px; }
.access-panel .access-agreement { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; line-height: 1.6; }
.access-agreement input { flex: 0 0 22px; width: 22px; height: 22px; margin: 3px 0 0; accent-color: #1a1d1c; }
.access-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 28px; font-size: 14px; }
.access-panel a, .legal-page a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.access-panel .text-button { min-height: 44px; margin-top: 8px; }
.access-error { color: #9e2424; font-size: 14px; line-height: 1.5; }
.home-footer .legal-links { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
.home-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-page { max-width: 720px; margin: 0 auto; padding: 28px 22px 64px; line-height: 1.65; }
.legal-page h1 { font-size: 36px; line-height: 1.2; margin-top: 28px; }
.legal-page h2 { font-size: 22px; line-height: 1.3; margin-top: 30px; }
.legal-page ul { padding-left: 24px; }
.legal-page li { margin: 8px 0; }
.legal-date { color: #5c6663; }
@media (max-width: 380px) { .access-panel { padding: 20px 18px; margin-top: 12px; } }

.access-panel { box-sizing: border-box; width: 100%; }
.access-panel h1 { text-wrap: balance; overflow-wrap: normal; word-break: normal; }
.access-panel .birth-fields { display: grid; grid-template-columns: 1.15fr .8fr 1fr; gap: 12px; min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.access-panel .birth-fields label { min-width: 0; font-size: 14px; }
.access-panel .birth-fields :is(input, select) { display: block; max-width: 100%; margin-top: 8px; font-size: 18px; min-height: 54px; }
.access-panel .birth-fields input::placeholder { color: #5c6663; opacity: 1; }
.access-panel .fine-print { font-size: 14px; line-height: 1.5; color: var(--muted); }
.access-picture { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--olive); background: #e2e0d9; }
.access-picture svg { width: 40px; height: 40px; }
.access-panel .access-intro { margin-bottom: 0; }
.access-promises { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0 0 28px; }
.access-promises li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.4; }
.access-promises li > span:first-child { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #e2e0d9; color: var(--olive); }
.access-promises svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.access-panel .access-agreement { font-size: 15px; line-height: 1.5; }
.access-agreement > span { min-width: 0; }
@media (max-width: 380px) { .access-panel .birth-fields { gap: 8px; } .access-panel .birth-fields :is(input, select) { padding: 10px; } }
/* On a slow connection the logo alone looks stuck: Dot hops in the middle after a
   moment, and after two seconds the words say it's loading (first-time users on slow
   3G, 2026-10-18; Elliott picked the hopping Dot). CSS only, so it shows before the
   scripts arrive. Hidden once the app answers. */
.loading-dot { display: none; }
body.access-loading #access-status:not([hidden]) {
  position: fixed; left: 0; right: 0; top: 45%; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
  text-align: center; font-size: 15px; color: #6b6f6d;
}
body.access-loading #access-status:not([hidden]) .loading-text { opacity: 0; animation: access-status-in .4s ease 2s forwards; }
body.access-loading #access-status:not([hidden]) .loading-dot {
  display: block; position: absolute; left: 50%; bottom: calc(100% + 18px); width: 48px; height: 48px; margin-left: -24px;
  border-radius: 50%; background: #ff6a4d; box-shadow: inset 0 0 0 5px #111; transform-origin: 50% 100%;
  opacity: 0; animation: access-status-in .3s ease .8s forwards, loading-dot-hop 1.3s cubic-bezier(.3, 0, .3, 1) .8s infinite;
}
body.access-loading #access-status:not([hidden]) .loading-dot::before,
body.access-loading #access-status:not([hidden]) .loading-dot::after {
  content: ""; position: absolute; top: 13px; width: 6px; height: 13px; border-radius: 3px; background: #111; animation: dot-blink 3.9s infinite;
}
.loading-dot::before { left: 13px; } .loading-dot::after { right: 13px; }
@keyframes access-status-in { to { opacity: 1; } }
@keyframes loading-dot-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  8% { transform: translateY(0) scale(1.15, .85); }
  42% { transform: translateY(-26px) scale(.95, 1.05); }
  72% { transform: translateY(0) scale(1.12, .88); }
  84% { transform: translateY(0) scale(1, 1); }
}
/* app.css turns every animation off for reduced motion, so the fade-ins would
   never run: show Dot and the words still, straight away. */
@media (prefers-reduced-motion: reduce) {
  body.access-loading #access-status:not([hidden]) :is(.loading-dot, .loading-text) { opacity: 1; animation: none; }
  body.access-loading #access-status:not([hidden]) .loading-dot::before,
  body.access-loading #access-status:not([hidden]) .loading-dot::after { animation: none; }
}