.brand-intro { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: #07130e; color: #f7faf8; text-align: center; }
.brand-intro canvas { width: min(640px, 85vw); height: auto; max-height: 52vh; object-fit: contain; }
.brand-intro h1 { margin: 16px 0 10px; font-size: 30px; letter-spacing: 0; }
.brand-intro h1 span { font-size: 20px; white-space: nowrap; }
.brand-intro p { margin: 0 0 20px; color: #e9c862; font-size: 15px; }
.brand-intro small { line-height: 1.7; color: #bdcbc3; font-size: 11px; max-width: 520px; }
.intro-progress { width: 180px; height: 3px; background: #24382f; margin-top: 22px; overflow: hidden; }
.intro-progress span { height: 100%; display: block; width: 0; background: #e5bd4e; }
#skipIntro { margin-top: 20px; background: transparent; color: #cbd8d0; padding: 10px; text-decoration: underline; }
.access-choices { display: grid; gap: 14px; margin-top: 26px; }
.access-choices button { display: grid; grid-template-columns: 46px minmax(0,1fr) 24px; gap: 3px 14px; align-items: center; text-align: left; color: #f6faf7; background: #0b5539; border: 1px solid #3e8568; padding: 20px; border-radius: 8px; min-height: 108px; transition: transform .25s, background .25s, box-shadow .25s;  }
.access-choices.choices-ready button { animation: access-enter .6s both; }
.access-choices button:nth-child(2) { background: #152921; border-color: #b79843; animation-delay: .12s; }
.access-choices button:hover { transform: translateY(-3px); background: #126a48; box-shadow: 0 8px 22px #0004; }
.access-choices strong { font-size: 20px; }
.access-choices small { grid-column: 2; color: #d0ddd4; font-size: 12px; }
.access-choices .access-icon { grid-row: 1 / 3; font-size: 27px; color: #e1be61; }
.access-choices button > span:last-child { grid-column: 3; grid-row: 1 / 3; font-size: 24px; }
.access-back { background: transparent; color: #e9cd81; text-align: left; min-height: 40px; padding: 8px 0; }
.access-icon svg { width: 30px; height: 30px; }
.nav-page-link { display: block; color: inherit; text-decoration: none; padding: 14px 12px; border-radius: 5px; font-size: 14px; min-height: 44px; }
.nav-page-link:hover { background: #263c2c; }
@keyframes access-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:760px) { .brand-intro h1 { font-size: 24px; } .brand-intro h1 span { display: block; font-size: 16px; margin-top: 6px; } .brand-intro p { font-size: 13px; } .access-choices button { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .access-choices button { animation: none; transition: none; } }