.access-gate { box-sizing: border-box; min-height: 100vh; padding: 40px 20px; background: #061d35; color: #0a3161; font: 17px/1.6 Georgia, serif; }
.access-card { box-sizing: border-box; max-width: 740px; margin: auto; padding: 32px clamp(18px,5vw,42px); border: 8px solid #e8d4b4; background: #fff9ef; text-align: center; }
.access-card h1 { color: #0a3161; font-size: clamp(27px,5vw,38px); line-height: 1.15; }
.access-card img { width: 160px; padding: 12px; background: #061d35; }
.access-card a { color: #0a3161; }
.access-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0; }
.access-actions a, .access-actions button { box-sizing: border-box; display: inline-block; min-height: 44px; padding: 12px 16px; border: 1px solid #0a3161; border-radius: 4px; background: #fff9ef; color: #0a3161; font: bold 14px/1.4 Arial,sans-serif; cursor: pointer; }
.access-actions a:first-child { color: white; background: #bf0d3e; border-color: #bf0d3e; }
.access-card :focus-visible { outline: 3px solid #bf0d3e; outline-offset: 3px; }

.access-gate [hidden] { display: none !important; }

/* Keep the backdrop stable; reveal the pending card only after the visual delay. */
#access-gate:not([data-access-visible="true"]) .access-card { visibility: hidden; }
#access-gate .access-card noscript { visibility: visible; }

/* Match the product shell while the loader card is hidden or visible. */
#access-gate { background: #061d35; }