/* The Journey Ahead: copy, hierarchy and illustrated milestones from the POV. */
:root { --ink:#0a1833; --blue:#084cff; --muted:#58708c; }
body { background:radial-gradient(ellipse at 103% 17%,#cfdefc 0,transparent 48%),radial-gradient(ellipse at -12% 68%,#d7f1ed 0,transparent 47%),#f0f5fc; }
.accent { color:var(--blue); }
.site-header { height:75px; padding-top:15px; padding-bottom:15px; }
.site-header .brand img { width:125px; }
.site-header .brand { gap:12px; }
.site-header .help-button { width:39px; min-width:39px; height:39px; }
.site-header .help-button .icon { width:16px; height:16px; }
.event-brand { font-size:7px; letter-spacing:1.4px; }
.event-brand b { font-size:11px; letter-spacing:3px; }
main { padding-top:12px; padding-bottom:115px; }
.primary-button { background:linear-gradient(115deg,#3478ff,#084cff 80%); border-radius:16px; min-height:48px; font-size:13px; font-weight:550; box-shadow:inset 0 1px 1px #b5d3ff,0 6px 13px #0d50f924; }
.primary-button:hover { background:linear-gradient(115deg,#286aff,#0344eb 80%); }
.mobile-nav { bottom:calc(15px + env(safe-area-inset-bottom)); width:min(436px,calc(100% - 38px)); border-radius:27px; padding:5px; }
.mobile-nav:before { left:5px; top:5px; bottom:5px; width:calc((100% - 10px)/3); border-radius:22px; }
.mobile-nav button { min-height:51px; font-size:10px; font-weight:400; }
.mobile-nav button.active { font-weight:600; }
.mobile-nav button .icon { width:20px; height:20px; }

/* A map-first invitation with one short, readable row per destination. */
.explore-heading { margin:3px 0 17px; }
.explore-heading h1 { font-size:32px; font-weight:750; line-height:1.03; letter-spacing:-1.4px; }
.explore-heading h1 .accent { color:#275fac; }
.explore-heading p { margin-top:10px; line-height:1.45; font-size:13px; max-width:27ch; }
.explore-progress { min-height:51px; padding:10px 13px; border-radius:17px; font-size:11px; }
.explore-progress>span { line-height:1.4; }
.explore-progress b { color:#173763; }
.explore-progress small { display:block; margin-top:2px; color:#6c809a; font-size:9px; }
.progress-dots { gap:5px; }
.progress-dots i { width:7px; height:7px; background:#bcd1f8; }
.explore-switch { margin:14px 0 11px; padding:3px; border-radius:15px; background:#d9e5f780; border-color:#e1ebf8; }
.explore-switch button { min-height:37px; border-radius:12px; font-size:11px; gap:7px; }
.explore-switch button.active { color:#0647e8; }
.explore-map { margin-bottom:11px; }
.explore-map .map-card { min-height:220px; border-radius:22px; background:linear-gradient(130deg,#ffffffb8,#eef4ff80); }
.explore-map .pavilion { height:193px; width:calc(100% + 20px); margin-top:3px; }
.explore-map .map-topline { left:17px; top:14px; }
.explore-map .map-caption { font-size:8px; }
.explore-map .map-caption .icon { width:12px; height:12px; }
.explore-map .map-bottomline { display:flex; justify-content:center; left:12px; right:12px; bottom:10px; }
.explore-map .map-bottomline p { font-size:9px; color:#607792; gap:5px; }
.explore-map .map-bottomline .icon { width:12px; height:12px; }
.map-qualifier { margin-top:7px; font-size:9px; }
.explore-zones { gap:8px; }
.explore-zone { min-height:64px; gap:11px; padding:11px 13px; border-radius:21px; background:linear-gradient(120deg,#ffffffc7,#ffffff91); }
.explore-zone-icon { flex-basis:37px; width:37px; height:37px; border-radius:13px; }
.explore-zone-icon .icon { width:22px; height:22px; stroke-width:1.5; }
.explore-zone-copy strong { font-size:14px; letter-spacing:-.35px; }
.explore-zone-copy small { margin-top:5px; font-size:10px; line-height:1.35; }
.explore-zone-number { min-width:15px; margin-right:6px; font-size:9px; }
.explore-zone-end .icon { width:15px; height:15px; }
.explore-footnote { margin:16px 0 2px; gap:10px; font-size:9px; line-height:1.55; text-align:left; }
.explore-footnote .icon { width:16px; height:16px; margin-top:1px; }
.explore-footnote strong { display:block; font-weight:500; color:#4d6783; }
.explore-footnote small { display:block; font-size:9px; margin-top:1px; }

/* A consistent arrival card provides the handoff from place to milestone. */
.back-button { font-size:12px; min-height:37px; margin:-4px 0 12px; color:#506d8d; }
.back-button>.icon { width:15px; height:15px; }
.zone-detail-art { height:118px; border-radius:23px; background:radial-gradient(ellipse at 62% 0%,var(--wash),transparent 74%),linear-gradient(130deg,#ffffffb8,#dbe8ff60); }
.zone-detail-art>span { width:72px; height:72px; border-radius:23px; background:linear-gradient(135deg,#fff,var(--wash)); transform:rotate(-9deg); box-shadow:inset 0 1px 2px #fff,0 10px 18px color-mix(in srgb,var(--zone) 19%,transparent); }
.zone-detail-art .icon { width:40px; height:40px; stroke-width:1.5; }
.zone-detail-art i { width:137px; height:137px; border-color:#ffffffa0; }
.zone-detail-art i:last-child { width:186px; height:186px; }
.zone-detail-number { margin-top:19px; letter-spacing:.9px; font-size:10px; }
.zone-detail h1 { font-size:32px; margin-top:6px; line-height:1.05; letter-spacing:-1.3px; font-weight:750; }
.zone-detail-tagline { color:#486782; font-size:17px; line-height:1.22; margin-top:8px; letter-spacing:-.5px; font-weight:550; }
.zone-detail-description { font-size:12px; line-height:1.5; margin-top:7px; max-width:34ch; }
.zone-location { margin:17px 0 14px; padding:12px 0; border-color:#ccd9ec9c; gap:11px; }
.zone-location>span { font-size:12px; color:#17233b; }
.zone-location small { font-size:10px; margin-top:3px; }
.zone-location>.icon { width:19px; height:19px; }
.zone-location .text-button { min-height:35px; font-size:11px; gap:6px; }
.zone-arrival { position:relative; isolation:isolate; overflow:hidden; padding:22px 17px 14px; min-height:230px; border-radius:22px; background:linear-gradient(145deg,#ffffffcc,#f9fbff9e); }
.arrival-copy { position:relative; z-index:2; min-height:137px; padding-bottom:40px; }
.arrival-copy:before { content:''; display:block; width:24px; height:4px; background:var(--zone); border-radius:3px; margin-bottom:12px; }
.zone-arrival h2 { max-width:16ch; font-size:21px; line-height:1.14; font-weight:700; letter-spacing:-.75px; }
.zone-arrival h2 .accent { color:var(--zone); }
.zone-arrival p { font-size:12px; line-height:1.4; margin:9px 0 0; max-width:23ch; }
.arrival-scene { position:absolute; z-index:0; left:0; right:0; bottom:70px; height:147px; width:100%; object-fit:cover; object-position:right bottom; pointer-events:none; opacity:.84; }
.arrival-scene img { display:block; width:100%; height:100%; object-fit:cover; object-position:right bottom; }
.zone-arrival .primary-button { position:relative; z-index:3; min-height:45px; font-size:12px; border-radius:15px; }
.zone-arrival>small { position:relative; z-index:3; font-size:9px; margin-top:10px; color:#657b93; line-height:1.4; }
.zone-arrival:after { content:''; position:absolute; left:0; right:0; bottom:0; height:84px; background:linear-gradient(transparent,#f7faffc9 50%); z-index:1; pointer-events:none; }

/* Milestones stay in the journey with the same header and bottom navigation. */
main:has(.milestone-screen) { padding-top:8px; padding-bottom:108px; overflow:hidden; }
.milestone-screen { position:relative; isolation:isolate; min-height:calc(100dvh - 191px); padding-bottom:35px; }
.milestone-screen>.back-button { margin-bottom:11px; }
.milestone-screen .stamp-dialog-inner { padding:0; text-align:center; position:relative; z-index:2; }
.milestone-screen .stamp-dialog-inner > :not(.milestone-landscape) { position:relative; z-index:1; }
.milestone-screen .stamp-zone-title { margin:0 0 14px; text-align:left; font-size:10px; letter-spacing:.8px; text-transform:uppercase; font-weight:700; }
.milestone-screen #stampTitle { font-size:32px; font-weight:750; line-height:1.08; letter-spacing:-1.35px; margin:0 auto 9px; }
.milestone-screen [data-phase="success"] #stampTitle { max-width:12ch; }
.milestone-screen #stampTitle span { color:var(--zone); }
.milestone-screen .stamp-description { max-width:29ch; color:#132340; font-size:15px; line-height:1.35; margin:0 auto; }
.milestone-screen .stamp-encouragement { color:#667b91; font-size:12px; margin:8px auto 0; line-height:1.45; }
.milestone-screen .scanner { margin:16px -8px 11px; height:clamp(234px,31dvh,286px); min-height:0; border:0; border-radius:0; box-shadow:none; background:none; overflow:visible; }
.milestone-screen .scanner-grid,.milestone-screen .scanner-corner,.milestone-screen .scan-line { display:none!important; }
.milestone-screen .scanner .scan-aura { width:270px; height:270px; background:radial-gradient(circle,color-mix(in srgb,var(--zone) 21%,transparent),var(--wash) 38%,transparent 70%); }
.milestone-screen .scanner .scan-target { width:143px; height:143px; border:10px solid #ffffffa6; background:linear-gradient(145deg,#fff,var(--wash)); box-shadow:inset 0 2px 3px #fff,0 9px 22px color-mix(in srgb,var(--zone) 15%,transparent),0 0 0 12px color-mix(in srgb,var(--zone) 7%,transparent); }
.milestone-screen .scanner .scan-target>.icon { width:54px; height:54px; stroke-width:1.6; }
.milestone-screen .scanner .scan-target>span { display:none; }
.milestone-screen .scanner .hold-ring { inset:-39px; width:201px; height:201px; overflow:visible; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--zone) 20%,transparent)); }
.milestone-screen .scanner .hold-ring circle { stroke-width:8.5; stroke-linecap:round; }
.milestone-screen .scanner .scan-orbit { width:219px; height:219px; border:1px solid #ffffffd4; box-shadow:0 0 0 16px color-mix(in srgb,var(--zone) 4%,transparent); }
.milestone-screen .scanner .scan-orbit.second { width:258px; height:258px; box-shadow:none; border-color:color-mix(in srgb,var(--zone) 8%,transparent); }
.milestone-screen .scanner .scan-orbit:after { width:3px; height:10px; border-radius:3px; opacity:.5; top:21px; left:29px; transform:rotate(-40deg); }
.milestone-screen .scanner .scan-ripple { width:150px; height:150px; border-color:color-mix(in srgb,var(--zone) 18%,transparent); }
.milestone-screen .scanner.charging { box-shadow:none; }
.milestone-screen .scanner.charging .scan-target { box-shadow:inset 0 3px 10px #b6cce633,0 0 30px color-mix(in srgb,var(--zone) 23%,transparent); }
.milestone-screen .scanner.processing .scan-orbit { border-top:3px solid var(--zone); border-right-color:color-mix(in srgb,var(--zone) 40%,white); }
.milestone-screen .scanner.processing .hold-ring circle { stroke-dashoffset:90; transition:stroke-dashoffset 1s ease-out; }
.milestone-screen .scanner.processing .scan-target { animation:milestone-core 1.5s ease-in-out infinite; }
.milestone-screen .scanner.processing .scan-target>.icon { animation:none; }
.milestone-screen .milestone-status { display:flex; align-items:center; justify-content:flex-start; gap:13px; min-height:64px; width:min(100%,310px); margin:0 auto 8px; padding:12px 18px; border:1px solid #ffffffd9; border-radius:23px; background:linear-gradient(135deg,#ffffffcb,#ffffff75); box-shadow:inset 0 1px 1px #fff,0 8px 19px #57749706; text-align:left; }
.milestone-status>span:last-child { flex:1; min-width:0; }
.milestone-status strong { display:block; color:#152948; font-size:12px; font-weight:650; letter-spacing:-.2px; line-height:1.25; }
.milestone-status small { display:block; margin-top:4px; color:#6b8098; font-size:10px; line-height:1.35; max-width:25ch; }
.milestone-status .status-symbol { color:var(--zone); flex:0 0 32px; width:32px; height:32px; display:grid; place-items:center; }
.milestone-status .status-symbol .icon { width:28px; height:28px; stroke-width:1.6; }
.milestone-status .status-spinner { display:block; flex:0 0 30px; width:30px; height:30px; border:3px solid color-mix(in srgb,var(--zone) 20%,white); border-top-color:var(--zone); border-right-color:var(--zone); border-radius:50%; animation:orbital-turn .9s linear infinite; }
.milestone-screen .stamp-alternative { min-height:35px; font-size:10px; color:#587393; margin:0 auto; }
.milestone-screen #stampMainButton.primary-button { width:100%; margin:12px auto 0; min-height:47px; }
.milestone-screen .demo-hint { margin-top:3px; font-size:9px; line-height:1.45; color:#72869c; }
.milestone-screen .demo-hint .replay-button { font-size:10px; min-height:32px; padding:5px 10px; }
.milestone-landscape { position:absolute; z-index:0; left:-22px; right:-22px; bottom:-38px; width:calc(100% + 44px); height:150px; pointer-events:none; opacity:.78; overflow:hidden; }
.milestone-landscape img { width:100%; height:100%; object-fit:cover; object-position:right bottom; }
img.milestone-landscape { object-fit:cover; object-position:right bottom; }
.milestone-screen .scanner.success { background:none; border:0; box-shadow:none; margin-top:20px; height:clamp(222px,29dvh,267px); }
.milestone-badge { position:relative; z-index:2; width:147px; height:147px; display:grid; place-items:center; color:var(--zone); background:linear-gradient(135deg,#fff 12%,color-mix(in srgb,var(--wash) 66%,white)); border:1px solid #fff; border-radius:40px; box-shadow:inset 0 2px 4px #fff,0 16px 32px color-mix(in srgb,var(--zone) 20%,transparent); transform:rotate(-11deg); animation:liquid-stamp-land .9s cubic-bezier(.16,.7,.23,1) both; }
.milestone-badge>.icon { width:67px; height:67px; stroke-width:1.6; }
.milestone-badge:after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,transparent 30%,#ffffff99 47%,transparent 64%); background-size:250% 100%; animation:seal-sheen 1s .5s ease-out both; pointer-events:none; }
.badge-check { position:absolute; right:-5px; bottom:-5px; width:30px; height:30px; border-radius:50%; border:3px solid #f2f9fb; color:#fff; background:var(--zone); display:grid; place-items:center; transform:rotate(11deg); }
.badge-check .icon { width:16px; height:16px; }
.milestone-screen [data-phase="success"] .milestone-status { margin-top:0; }
.milestone-screen [data-phase="success"] .status-symbol { border-radius:50%; color:white; background:var(--zone); width:35px; height:35px; flex-basis:35px; }
.milestone-screen [data-phase="success"] .status-symbol .icon { width:20px; height:20px; }
.milestone-screen .scanner.settled .milestone-badge { animation:none; }
.milestone-screen .scanner.settled .milestone-badge:after { display:none; }

/* The collection and reward are a continuation of the same four milestones. */
.page-heading { margin:5px 0 19px; }
.page-heading h1 { font-size:27px; line-height:1.13; letter-spacing:-1.15px; }
.page-heading p { font-size:11px; line-height:1.5; margin-top:8px; }
.passport-layout { gap:15px; }
.passport-book { padding:17px 13px 18px; border-radius:23px; box-shadow:inset 0 1px 1px #fff,0 7px 16px #3d648508; background:linear-gradient(145deg,#ffffffd9,#f4f9ffb8); }
.passport-book:before { display:none; }
.passport-top { padding:0 2px 12px; border-color:#dce5f0; }
.passport-top .eyebrow { font-size:8px; letter-spacing:.8px; gap:5px; }
.passport-top .eyebrow .icon { width:14px; height:14px; }
.passport-top>span { font-size:12px; }
.passport-stamps { gap:10px; margin:13px 0 19px; }
.passport-slot { overflow:hidden; border:1px solid #e0e8f1; border-radius:17px; background:radial-gradient(ellipse at 25% 20%,#ffffffb5,#e9f4f56b); }
.passport-slot:has(.seal) { background:radial-gradient(ellipse at 25% 20%,#ffffffb5,#e9f4f56b); }
.passport-slot:has(.seal):before { content:''; position:absolute; inset:-80%; border:1px solid #e4eaf5; border-radius:44%; box-shadow:0 0 0 8px #fff4,0 0 0 9px #e3e9f280,0 0 0 17px #fff4,0 0 0 18px #e3e9f270,0 0 0 25px #fff4,0 0 0 26px #e3e9f260; transform:rotate(25deg) translateY(23%); pointer-events:none; }
.passport-slot .seal { width:84%; aspect-ratio:1; height:auto; background:color-mix(in srgb,var(--wash) 40%,#ffffffb5); border-width:1.8px; outline-offset:-6px; gap:6px; font-size:8px; letter-spacing:.8px; }
.passport-slot .seal:before { inset:7px; }
.passport-slot .seal .icon { width:28px; height:28px; stroke-width:1.6; }
.passport-slot .seal-stars { letter-spacing:5px; font-size:9px; margin-left:5px; }
.passport-foot { font-size:8px; letter-spacing:0; color:#66809b; }
.passport-foot .icon { width:17px; height:17px; }
.reward-panel { gap:13px; }
.reward-box { position:relative; padding:19px 17px 16px; min-height:193px; border-radius:23px; background:linear-gradient(135deg,#ffffffcf,#f5f8ff94); }
.reward-copy { position:relative; z-index:2; }
.reward-copy:before { content:''; display:block; width:24px; height:4px; border-radius:3px; background:var(--blue); margin-bottom:12px; }
.reward-box h2 { font-size:25px; line-height:1.08; letter-spacing:-1px; margin:0 0 8px; max-width:10ch; }
.reward-box p { font-size:11px; line-height:1.4; max-width:23ch; }
.reward-box .primary-button { margin-top:22px; width:100%; min-height:45px; position:relative; z-index:3; font-size:12px; border-radius:15px; }
.reward-gift { position:absolute; width:154px; height:154px; right:-9px; top:5px; pointer-events:none; }
.reward-gift img { width:100%; height:100%; object-fit:contain; }
img.reward-gift { object-fit:contain; }
.feedback-link { min-height:52px; border-radius:18px; padding:12px 15px; gap:10px; }
.feedback-link span { font-size:11px; }
.feedback-link .icon { width:17px; height:17px; }
.info-dialog:has(.reward-view),.info-dialog:has(.journey-save-view) { padding:65px 23px 32px; background:radial-gradient(ellipse at 80% 15%,#d0e0ff,transparent 56%),radial-gradient(ellipse at 0 68%,#dcefed,transparent 46%),#f3f7fd; }
.reward-view,.journey-save-view { text-align:center; }
.reward-view>.eyebrow,.journey-save-view>.eyebrow { justify-content:center; font-size:9px; letter-spacing:2px; margin-bottom:15px; }
.reward-hero-gift { display:block; width:min(260px,76vw); height:235px; object-fit:contain; margin:-9px auto 8px; }
.reward-view h2,.journey-save-view h2 { font-size:32px; line-height:1.1; font-weight:750; letter-spacing:-1.3px; margin:10px 0 12px; }
.reward-view>p,.journey-save-view>p { font-size:13px; line-height:1.5; color:#5b728e; }
.reward-code { margin:24px 0 0; padding:22px 16px; border:1px solid white; border-radius:23px; background:linear-gradient(135deg,#ffffffd1,#ffffff8c); box-shadow:inset 0 1px 1px #fff; }
.reward-code>small { display:block; color:#6b7c99; font-size:8px; line-height:1.5; text-transform:uppercase; letter-spacing:1.8px; }
.qr-code { display:block; width:120px; height:120px; margin:15px auto 13px; padding:8px; background:white; border:1px solid #e1e9f6; border-radius:15px; box-shadow:0 3px 12px #385baf10; color:#0c214d; }
.qr-code svg { width:100%; height:100%; }
.reward-code>strong { display:block; font-size:21px; font-weight:650; letter-spacing:4px; margin:10px 0 12px; color:#14294d; }
.reward-view .primary-button { margin-top:18px; min-height:49px; }
.reward-view .secondary-button,.journey-save-view .secondary-button { margin-top:12px; border-radius:15px; font-size:11px; background:#ffffff24; }
.reward-view .demo-label { font-size:9px; color:#667d96; line-height:1.5; margin:19px auto 0; max-width:32ch; }
.journey-save-view>.eyebrow { justify-content:flex-start; margin-top:10px; }
.journey-save-view .reward-hero-gift { width:135px; height:135px; margin:12px auto 17px; }
.journey-save-view .reward-celebration { margin:5px 0 28px; height:111px; }
.journey-save-view h2 { font-size:28px; }
.journey-save-view .reward-summary { margin-top:25px; padding:24px 13px; border:1px solid #fff; border-radius:20px; background:#ffffff8c; }
.journey-save-view .reward-summary strong { font-size:23px; margin:13px 0; color:#16335b; }
.journey-save-view .reward-summary p { font-size:10px; }
.journey-save-view .local-note { margin-top:21px!important; font-size:10px!important; }
@keyframes milestone-core { 0%,100%{transform:scale(.96)}50%{transform:scale(1.015)} }
@media (max-width:360px) {
  .site-header .brand img { width:111px; }.site-header .brand { gap:9px; }.site-header .event-brand { display:block; font-size:6px; }.site-header .event-brand b { font-size:9px; letter-spacing:2px; }.site-header .brand-divider { display:block; height:21px; }
  .explore-heading h1 { font-size:30px; }.explore-zone { padding:10px; gap:9px; }.explore-zone-copy strong { font-size:13px; }.explore-zone-copy small { font-size:9px; }
  .zone-detail-art { height:107px; }.zone-detail h1 { font-size:29px; }.zone-detail-tagline { font-size:15px; }.zone-arrival h2 { font-size:20px; }.zone-arrival { padding:19px 14px 13px; }.zone-arrival .primary-button { font-size:11px; padding-left:10px; padding-right:10px; }
  .milestone-screen #stampTitle { font-size:29px; }.milestone-screen .stamp-description { font-size:14px; }.milestone-screen .scanner { margin-left:-14px; margin-right:-14px; }.milestone-screen .milestone-status { padding:11px 14px; gap:10px; }
  .page-heading h1 { font-size:25px; }.reward-box h2 { font-size:23px; }.reward-gift { width:137px; height:137px; right:-10px; top:12px; }.reward-view h2 { font-size:29px; }.reward-code { padding:19px 13px; }
}
@media (max-height:740px) and (min-width:361px) {
  .milestone-screen .stamp-zone-title { margin-bottom:10px; }.milestone-screen #stampTitle { font-size:29px; }.milestone-screen .scanner { height:225px; margin-top:10px; margin-bottom:5px; }.milestone-screen .scanner.success { height:220px; }.milestone-screen .milestone-status { min-height:59px; padding-top:10px; padding-bottom:10px; }.milestone-screen .stamp-encouragement { margin-top:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .milestone-screen .scanner *, .milestone-screen .milestone-status, .milestone-screen .status-spinner { animation:none!important; transition:none!important; }
  .milestone-screen .milestone-badge { opacity:1; transform:rotate(-11deg); }.milestone-badge:after { display:none; }
}
@media (prefers-contrast:more) { .explore-zone-copy small,.zone-detail-description,.milestone-status small,.milestone-screen .stamp-encouragement { color:#375574; }.explore-zone,.milestone-screen .milestone-status,.reward-box { background:#f8fbff; border-color:#a7bedc; } }