@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

:root{
  --navy:#06233D;
  --navy2:#0B3F68;
  --sand:#FFF3D8;
  --paper:#FFFCF5;
  --ink:#102434;
  --muted:#667783;
  --line:#E9DFC8;
  --gold:#FFD447;
  --red:#E63A46;
  --green:#2D9A63;
  --blue:#168BD2;
  --turquoise:#12B7B1;
  --coral:#FF735D;
  --mango:#FFB629;
  --sky:#DDF5F6;
  --leaf:#66B447;
  --shadow:0 16px 45px rgba(7,27,49,.10);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--sand)}
body{margin:0;font-family:"DM Sans",system-ui,-apple-system,sans-serif;background:var(--sand);color:var(--ink);padding-bottom:86px}
button,input,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.topbar{
  position:sticky;top:0;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px max(16px,env(safe-area-inset-left));
  background:rgba(247,241,229,.94);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(7,27,49,.08)
}
.brand-button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:var(--navy);padding:0;text-align:left}
.brand-button strong{display:block;font-size:15px;line-height:1.1}
.brand-button small{display:block;color:var(--muted);font-size:10px;margin-top:2px;letter-spacing:.06em;text-transform:uppercase}
.brand-mark{width:36px;height:36px;border-radius:11px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:23px;font-weight:800}
.gps-pill{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 11px;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:700}
.gps-dot{width:8px;height:8px;border-radius:50%;background:#9CA3AF}
.gps-pill.live .gps-dot{background:var(--green);box-shadow:0 0 0 4px rgba(45,139,87,.12)}
.gps-pill.error .gps-dot{background:var(--red)}

main{max-width:820px;margin:0 auto;min-height:70vh}
.view{display:none}
.view.active{display:block}
.hero{
  margin:0 12px 24px;padding:34px 22px 26px;border-radius:0 0 30px 30px;
  background:
    radial-gradient(circle at 86% 18%,rgba(244,197,66,.28),transparent 22%),
    linear-gradient(145deg,var(--navy),#0B3157 72%,#144E78);
  color:white;box-shadow:var(--shadow);overflow:hidden;position:relative
}
.hero:after{
  content:"";position:absolute;right:-60px;bottom:-85px;width:210px;height:210px;border-radius:50%;
  border:28px solid rgba(255,255,255,.045)
}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.17em;color:var(--gold);text-transform:uppercase}
.eyebrow.dark{color:var(--blue)}
.eyebrow.gold{color:var(--gold)}
.hero h1{font-family:"Playfair Display",serif;font-size:clamp(36px,8vw,59px);line-height:.99;margin:15px 0 15px;letter-spacing:-.035em;max-width:650px}
.hero h1 span{color:var(--gold)}
.hero-copy{font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);max-width:620px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.hero-stats div{border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
.hero-stats strong{display:block;font-size:17px}
.hero-stats span{font-size:11px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.06em}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.micro{font-size:11px;color:rgba(255,255,255,.55);line-height:1.5;margin:13px 0 0;max-width:600px}

.btn{border:0;border-radius:13px;min-height:46px;padding:11px 16px;font-weight:800;transition:.18s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--gold);color:var(--navy)}
.btn.secondary{background:var(--paper);color:var(--navy);border:1px solid var(--line)}
.hero .btn.secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:white}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.btn.small{min-height:38px;padding:8px 11px;font-size:12px}
.btn.danger{background:#FFF0F0;color:#A61B1B;border:1px solid #F5C2C2}
.btn.light{background:white;color:var(--navy)}
.btn:focus-visible,.nav-btn:focus-visible,.route-row:focus-visible{outline:3px solid rgba(43,120,197,.35);outline-offset:2px}

.section{padding:0 18px 24px}
.section.simple{padding-top:28px}
.section h2,.passport-head h2{font-family:"Playfair Display",serif;color:var(--navy);font-size:30px;line-height:1.07;margin:6px 0 12px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.progress-chip{font-weight:800;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:12px}
.route-preview{display:grid;gap:9px}
.route-row{
  width:100%;border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:12px;
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;text-align:left;color:inherit
}
.route-row .num{height:40px;width:40px;border-radius:12px;background:#F0ECE4;display:grid;place-items:center;font-weight:800;color:var(--navy)}
.route-row.done .num{background:#E4F4EA;color:var(--green)}
.route-row.current{border-color:rgba(43,120,197,.35);box-shadow:0 0 0 3px rgba(43,120,197,.07)}
.route-row strong{display:block;font-size:14px;color:var(--navy)}
.route-row small{display:block;color:var(--muted);margin-top:2px}
.route-row .arrow{color:#9CA3AF}

.tour-status{padding:18px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.progress-track{height:8px;border-radius:99px;background:#E7E2D9;overflow:hidden;margin-top:8px}
.progress-fill{height:100%;width:10%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:99px;transition:width .35s}
.score-box{min-width:82px;background:var(--navy);color:white;border-radius:16px;padding:9px 12px;text-align:center}
.score-box strong{display:block;color:var(--gold);font-size:21px}
.score-box span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65)}

.stop-card{margin:0 14px;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:var(--shadow)}
.stop-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:28px;background:var(--sand);margin-bottom:14px}
.theme-pill{display:inline-block;background:#EDF4FB;color:#215F9E;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800;letter-spacing:.1em}
.stop-heading h2{font-family:"Playfair Display",serif;color:var(--navy);font-size:31px;line-height:1.05;margin:9px 0 5px}
.stop-heading p{color:var(--muted);margin:0 0 18px;line-height:1.45}
.distance-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.distance-panel .label{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.distance-panel strong{font-size:14px;color:var(--navy)}
.locked-panel{text-align:center;padding:27px 8px 14px}
.lock-orbit{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#F0ECE4;font-size:28px}
.locked-panel h3{color:var(--navy);margin:0 0 6px}
.locked-panel p{color:var(--muted);font-size:13px;line-height:1.5;max-width:470px;margin:0 auto 14px}
.unlock-banner{margin:20px 0 15px;background:#E8F6ED;color:#246E46;border-radius:12px;padding:10px 12px;font-size:11px;font-weight:900;letter-spacing:.1em}
.story-block{font-size:15px;line-height:1.7;color:#293441}
.story-block p{margin:0 0 13px}
.story-block .lead{font-family:"Playfair Display",serif;color:var(--navy);font-size:22px;line-height:1.25}
.story-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.challenge-area{margin-top:20px;border-top:1px solid var(--line);padding-top:20px}
.challenge-area h3{font-family:"Playfair Display",serif;color:var(--navy);font-size:24px;margin:0 0 8px}
.challenge-area p{color:var(--muted);line-height:1.5}
.option-grid{display:grid;gap:9px;margin:14px 0}
.option-btn{border:1px solid var(--line);background:white;border-radius:14px;padding:13px;text-align:left;color:var(--ink);min-height:48px;font-weight:600}
.option-btn.selected{border-color:var(--blue);background:#F0F7FF}
.option-btn.correct{border-color:var(--green);background:#EAF8EF;color:#185E39}
.option-btn.wrong{border-color:var(--red);background:#FFF0F0;color:#8D2020}
.challenge-note{background:var(--sand);border-radius:14px;padding:13px;margin-top:12px;font-size:13px;color:#4D5560;line-height:1.5}
.result-box{border-radius:15px;padding:14px;background:#EAF8EF;color:#185E39;margin-top:14px}
.result-box strong{display:block;margin-bottom:4px}
.sequence-list{display:grid;gap:8px;margin:13px 0}
.sequence-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;padding:11px;background:white}
.sequence-item button{width:34px;height:34px;border-radius:10px;border:0;background:var(--sand);font-weight:900;color:var(--navy)}
.check-list{display:grid;gap:9px;margin:14px 0}
.check-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:12px;background:white}
.check-row input{margin-top:3px;width:20px;height:20px}
.text-answer{width:100%;min-height:50px;border:1px solid var(--line);border-radius:13px;padding:12px;font-size:16px;background:white;color:var(--ink)}
.tour-nav{display:flex;justify-content:space-between;padding:14px 18px 28px}

.map-heading{padding:24px 18px 10px;margin:0}
#map{height:58vh;min-height:430px;margin:0 12px;border-radius:24px;border:1px solid var(--line);overflow:hidden;background:#E6E1D9}
.custom-marker{width:38px;height:38px;border-radius:50% 50% 50% 10%;transform:rotate(-45deg);display:grid;place-items:center;border:3px solid white;box-shadow:0 5px 14px rgba(0,0,0,.23);position:relative}
.custom-marker span{transform:rotate(45deg);font-size:13px;font-weight:900;color:white}
.custom-marker.main-route.locked{background:#42566b}
.custom-marker.main-route.done{background:var(--green)}
.custom-marker.main-route.current{background:var(--blue);box-shadow:0 0 0 4px rgba(31,139,202,.18),0 6px 15px rgba(0,0,0,.24)}
.custom-marker.bonus{width:36px;height:36px;border-radius:50%;transform:none;background:#D89A23;border-color:#fff}
.custom-marker.bonus span{transform:none;font-size:16px;line-height:1}
.custom-marker.bonus em{position:absolute;left:50%;top:31px;transform:translateX(-50%);font-style:normal;font-size:7px;line-height:1;font-weight:900;letter-spacing:.08em;color:#6c4700;background:#fff7d9;border:1px solid rgba(132,92,14,.22);border-radius:8px;padding:3px 5px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.custom-marker.bonus.current{box-shadow:0 0 0 4px rgba(216,154,35,.24),0 6px 15px rgba(0,0,0,.24)}
.custom-marker.bonus.done{background:#D89A23;border-color:#caefd9}
.custom-marker.bonus.done:after{content:"✓";position:absolute;right:-5px;top:-6px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:#21865e;color:white;font-size:9px;font-weight:900;border:2px solid white}
.user-marker{width:18px;height:18px;background:var(--blue);border:4px solid white;border-radius:50%;box-shadow:0 0 0 5px rgba(43,120,197,.22)}
.map-legend{display:flex;gap:14px;flex-wrap:wrap;padding:12px 18px 24px;color:var(--muted);font-size:11px}
.map-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.legend-dot.done{background:var(--green)}.legend-dot.current{background:var(--blue)}.legend-dot.locked{background:#7D8793}.legend-dot.main-route{background:#42566b}.legend-dot.bonus{background:#D89A23}
.map-fallback{margin:0 18px 24px;background:#FFF4D8;border:1px solid #F3D890;border-radius:16px;padding:15px;color:#705711;display:flex;flex-direction:column;gap:3px}

.passport-head{background:var(--navy);color:white;padding:30px 22px 26px;margin:0 12px 20px;border-radius:0 0 28px 28px}
.passport-head h2{color:white;margin-bottom:7px}
.passport-head p{color:rgba(255,255,255,.72);margin:0;line-height:1.5}
.passport-score{display:flex;gap:10px;margin-top:20px}
.passport-score div{border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:10px 14px;min-width:90px}
.passport-score strong{display:block;font-size:22px;color:var(--gold)}
.passport-score span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.passport-grid{padding:0 18px 26px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stamp{aspect-ratio:1/1;border:1.5px dashed #CFC6B7;border-radius:21px;background:rgba(255,255,255,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;color:#938B80}
.stamp.earned{background:var(--paper);border:2px solid var(--navy);color:var(--navy);box-shadow:0 8px 25px rgba(7,27,49,.07);transform:rotate(-1deg)}
.stamp .stamp-icon{font-size:31px;margin-bottom:5px}
.stamp strong{font-size:11px;line-height:1.1}
.stamp small{font-size:9px;margin-top:4px}
.completion-card{margin:0 18px 26px;background:linear-gradient(145deg,var(--navy),#12476F);border-radius:26px;padding:27px;color:white;text-align:center}
.completion-card h2{font-family:"Playfair Display",serif;font-size:31px;margin:6px 0}
.completion-card p{color:rgba(255,255,255,.78);line-height:1.5}
.completion-flag{font-size:46px;margin-bottom:8px}

.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.info-grid article{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px}
.info-grid article span{font-size:22px}
.info-grid h3{font-size:13px;margin:8px 0 4px;color:var(--navy)}
.info-grid p{font-size:12px;line-height:1.45;color:var(--muted);margin:0}
.settings-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;margin-top:16px}
.settings-card h3{margin:0 0 12px;color:var(--navy)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:13px}
.switch-row strong,.switch-row small{display:block}.switch-row small{color:var(--muted);margin-top:2px}
.switch-row input{width:22px;height:22px}
.disclaimer{color:var(--muted);font-size:11px;line-height:1.6;margin-top:18px}

.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1100;
  height:74px;padding:7px max(8px,env(safe-area-inset-left)) max(7px,env(safe-area-inset-bottom));
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:rgba(255,253,248,.95);backdrop-filter:blur(18px);border-top:1px solid var(--line)
}
.nav-btn{border:0;background:transparent;color:#89919A;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
.nav-btn span{font-size:20px;line-height:1}
.nav-btn small{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.nav-btn.active{color:var(--navy);background:#F3EEE4}

.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,18px);z-index:1500;background:var(--navy);color:white;border-radius:999px;padding:10px 14px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100% - 30px);text-align:center;box-shadow:0 8px 25px rgba(0,0,0,.18)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(min-width:680px){
  .hero{margin-top:16px;border-radius:30px;padding:46px 42px 36px}
  .section{padding-left:28px;padding-right:28px}
  .passport-grid{grid-template-columns:repeat(5,1fr);padding-left:28px;padding-right:28px}
  .stop-card{margin-left:28px;margin-right:28px;padding:27px}
  .tour-status{padding-left:28px;padding-right:28px}
  #map{margin-left:28px;margin-right:28px}
  .map-heading{padding-left:28px;padding-right:28px}
  .info-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:390px){
  .hero-stats strong{font-size:15px}
  .hero-actions .btn{width:100%}
  .passport-grid{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}


/* --- Antigua tropical V2 --- */
.antigua-stripe{
  height:7px;
  background:linear-gradient(90deg,
    var(--red) 0 18%,
    var(--mango) 18% 36%,
    var(--turquoise) 36% 55%,
    var(--blue) 55% 73%,
    var(--green) 73% 88%,
    var(--navy) 88% 100%);
}

.topbar{
  background:rgba(255,252,245,.94);
}

.brand-mark{
  background:
    radial-gradient(circle at 50% 62%,var(--gold) 0 24%,transparent 25%),
    linear-gradient(145deg,var(--navy),var(--blue));
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 5px 14px rgba(6,35,61,.12);
}

.hero{
  background:
    radial-gradient(circle at 88% 14%,rgba(255,212,71,.88) 0 7%,rgba(255,212,71,.18) 7.5% 18%,transparent 18.5%),
    radial-gradient(circle at 12% 82%,rgba(18,183,177,.30),transparent 30%),
    linear-gradient(145deg,#06233D 0%,#075083 55%,#0A7EA6 100%);
}
.hero:before{
  content:"";
  position:absolute;
  width:190px;height:95px;
  right:-25px;bottom:-14px;
  border-radius:50% 50% 0 0;
  background:
    linear-gradient(155deg,transparent 48%,rgba(255,255,255,.08) 49% 54%,transparent 55%),
    linear-gradient(25deg,transparent 48%,rgba(255,255,255,.08) 49% 54%,transparent 55%);
  opacity:.8;
}
.hero:after{
  right:-68px;bottom:-92px;width:225px;height:225px;
  border:30px solid rgba(255,212,71,.08);
}
.hero h1 span{
  color:var(--gold);
  text-shadow:0 3px 18px rgba(255,212,71,.10);
}
.hero .btn.primary{
  background:linear-gradient(135deg,var(--gold),var(--mango));
  box-shadow:0 8px 20px rgba(255,182,41,.20);
}
.hero-stats div:nth-child(1){border-top-color:rgba(255,212,71,.55)}
.hero-stats div:nth-child(2){border-top-color:rgba(18,183,177,.65)}
.hero-stats div:nth-child(3){border-top-color:rgba(255,115,93,.65)}

.eyebrow.dark{color:#0874B3}
.progress-chip{
  background:linear-gradient(135deg,#fff,var(--sky));
  border-color:#BDE8E8;
}

.experience-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:1px 1px 13px;
  margin-bottom:2px;
  scrollbar-width:none;
}
.experience-strip::-webkit-scrollbar{display:none}
.experience-strip span{
  flex:0 0 auto;
  border-radius:999px;
  padding:8px 11px;
  background:var(--paper);
  border:1px solid var(--line);
  font-size:11px;
  font-weight:800;
  color:var(--navy);
}
.experience-strip span:nth-child(4n+1){background:#FFF0EC;border-color:#FFD2C9}
.experience-strip span:nth-child(4n+2){background:#E9FAF8;border-color:#BCEBE6}
.experience-strip span:nth-child(4n+3){background:#FFF7D8;border-color:#F5DF89}
.experience-strip span:nth-child(4n+4){background:#EEF6FF;border-color:#C8E0F6}

.route-row{
  position:relative;
  overflow:hidden;
}
.route-row:after{
  content:"";
  width:5px;
  align-self:stretch;
  border-radius:99px;
  background:var(--blue);
  position:absolute;left:0;top:9px;bottom:9px;
}
.route-row:nth-child(4n+1):after{background:var(--coral)}
.route-row:nth-child(4n+2):after{background:var(--turquoise)}
.route-row:nth-child(4n+3):after{background:var(--mango)}
.route-row:nth-child(4n+4):after{background:var(--green)}
.route-row .num{
  background:linear-gradient(135deg,#F7FBFF,#E9F6F8);
  color:var(--navy);
}
.route-row.done .num{
  background:linear-gradient(135deg,#DAF5E6,#E7FAF3);
}

.stop-card{
  position:relative;
  overflow:hidden;
}
.stop-card:before{
  content:"";
  position:absolute;
  right:-38px;top:-40px;
  width:120px;height:120px;border-radius:50%;
  background:rgba(18,183,177,.08);
  pointer-events:none;
}
.stop-icon{
  background:linear-gradient(135deg,#FFF7D8,#E9FAF8);
  border:1px solid #F1E1B3;
}
.theme-pill{
  background:linear-gradient(135deg,#EAF7FF,#E9FAF8);
  color:#0A638E;
  border:1px solid #C8EAF0;
}
.unlock-banner{
  background:linear-gradient(135deg,#E9F9EF,#E9FAF8);
  color:#176C4B;
  border:1px solid #BFE8D2;
}
.progress-fill{
  background:linear-gradient(90deg,var(--coral),var(--mango),var(--turquoise),var(--blue));
}
.score-box{
  background:linear-gradient(145deg,var(--navy),#0B4D76);
}
.btn.primary{
  background:linear-gradient(135deg,var(--gold),var(--mango));
  color:var(--navy);
  box-shadow:0 6px 15px rgba(255,182,41,.15);
}
.option-btn{
  transition:.16s ease;
}
.option-btn:hover{
  border-color:#A9D7E8;
  background:#FAFEFF;
}
.option-btn.selected{
  border-color:var(--turquoise);
  background:#E9FAF8;
}
.challenge-note{
  background:linear-gradient(145deg,#FFF8E4,#FFF0EA);
  border:1px solid #F3DFC3;
}

.fun-fact-card{
  border:1px solid #F1DCA0;
  background:linear-gradient(135deg,#FFF8DD,#FFF2E7);
  border-radius:18px;
  padding:14px;
  margin:16px 0 0;
}
.fun-fact-card .fact-label{
  display:block;
  color:#9A6200;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.fun-fact-card p{margin:0;color:#4C4438;font-size:13px;line-height:1.55}

.then-now{
  margin-top:16px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#EEE6D7;
}
.then-now-stage{
  position:relative;
  height:180px;
  overflow:hidden;
}
.then-now-side{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px;color:white;
}
.then-now-side strong{
  font-family:"Playfair Display",serif;font-size:26px;line-height:1;
}
.then-now-side small{font-weight:700;margin-top:5px;color:rgba(255,255,255,.8)}
.then-now-old{
  background:
    linear-gradient(0deg,rgba(44,30,17,.62),rgba(44,30,17,.05)),
    repeating-linear-gradient(35deg,#A8794D 0 18px,#C0976B 18px 36px);
}
.then-now-new{
  background:
    linear-gradient(0deg,rgba(0,51,72,.55),rgba(0,51,72,.05)),
    linear-gradient(135deg,#22B8B1,#1789CB 62%,#FED45A);
  clip-path:inset(0 0 0 50%);
}
.then-now-divider{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:white;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  pointer-events:none;
}
.then-now-knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:white;color:var(--navy);
  display:grid;place-items:center;font-weight:900;box-shadow:0 5px 18px rgba(0,0,0,.18);
  pointer-events:none;
}
.then-now-range{
  width:calc(100% - 28px);
  margin:11px 14px 13px;
  accent-color:var(--turquoise);
}
.then-now-caption{
  padding:0 14px 10px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.passport-head{
  background:
    radial-gradient(circle at 82% 20%,rgba(255,212,71,.22),transparent 26%),
    linear-gradient(145deg,var(--navy),#0A648A);
}
.stamp.earned:nth-child(5n+1){border-color:var(--coral)}
.stamp.earned:nth-child(5n+2){border-color:var(--turquoise)}
.stamp.earned:nth-child(5n+3){border-color:var(--mango)}
.stamp.earned:nth-child(5n+4){border-color:var(--green)}
.stamp.earned:nth-child(5n+5){border-color:var(--blue)}

.completion-card{
  background:
    radial-gradient(circle at 80% 15%,rgba(255,212,71,.26),transparent 25%),
    linear-gradient(145deg,var(--navy),#087CA0);
}

.bottom-nav{
  background:rgba(255,252,245,.96);
}
.nav-btn.active{
  color:var(--navy);
  background:linear-gradient(135deg,#FFF5D5,#E8F8F7);
}

@media(max-width:420px){
  .then-now-stage{height:155px}
}


/* V3.7 real Then ↔ Now comparison */
.then-now-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px 11px;
  background:#FFFCF5;
  border-bottom:1px solid var(--line);
}
.then-now-header strong{
  color:var(--navy);
  font-size:15px;
}
.then-now-header span{
  color:#6C6A64;
  font-size:11px;
  text-align:right;
}
.then-now-stage.real-images{
  aspect-ratio:16 / 9;
  height:auto;
  min-height:180px;
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  background:#D8D5CF;
  outline:none;
}
.then-now-stage.real-images:focus-visible{
  outline:3px solid rgba(22,139,210,.35);
  outline-offset:-3px;
}
.then-now-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
.then-now-new-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 0 0 50%);
  will-change:clip-path;
}
.then-now-badge{
  position:absolute;
  top:11px;
  z-index:4;
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  color:white;
  background:rgba(6,35,61,.78);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.then-badge{left:11px}
.now-badge{right:11px}
.then-now-divider{
  z-index:5;
  width:3px;
  background:white;
  box-shadow:0 0 0 1px rgba(6,35,61,.18), 0 0 12px rgba(0,0,0,.25);
  pointer-events:none;
}
.then-now-knob{
  z-index:6;
  width:48px;
  height:48px;
  margin-left:-24px;
  margin-top:-24px;
  top:50%;
  display:grid;
  place-items:center;
  border:2px solid white;
  border-radius:50%;
  background:var(--navy);
  color:white;
  font-size:20px;
  font-weight:900;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  cursor:ew-resize;
  padding:0;
}
.then-now-knob:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}
.then-now-range{
  accent-color:var(--blue);
}
@media (max-width:480px){
  .then-now-header{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
  .then-now-header span{text-align:left}
}


/* V4.0 — Heritage Quay complete */
.arrival-panel{
  text-align:center;
  padding:28px 18px 22px;
  border-radius:20px;
  background:linear-gradient(145deg,#FFF8E2,#FFFCF5);
  border:1px solid #E7D6A0;
  margin-top:14px;
}
.arrival-pin{font-size:38px;margin-bottom:8px}
.arrival-panel h3{font-family:"Playfair Display",serif;color:var(--navy);font-size:27px;margin:6px 0}
.arrival-panel p{color:var(--muted);margin:0 0 12px}
.arrival-reward{display:inline-block;background:#EAF8EF;color:#185E39;border:1px solid #B9E0C8;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;margin-bottom:15px}
.bonus-mission-card{margin-top:14px;border:1px solid #E6D8B0;border-radius:17px;background:#FFF9E9;padding:14px}
.bonus-mission-card strong{display:block;color:var(--navy);font-size:16px;margin:4px 0}
.bonus-mission-card p{margin:0 0 12px!important;font-size:13px}
.bonus-tag{font-size:9px;font-weight:900;letter-spacing:.09em;color:#8C6511}
.bonus-challenge-area{margin-top:14px;padding-top:14px;border-top:1px solid #E6D8B0}
.bonus-challenge-area h3{font-family:"Playfair Display",serif;color:var(--navy);font-size:22px;margin:0 0 7px}
.mission-instructions{font-size:12px!important;font-weight:800;color:#786A49!important}
.stop-completion{margin-top:22px;padding:20px;border-radius:22px;background:linear-gradient(160deg,#06233D,#0B395B);color:white;overflow:hidden}
.stop-completion h3{font-family:"Playfair Display",serif;font-size:28px;margin:5px 0 8px;color:white}
.stop-completion>p{color:rgba(255,255,255,.78);line-height:1.5;margin:0 0 16px}
.completion-kicker{font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--gold)}
.stop-score-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px;margin:15px 0}
.score-title,.score-line{display:flex;justify-content:space-between;gap:12px;align-items:center}
.score-title{padding-bottom:9px;margin-bottom:7px;border-bottom:1px solid rgba(255,255,255,.12)}
.score-title strong{font-size:20px;color:var(--gold)}
.score-line{font-size:12px;padding:5px 0;color:rgba(255,255,255,.86)}
.score-line strong{color:white}
.stop-score-card small{display:block;margin-top:8px;color:rgba(255,255,255,.62);font-size:10px}
.completion-stamp-wrap{display:flex;justify-content:center;padding:8px 0 18px}
.passport-seal{width:190px;aspect-ratio:1;border:4px double currentColor;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-3deg);position:relative;letter-spacing:.03em}
.gateway-seal{color:#F7E4AF;background:rgba(255,255,255,.03)}
.gateway-seal::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--red);right:17px;top:25px}
.passport-seal span{font-size:34px;line-height:1}
.passport-seal strong{font-size:17px;margin:7px 0 3px}
.passport-seal small{font-size:8px;max-width:130px;line-height:1.35}
.passport-seal em{font-style:normal;font-size:9px;font-weight:900;margin-top:7px;letter-spacing:.16em}
.next-clue-card{background:#FFFCF5;color:var(--navy);border-radius:16px;padding:14px;margin:6px 0 12px}
.next-clue-card span{font-size:10px;font-weight:900;letter-spacing:.1em;color:#8C6511}
.next-clue-card p{font-family:"Playfair Display",serif;font-size:17px;line-height:1.45;margin:7px 0 0;color:var(--navy)}
.full-btn{width:100%}
.stop-completion .btn.secondary{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:white;margin-bottom:12px}
.bonus-complete-note{text-align:center;color:#BCE7CA;font-weight:800;font-size:12px;margin:0 0 12px}
.stamp.gateway-stamp{padding:7px;background:#FFFDF7}
.passport-seal.compact{width:100%;max-width:135px;color:var(--navy);border-width:3px;background:transparent}
.passport-seal.compact span{font-size:25px}.passport-seal.compact strong{font-size:11px}.passport-seal.compact small{font-size:6px}.passport-seal.compact em{font-size:7px}
.passport-seal.compact::after{width:9px;height:9px;right:13px;top:18px}
.option-btn:disabled{cursor:default;opacity:.92}
@media(max-width:480px){
  .stop-completion{padding:17px}
  .passport-seal{width:165px}
  .score-line{font-size:11px}
}


/* =========================
   V5.0 Modern Tropical UI
   ========================= */
:root{
  --cream:#FFF9EB;
  --aqua:#0DB7AE;
  --ocean:#087EA4;
  --sun:#FFD447;
  --hibiscus:#F15C64;
  --palm:#2F9A68;
  --deep:#052A43;
  --soft-shadow:0 20px 60px rgba(5,42,67,.10);
}
html{background:var(--cream)}
body{
  background:
    radial-gradient(circle at 8% 3%,rgba(255,212,71,.16),transparent 22rem),
    radial-gradient(circle at 100% 26%,rgba(13,183,174,.10),transparent 26rem),
    linear-gradient(180deg,#FFF9EB 0%,#FFFDF7 48%,#F1FBF8 100%);
}
.topbar{background:rgba(255,249,235,.82);border-bottom:1px solid rgba(5,42,67,.06);backdrop-filter:blur(20px) saturate(1.2)}
.brand-mark{border-radius:50%;background:linear-gradient(145deg,var(--deep),#0A567A);box-shadow:0 8px 24px rgba(5,42,67,.16)}
.gps-pill{background:rgba(255,255,255,.72);border-color:rgba(5,42,67,.08);box-shadow:0 6px 20px rgba(5,42,67,.05)}
.view.active.view-enter{animation:viewIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}

.hero{
  margin:14px 16px 30px;padding:42px 28px 30px;border-radius:34px;
  background:
    radial-gradient(circle at 87% 17%,var(--sun) 0 8%,rgba(255,212,71,.12) 8.5% 18%,transparent 18.5%),
    radial-gradient(circle at 95% 105%,rgba(13,183,174,.35) 0 18%,transparent 18.5%),
    linear-gradient(145deg,#062B46 0%,#075783 56%,#0A8E9A 115%);
  box-shadow:0 24px 70px rgba(5,42,67,.18)
}
.hero:after{right:-70px;bottom:-110px;width:260px;height:260px;border:32px solid rgba(255,255,255,.07)}
.hero h1{font-size:clamp(39px,8vw,62px);line-height:.96;max-width:690px}
.hero-copy{font-size:16px;max-width:640px;color:rgba(255,255,255,.86)}
.hero-stats{margin:28px 0 24px;gap:18px}.hero-stats div{border-top-color:rgba(255,255,255,.26)}
.hero-actions{gap:12px}.hero .btn{min-height:50px;border-radius:16px;padding-inline:19px}
.hero .btn.primary{background:linear-gradient(135deg,var(--sun),#FFB92B);box-shadow:0 10px 28px rgba(255,190,40,.22)}
.hero .btn.secondary{background:rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.section{padding-inline:20px}.section-head{margin-bottom:16px}
.route-preview{gap:11px}.route-row{border:1px solid rgba(5,42,67,.07);background:rgba(255,255,255,.72);backdrop-filter:blur(10px);border-radius:20px;padding:14px;box-shadow:0 8px 28px rgba(5,42,67,.035)}
.route-row .num{border-radius:14px;background:linear-gradient(135deg,#FFF3CF,#F4F9ED)}

.stop-card{margin:0 14px;background:rgba(255,255,255,.84);border:1px solid rgba(5,42,67,.07);border-radius:30px;padding:22px;box-shadow:var(--soft-shadow);backdrop-filter:blur(16px)}
.stop-icon{background:linear-gradient(145deg,#FFF2C9,#DDF8F3);border-radius:20px}
.stop-heading h2{font-size:34px}.stop-heading p{font-size:15px}
.distance-panel{border-color:rgba(5,42,67,.08)}
.unlock-banner{background:linear-gradient(90deg,#E7FAF2,#EFFBFA);color:#176B55;border:1px solid rgba(47,154,104,.1)}
.arrival-panel{background:linear-gradient(155deg,#F1FBF8,#FFF7DA);border:1px solid rgba(13,183,174,.16);border-radius:24px}
.arrival-reward{background:white;border:1px solid rgba(5,42,67,.08);box-shadow:0 8px 22px rgba(5,42,67,.05)}

.btn{border-radius:15px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{box-shadow:0 8px 22px rgba(5,42,67,.08)}
.btn.primary{background:linear-gradient(135deg,var(--sun),#FFB52B);color:var(--deep)}
.btn.secondary{background:rgba(255,255,255,.86);border-color:rgba(5,42,67,.10)}

/* Guided Stop 1 */
.heritage-flow{margin-top:18px}
.flow-progress{display:flex;gap:8px;align-items:center;margin:0 0 18px;padding:0 2px}
.flow-dot{height:5px;flex:1;border-radius:99px;background:#E8E5DC;transition:.3s ease}
.flow-dot.active{background:linear-gradient(90deg,var(--aqua),var(--ocean))}.flow-dot.done{background:var(--palm)}
.flow-panel{animation:flowIn .38s cubic-bezier(.2,.85,.2,1)}
@keyframes flowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.flow-copy{padding:4px 2px 2px}.flow-copy.compact-copy{margin-bottom:14px}
.flow-eyebrow{font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:900;color:var(--ocean);margin-bottom:8px}.flow-eyebrow.light{color:#9EEFE4}
.flow-copy h3,.guided-completion h3{font-family:"Playfair Display",serif;color:var(--deep);font-size:31px;line-height:1.04;margin:0 0 10px}
.flow-copy p{color:#506372;line-height:1.65;margin:0 0 12px}.flow-lead{font-size:18px!important;color:var(--deep)!important;font-weight:700}
.guided-story{font-size:15px;line-height:1.72;color:#263C4B}.guided-story .lead{font-family:"Playfair Display",serif;font-size:22px;color:var(--deep);line-height:1.25}.guided-story p{margin:0 0 14px}
.flow-cta{width:100%;margin-top:16px;min-height:52px}
.flow-actions{display:flex;gap:10px;margin-top:18px}.flow-actions>*{flex:1}.flow-actions.single-line .btn:first-child{flex:.65}.flow-actions.two-choice{align-items:stretch}

.overview-media{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:#DCEBEA;margin-bottom:22px;box-shadow:0 16px 40px rgba(5,42,67,.12)}
.overview-media img,.overview-media video{width:100%;height:100%;object-fit:cover;display:block}
.overview-media .media-caption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:9px;background:rgba(5,42,67,.72);backdrop-filter:blur(10px);color:white;border-radius:14px;padding:9px 11px;font-size:12px}
.overview-media video+.media-caption{pointer-events:none}.overview-media .media-caption span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}

.modern-fact{display:flex;gap:12px;background:linear-gradient(145deg,#FFF7D8,#F1FAF4);border:1px solid rgba(255,190,40,.28);border-radius:20px;padding:15px;margin-top:18px}.modern-fact>span{font-size:23px}.modern-fact strong{color:var(--deep);font-size:13px}.modern-fact p{margin:3px 0 0!important;font-size:13px;line-height:1.5}
.guided-then-now{margin-top:2px;border-radius:24px;overflow:hidden;box-shadow:0 12px 36px rgba(5,42,67,.08);border-color:rgba(5,42,67,.07)}
.guided-then-now .then-now-header{background:rgba(255,255,255,.94)}
.guided-then-now .then-now-range{margin:12px 15px 5px;width:calc(100% - 30px)}
.guided-then-now .then-now-caption{background:white;padding:8px 15px 15px;color:#60717C}

.guided-question-area{margin-top:8px}.modern-options{gap:10px}.modern-options .option-btn{border-radius:17px;padding:15px;background:rgba(255,255,255,.9);border:1px solid rgba(5,42,67,.10);box-shadow:0 6px 18px rgba(5,42,67,.035)}
.guided-feedback{margin-top:12px;border-radius:16px;padding:13px 14px;font-size:13px;line-height:1.5}.guided-feedback.ok{background:#EAF8EF;color:#185E39}.guided-feedback.no{background:#FFF0F0;color:#8D2020}
.guided-success{display:flex;justify-content:space-between;gap:12px;align-items:center;background:linear-gradient(135deg,#E9FAF3,#EAF7FB);border-radius:18px;padding:14px 15px;margin:12px 0}.guided-success strong{color:#176B55}.guided-success span{font-size:12px;color:#55717A}
.flow-empty-media{background:#F2F6F4;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:4px;color:#60717C}.flow-empty-media strong{color:var(--deep)}

.guided-completion{background:linear-gradient(155deg,#052A43 0%,#07587C 58%,#078B91 120%);border-radius:26px;padding:24px;color:white;position:relative;overflow:hidden}.guided-completion:after{content:"";position:absolute;right:-55px;top:-45px;width:170px;height:170px;border:26px solid rgba(255,212,71,.12);border-radius:50%;pointer-events:none}.guided-completion h3{color:white;font-size:32px}.guided-completion>p{color:rgba(255,255,255,.78);margin:0 0 18px}.guided-completion .passport-seal{margin:18px auto;background:rgba(255,255,255,.98)}
.guided-score{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:end;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px;margin:14px 0}.guided-score span{font-size:12px;color:rgba(255,255,255,.72)}.guided-score strong{font-size:24px;color:var(--sun)}.guided-score small{grid-column:1/-1;color:rgba(255,255,255,.6);font-size:10px}
.guided-clue{background:rgba(255,255,255,.96);color:var(--deep);border-radius:20px;padding:16px;margin-top:16px}.guided-clue span{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--ocean)}.guided-clue p{margin:7px 0 0;line-height:1.55}
.text-button{display:block;margin:13px auto 0;border:0;background:transparent;color:rgba(255,255,255,.75);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Cleaner mobile rhythm */
@media (max-width:560px){
  .hero{margin:10px 10px 25px;padding:32px 20px 24px;border-radius:28px}.hero h1{font-size:42px}.hero-stats{gap:9px}.hero-stats strong{font-size:15px}.hero-actions .btn{flex:1;min-width:145px}
  .stop-card{margin:0 10px;padding:18px;border-radius:26px}.stop-heading h2{font-size:31px}.tour-status{padding:15px 13px}.flow-copy h3,.guided-completion h3{font-size:28px}.flow-actions{flex-direction:column}.flow-actions.single-line{flex-direction:row}.overview-media{border-radius:20px}
}
@media (prefers-reduced-motion:reduce){.view.active.view-enter,.flow-panel{animation:none}.btn{transition:none}}


/* V5.1 overview video hero */
.overview-media.video-ready{
  position:relative;
  background:#082D48;
}
.overview-media.video-ready video{
  cursor:pointer;
}
.video-quick-controls{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.video-pill{
  min-height:38px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(5,42,67,.72);
  backdrop-filter:blur(10px);
  color:#fff;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.video-pill:hover{background:rgba(5,42,67,.86)}
.video-pill:focus-visible{
  outline:3px solid #FFD447;
  outline-offset:2px;
}
.overview-media.video-ready .media-caption{
  padding-right:14px;
}
.overview-media.video-ready .media-caption small{
  margin-left:auto;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.flow-cta.video-finished-cue{
  animation:videoReadyCue .7s ease-in-out 2;
}
@keyframes videoReadyCue{
  0%,100%{transform:translateY(0);box-shadow:none}
  50%{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,182,41,.28)}
}
@media (prefers-reduced-motion: reduce){
  .flow-cta.video-finished-cue{animation:none}
}
@media (max-width:560px){
  .video-quick-controls{
    top:9px;
    right:9px;
    gap:5px;
  }
  .video-pill{
    min-height:34px;
    padding:7px 9px;
    font-size:10px;
  }
  .overview-media.video-ready .media-caption small{display:none}
}


/* V5.3 universal mobile tap hardening */
.hero::before,
.hero::after,
.guided-completion::after{
  pointer-events:none !important;
}

.hero > *{
  position:relative;
  z-index:1;
}

.hero-actions{
  position:relative;
  z-index:3;
}

button,
.btn,
.nav-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.hero-actions button{
  pointer-events:auto;
}


/* V5.4: startup is deliberately dependency-free on mobile. */


/* ============================================================
   V5.5 — destination-style Home + badge route + smooth flow
   ============================================================ */

.home-adventure-section{
  padding-top:0;
}
.home-adventure-card{
  background:
    radial-gradient(circle at 95% 0%,rgba(255,212,71,.22) 0 88px,transparent 89px),
    linear-gradient(145deg,#FFFFFF,#F5FBF8);
  border:1px solid rgba(5,42,67,.08);
  border-radius:26px;
  padding:22px;
  box-shadow:0 14px 38px rgba(5,42,67,.06);
}
.home-adventure-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}
.home-adventure-top h2{
  margin:4px 0 0;
}
.home-points-orb{
  width:84px;
  aspect-ratio:1;
  border-radius:24px;
  background:linear-gradient(145deg,#052A43,#087896);
  color:white;
  display:grid;
  place-content:center;
  text-align:center;
  flex:0 0 auto;
}
.home-points-orb strong{
  font-size:25px;
  color:var(--sun);
  line-height:1;
}
.home-points-orb span{
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.08em;
  margin-top:5px;
}
.home-adventure-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:18px 0 12px;
}
.home-adventure-metrics div{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(5,42,67,.07);
  border-radius:17px;
  padding:12px 14px;
}
.home-adventure-metrics strong{
  display:block;
  color:var(--deep);
  font-size:17px;
}
.home-adventure-metrics span{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.08em;
  margin-top:2px;
}
.home-prize-note,
.flow-prize-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#FFF7D8;
  border:1px solid rgba(255,182,41,.28);
  border-radius:17px;
  padding:12px 14px;
}
.home-prize-note span,
.flow-prize-note span{
  font-size:21px;
  line-height:1;
}
.home-prize-note p,
.flow-prize-note p{
  margin:0;
  color:#5E4B18;
  font-size:13px;
  line-height:1.45;
  font-weight:650;
}
.home-adventure-card .full-btn{
  margin-top:14px;
}

.home-explore-section{
  padding-top:4px;
}
.home-explore-visual{
  min-height:260px;
  border-radius:27px;
  background:
    linear-gradient(110deg,rgba(5,42,67,.88),rgba(5,42,67,.18)),
    linear-gradient(135deg,#063653,#078B91);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(5,42,67,.1);
}
.home-explore-copy{
  color:white;
  padding:24px;
  max-width:430px;
}
.home-explore-copy span{
  display:block;
  color:#A9F0E6;
  font-weight:900;
  font-size:10px;
  letter-spacing:.16em;
  margin-bottom:8px;
}
.home-explore-copy strong{
  display:block;
  font-family:"Playfair Display",Georgia,serif;
  font-size:30px;
  line-height:1.03;
}
.home-explore-copy p{
  margin:8px 0 0;
  color:rgba(255,255,255,.82);
  line-height:1.5;
  font-size:13px;
}
.home-category-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.home-category-card{
  min-height:128px;
  border-radius:20px;
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.home-category-card span{
  font-size:24px;
  margin-bottom:auto;
}
.home-category-card strong{
  color:var(--deep);
  font-size:14px;
}
.home-category-card small{
  color:#526773;
  line-height:1.25;
  margin-top:3px;
}
.food-card{background:linear-gradient(145deg,#FFF0D6,#FFD9BE)}
.shop-card{background:linear-gradient(145deg,#DFF8F2,#C9EEE9)}
.event-card{background:linear-gradient(145deg,#E7F4FF,#D3E6FF)}
.home-directory-link{
  margin-top:12px;
  text-decoration:none;
  text-align:center;
}

/* Compact route rows with one miniature passport-style badge */
.route-row{
  grid-template-columns:58px minmax(0,1fr) auto !important;
  min-height:78px;
  align-items:center;
}
.route-row .num,
.route-row .arrow{
  display:none !important;
}
.route-mini-seal{
  width:52px;
  aspect-ratio:1;
  border:2px double currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  transform:rotate(-3deg);
  background:#FFFDF7;
  color:#77909D;
  transition:.2s ease;
}
.route-mini-icon{
  font-size:20px;
  line-height:1;
}
.route-mini-seal small{
  position:absolute;
  right:-3px;
  bottom:-3px;
  width:19px;
  height:19px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:white;
  border:1px solid rgba(5,42,67,.12);
  color:var(--deep);
  font-size:9px;
  font-weight:900;
}
.route-mini-seal.current{
  color:var(--ocean);
  background:#E9FBF8;
  box-shadow:0 0 0 5px rgba(18,183,177,.08);
}
.route-mini-seal.done{
  color:var(--palm);
  background:#ECF8EE;
}
.route-mini-seal.locked{
  filter:grayscale(.55);
  opacity:.72;
}
.route-row-name{
  min-width:0;
}
.route-row-name strong{
  display:block;
  font-size:15px;
  line-height:1.25;
}
.route-state{
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  color:#8B9AA3;
}
.route-state.current{color:var(--ocean)}
.route-state.done{color:var(--palm)}
.route-row.current{
  border-color:rgba(18,183,177,.38);
  box-shadow:0 0 0 3px rgba(18,183,177,.07);
}

/* Flow navigation */
.flow-step-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 10px;
  min-height:34px;
}
.flow-step-nav>span{
  margin-left:auto;
  color:#71818B;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.flow-step-nav.complete-nav{
  justify-content:flex-end;
}
.flow-back-btn{
  min-height:34px;
  border:0;
  background:transparent;
  color:var(--deep);
  padding:4px 2px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.flow-back-btn:focus-visible{
  outline:3px solid rgba(18,183,177,.24);
  outline-offset:3px;
  border-radius:8px;
}

.flow-prize-note{
  margin-top:14px;
}
.flow-prize-note p{
  font-size:12px;
}
.video-loop-label{
  min-height:38px;
  padding:8px 11px;
  display:flex;
  align-items:center;
  border-radius:999px;
  background:rgba(5,42,67,.62);
  color:rgba(255,255,255,.86);
  font-size:10px;
  font-weight:800;
  backdrop-filter:blur(10px);
}

/* Success feedback feels transitional rather than requiring extra buttons */
.guided-feedback.ok{
  animation:successPulse .55s ease;
}
@keyframes successPulse{
  0%{transform:scale(.985);opacity:.65}
  100%{transform:scale(1);opacity:1}
}

@media (max-width:560px){
  .home-adventure-card{
    padding:18px;
    border-radius:23px;
  }
  .home-points-orb{
    width:72px;
    border-radius:21px;
  }
  .home-category-grid{
    grid-template-columns:1fr 1fr;
  }
  .home-category-card:last-child{
    grid-column:1 / -1;
    min-height:100px;
  }
  .home-explore-visual{
    min-height:225px;
    border-radius:23px;
  }
  .home-explore-copy{
    padding:19px;
  }
  .home-explore-copy strong{
    font-size:26px;
  }
  .route-row{
    min-height:74px;
    padding:11px 13px !important;
  }
}


/* V5.6 clickable local discovery cards */
.category-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.category-link:active{
  transform:scale(.985);
}
@media (hover:hover) and (pointer:fine){
  .category-link:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(5,42,67,.10);
  }
}
.category-link:focus-visible{
  outline:3px solid rgba(18,183,177,.32);
  outline-offset:3px;
}


/* ============================================================
   V5.7 — Stop 2: Museum / The Time Vault
   ============================================================ */

.museum-hero-media{
  position:relative;
  min-height:250px;
  border-radius:25px;
  overflow:hidden;
  background:#E8E0CF;
  box-shadow:0 16px 38px rgba(5,42,67,.10);
}
.museum-hero-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:250px;
  max-height:380px;
  object-fit:cover;
}
.museum-media-overlay{
  position:absolute;
  inset:auto 14px 14px 14px;
  display:flex;
  gap:11px;
  align-items:center;
  padding:12px 14px;
  border-radius:17px;
  color:#fff;
  background:rgba(5,34,52,.78);
  backdrop-filter:blur(10px);
}
.museum-media-overlay>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:#F3D792;
  font-size:19px;
}
.museum-media-overlay strong,
.museum-media-overlay small{
  display:block;
}
.museum-media-overlay strong{
  line-height:1.15;
  font-size:13px;
}
.museum-media-overlay small{
  margin-top:3px;
  color:rgba(255,255,255,.73);
  font-size:10px;
}

.museum-flow-panel{
  --museum-brass:#B78634;
}
.museum-progress .flow-dot.active{
  background:#B78634;
}
.museum-then-now .then-now-header strong{
  color:#75521E;
}
.museum-completion{
  background:
    radial-gradient(circle at 50% -20%,rgba(239,201,119,.24),transparent 45%),
    linear-gradient(160deg,#092D43,#061F31);
}

.passport-seal.museum-seal{
  color:#825B20;
  border-color:#B98B3E;
  background:
    radial-gradient(circle at center,#FFF8E8 0 55%,#F5E4BC 56% 100%);
  box-shadow:
    inset 0 0 0 4px #FFF8E8,
    inset 0 0 0 6px rgba(143,99,34,.45),
    0 12px 26px rgba(0,0,0,.14);
  transform:rotate(2deg);
}
.passport-seal.museum-seal::before,
.passport-seal.museum-seal::after{
  border-color:rgba(130,91,32,.40);
}
.passport-seal.museum-seal>span{
  filter:sepia(.15);
}

.stamp.museum-stamp{
  background:#FFF9ED;
  border-color:rgba(183,134,52,.28);
}

.route-row.done:nth-child(2) .route-mini-seal{
  color:#9A6B25;
  background:#FFF5DB;
  border-color:#B78634;
}

@media (max-width:560px){
  .museum-hero-media,
  .museum-hero-media img{
    min-height:225px;
  }
}


/* ============================================================
   V5.8 — Museum overview video
   ============================================================ */

.museum-overview-media{
  border-radius:25px;
  overflow:hidden;
  background:#082B40;
}
.museum-overview-media video{
  width:100%;
  display:block;
  min-height:250px;
  max-height:380px;
  object-fit:cover;
}
.museum-video-caption>span{
  background:#F3D792 !important;
}
@media (max-width:560px){
  .museum-overview-media video{
    min-height:225px;
  }
}


/* ============================================================
   V5.9 — Completed stops remain reviewable with normal Back nav
   ============================================================ */

.flow-step-nav.complete-nav{
  justify-content:space-between;
}
.flow-step-nav.complete-nav>span{
  margin-left:0;
}


/* ============================================================
   V5.10 — Stop 3: St. John's Cathedral / completely outdoor
   ============================================================ */

.cathedral-progress .flow-dot.active{
  background:#D49A32;
}
.cathedral-flow-panel{
  --cathedral-gold:#D49A32;
}
.outside-only-note{
  margin-top:14px;
  padding:13px 14px;
  border-radius:17px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:linear-gradient(145deg,#FFF7DA,#FFF0C3);
  border:1px solid rgba(212,154,50,.24);
}
.outside-only-note>span{
  font-size:21px;
  line-height:1;
}
.outside-only-note p{
  margin:0;
  color:#66501F;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}

.cathedral-hero-media,
.cathedral-overview-media{
  position:relative;
  min-height:260px;
  border-radius:25px;
  overflow:hidden;
  background:#DCECF3;
  box-shadow:0 16px 38px rgba(5,42,67,.10);
}
.cathedral-hero-media img,
.cathedral-overview-media video{
  display:block;
  width:100%;
  height:100%;
  min-height:260px;
  max-height:390px;
  object-fit:cover;
}
.cathedral-media-overlay{
  position:absolute;
  inset:auto 14px 14px 14px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border-radius:17px;
  color:white;
  background:rgba(5,34,52,.78);
  backdrop-filter:blur(10px);
}
.cathedral-media-overlay>span{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#FFE49A;
  font-size:19px;
}
.cathedral-media-overlay strong,
.cathedral-media-overlay small{
  display:block;
}
.cathedral-media-overlay strong{
  font-size:13px;
  line-height:1.15;
}
.cathedral-media-overlay small{
  color:rgba(255,255,255,.76);
  margin-top:3px;
  font-size:10px;
}

.cathedral-hero-fallback{
  min-height:270px;
  position:relative;
  overflow:hidden;
  border-radius:27px;
  background:
    linear-gradient(180deg,#BDE9F7 0%,#EAF7FA 54%,#F6E5C2 55%,#D0A55B 100%);
  box-shadow:0 16px 38px rgba(5,42,67,.10);
}
.cathedral-sky-glow{
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  top:-25px;
  right:20px;
  background:rgba(255,242,174,.78);
  box-shadow:0 0 50px rgba(255,238,149,.66);
}
.cathedral-tower{
  position:absolute;
  bottom:56px;
  width:58px;
  height:128px;
  background:#F3EFE2;
  border:2px solid rgba(77,71,59,.16);
  border-radius:5px 5px 0 0;
  box-shadow:inset 0 -12px 0 rgba(201,190,165,.25);
}
.cathedral-tower span{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:-42px;
  width:46px;
  height:48px;
  background:#F3EFE2;
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.cathedral-tower i{
  position:absolute;
  left:50%;
  top:44px;
  width:17px;
  height:28px;
  border-radius:10px 10px 0 0;
  transform:translateX(-50%);
  background:#6D8992;
}
.tower-left{left:22%}
.tower-right{right:22%}
.cathedral-center-shape{
  position:absolute;
  bottom:55px;
  left:50%;
  transform:translateX(-50%);
  width:118px;
  height:96px;
  display:grid;
  place-items:center;
  background:#E9E2D2;
  border-radius:8px 8px 0 0;
  border:2px solid rgba(77,71,59,.13);
}
.cathedral-center-shape b{
  font-size:34px;
  filter:saturate(.7);
}
.cathedral-fallback-copy{
  position:absolute;
  inset:auto 15px 14px 15px;
  border-radius:17px;
  padding:12px 14px;
  color:white;
  background:rgba(5,34,52,.82);
  backdrop-filter:blur(10px);
}
.cathedral-fallback-copy small,
.cathedral-fallback-copy strong,
.cathedral-fallback-copy span{
  display:block;
}
.cathedral-fallback-copy small{
  font-size:9px;
  letter-spacing:.15em;
  font-weight:900;
  color:#FFE09A;
}
.cathedral-fallback-copy strong{
  font-family:"Playfair Display",Georgia,serif;
  font-size:24px;
  margin-top:2px;
}
.cathedral-fallback-copy span{
  font-size:11px;
  color:rgba(255,255,255,.78);
  margin-top:2px;
}

.cathedral-observe-card,
.visual-hunt-frame{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 0;
  padding:14px 15px;
  border-radius:18px;
  background:#F4FAFC;
  border:1px solid rgba(5,42,67,.08);
}
.observe-icon,
.visual-hunt-frame>span{
  width:43px;
  height:43px;
  border-radius:50%;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:#E7F4F7;
  font-size:21px;
}
.cathedral-observe-card strong,
.cathedral-observe-card p,
.visual-hunt-frame strong,
.visual-hunt-frame small{
  display:block;
}
.cathedral-observe-card p{
  margin:3px 0 0;
  color:#5B6D77;
  font-size:12px;
  line-height:1.4;
}
.visual-hunt-frame{
  background:linear-gradient(145deg,#FFF9E8,#FFF1CB);
  border-color:rgba(212,154,50,.18);
}
.visual-hunt-frame small{
  margin-top:3px;
  color:#786336;
}

.cathedral-completion{
  background:
    radial-gradient(circle at 50% -18%,rgba(255,221,137,.26),transparent 43%),
    linear-gradient(160deg,#14394A,#061F31);
}
.passport-seal.cathedral-seal{
  color:#8B6222;
  border-color:#D1A24C;
  background:
    radial-gradient(circle at center,#FFFBEF 0 54%,#F6E4B7 55% 100%);
  box-shadow:
    inset 0 0 0 4px #FFFBEF,
    inset 0 0 0 6px rgba(151,103,34,.42),
    0 12px 26px rgba(0,0,0,.14);
  transform:rotate(-2deg);
}
.passport-seal.cathedral-seal::before,
.passport-seal.cathedral-seal::after{
  border-color:rgba(139,98,34,.42);
}
.stamp.cathedral-stamp{
  background:#FFF9EA;
  border-color:rgba(209,162,76,.28);
}
.route-row.done:nth-child(3) .route-mini-seal{
  color:#A06D1D;
  background:#FFF4D1;
  border-color:#D1A24C;
}

@media (max-width:560px){
  .cathedral-hero-media,
  .cathedral-overview-media,
  .cathedral-hero-media img,
  .cathedral-overview-media video{
    min-height:230px;
  }
  .cathedral-hero-fallback{
    min-height:255px;
  }
  .tower-left{left:18%}
  .tower-right{right:18%}
}


/* ============================================================
   V5.11 — Stops 4-6 batch
   ============================================================ */

.standard-stop-hero,
.overview-media{
  position:relative;
  min-height:250px;
  border-radius:25px;
  overflow:hidden;
  background:#E8EFF2;
  box-shadow:0 16px 38px rgba(5,42,67,.10);
}
.standard-stop-hero img,
.overview-media video{
  display:block;
  width:100%;
  height:100%;
  min-height:250px;
  max-height:390px;
  object-fit:cover;
}
.standard-stop-overlay{
  position:absolute;
  inset:auto 14px 14px 14px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border-radius:17px;
  color:#fff;
  background:rgba(5,34,52,.78);
  backdrop-filter:blur(10px);
}
.standard-stop-overlay>span{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#FFF0BD;
  font-size:19px;
}
.standard-stop-overlay strong,
.standard-stop-overlay small{display:block}
.standard-stop-overlay strong{font-size:13px}
.standard-stop-overlay small{font-size:10px;color:rgba(255,255,255,.74);margin-top:2px}

.standard-stop-fallback{
  min-height:250px;
  border-radius:25px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  position:relative;
  box-shadow:0 16px 38px rgba(5,42,67,.08);
}
.standard-stop-fallback .fallback-icon{
  position:absolute;
  top:24px;
  right:24px;
  font-size:66px;
  opacity:.82;
}
.standard-stop-fallback small{
  font-size:10px;
  letter-spacing:.14em;
  font-weight:900;
}
.standard-stop-fallback strong{
  font-family:"Playfair Display",Georgia,serif;
  font-size:32px;
  line-height:1;
  margin-top:5px;
}
.standard-stop-fallback p{
  margin:8px 0 0;
  max-width:360px;
  line-height:1.45;
}

.government-fallback{
  background:linear-gradient(145deg,#E5F4F8,#F9EAC6);
  color:#173E4A;
}
.catholic-fallback{
  background:linear-gradient(145deg,#FFF5DF,#EAF4F7);
  color:#4E3F2A;
}
.ital-fallback{
  background:linear-gradient(145deg,#EAF7DC,#FFEAB6);
  color:#2D4B27;
}

.government-progress .flow-dot.active{background:#587D8E}
.catholic-progress .flow-dot.active{background:#B48A4B}
.ital-progress .flow-dot.active{background:#5E8D4D}

.power-timeline{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:7px;
  align-items:center;
  margin:16px 0;
}
.power-timeline div{
  padding:13px 8px;
  text-align:center;
  border-radius:17px;
  background:#F4F8FA;
  border:1px solid rgba(5,42,67,.08);
}
.power-timeline strong{
  display:block;
  font-size:19px;
  color:var(--deep);
}
.power-timeline span{
  display:block;
  margin-top:3px;
  color:#65747D;
  font-size:9px;
  line-height:1.25;
}
.power-timeline i{
  font-style:normal;
  color:#89969E;
  font-weight:900;
}

.reflection-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:22px;
  border-radius:20px;
  background:#F4F9FB;
  border:1px solid rgba(5,42,67,.08);
  margin:14px 0;
}
.reflection-card>span{font-size:32px}
.reflection-card strong{font-size:18px;margin-top:8px;color:var(--deep)}
.reflection-card small{margin-top:5px;color:#677982}

.no-purchase-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  margin-top:14px;
  border-radius:17px;
  background:#F1F8E8;
  border:1px solid rgba(92,141,77,.18);
}
.no-purchase-note span{
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  background:#5E8D4D;color:white;font-weight:900;flex:0 0 auto;
}
.no-purchase-note p{
  margin:1px 0 0;
  color:#46613D;
  font-size:12px;
  line-height:1.4;
  font-weight:700;
}

.ital-ingredients{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin:14px 0;
}
.ital-ingredients span{
  min-height:83px;
  border-radius:18px;
  display:grid;
  place-items:center;
  align-content:center;
  background:#F6F9EB;
  border:1px solid rgba(76,109,58,.10);
  font-size:27px;
}
.ital-ingredients small{
  display:block;
  font-size:9px;
  color:#617456;
  margin-top:5px;
}

.ital-plate-visual{
  text-align:center;
  margin:12px 0 16px;
}
.ital-plate-visual .plate{
  width:190px;
  height:190px;
  margin:auto;
  border-radius:50%;
  background:white;
  border:12px solid #EFF2E5;
  box-shadow:0 8px 24px rgba(5,42,67,.08), inset 0 0 0 2px #DDE4D0;
  display:grid;
  grid-template-columns:1fr 1fr;
  place-items:center;
  padding:22px;
}
.ital-plate-visual .plate span{font-size:36px}
.ital-plate-visual small{
  display:block;
  margin-top:8px;
  color:#78857D;
}

.government-completion{
  background:linear-gradient(160deg,#173D50,#082536);
}
.catholic-completion{
  background:linear-gradient(160deg,#4F443A,#182A32);
}
.ital-completion{
  background:linear-gradient(160deg,#355A37,#17352A);
}

.passport-seal.government-seal{
  color:#365B6C;
  border-color:#6E99A8;
  background:radial-gradient(circle at center,#F8FCFD 0 54%,#DDECF0 55% 100%);
}
.passport-seal.catholic-seal{
  color:#8A6739;
  border-color:#B8935B;
  background:radial-gradient(circle at center,#FFFDF6 0 54%,#F2E6CB 55% 100%);
}
.passport-seal.ital-seal{
  color:#4A743C;
  border-color:#77A765;
  background:radial-gradient(circle at center,#FCFFF8 0 54%,#E5F0D9 55% 100%);
}

@media (max-width:560px){
  .standard-stop-hero,
  .standard-stop-hero img,
  .overview-media,
  .overview-media video{
    min-height:225px;
  }
  .power-timeline{
    grid-template-columns:1fr;
  }
  .power-timeline i{
    transform:rotate(90deg);
    justify-self:center;
  }
  .ital-ingredients{
    grid-template-columns:1fr 1fr;
  }
}


/* ============================================================
   V5.12 — Stops 7-10 + full quest completion
   ============================================================ */

.klaas-progress .flow-dot.active{background:#9B5D45}
.brownies-progress .flow-dot.active{background:#C3834C}
.market-progress .flow-dot.active{background:#D39A2E}
.studio-progress .flow-dot.active{background:#A95F88}

.klaas-fallback{
  background:linear-gradient(145deg,#EADFD6,#D3C0AC);
  color:#4A342C;
}
.brownies-fallback{
  background:linear-gradient(145deg,#FFF0D5,#EFC8A5);
  color:#654328;
}
.market-fallback{
  background:linear-gradient(145deg,#F0F5D9,#FFE1A1);
  color:#3F562A;
}
.studio-fallback{
  background:linear-gradient(145deg,#F2E4F2,#DDECF7);
  color:#49384F;
}

.history-care-note,
.market-respect-note,
.quest-prize-card{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:13px 14px;
  margin-top:14px;
  border-radius:17px;
}
.history-care-note{
  background:#F3E9E3;
  border:1px solid rgba(121,75,56,.16);
}
.history-care-note>span{
  color:#8F5D47;
  font-size:19px;
}
.history-care-note p{
  margin:0;
  color:#60493F;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}

.source-lens-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:19px;
  background:#F7F2EC;
  border:1px solid rgba(90,66,51,.09);
  margin:14px 0;
}
.source-lens-card>span{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#EDE1D2;font-size:21px;flex:0 0 auto;
}
.source-lens-card strong{display:block;color:#49372D}
.source-lens-card p{margin:4px 0 0;color:#6D5A4E;font-size:12px;line-height:1.45}

.bakery-pairing-card{
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:18px;
  margin:14px 0;
  border-radius:21px;
  background:linear-gradient(145deg,#FFF8EA,#F9E3C8);
  border:1px solid rgba(174,116,70,.12);
}
.bakery-pairing-card span{font-size:38px}
.bakery-pairing-card b{font-size:24px;color:#B28358}
.bakery-pairing-card strong{font-size:13px;color:#704C31}

.market-respect-note{
  background:#F1F5E8;
  border:1px solid rgba(91,119,57,.15);
}
.market-respect-note>span{font-size:22px}
.market-respect-note p{
  margin:0;
  color:#53623E;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
}

.sensory-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:15px 0;
}
.sensory-grid div{
  padding:17px 10px;
  text-align:center;
  border-radius:18px;
  background:#F8FAF1;
  border:1px solid rgba(69,94,45,.09);
}
.sensory-grid span{display:block;font-size:28px}
.sensory-grid strong{display:block;margin-top:6px;color:#40532C}
.sensory-grid small{display:block;margin-top:2px;color:#788168}

.final-word-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:16px 0;
}
.final-word-btn{
  min-height:54px;
  border-radius:16px;
  border:1px solid rgba(84,65,96,.12);
  background:#F7F1F7;
  color:#54415F;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.final-word-btn.selected{
  background:#694E78;
  color:#fff;
  border-color:#694E78;
  box-shadow:0 0 0 4px rgba(105,78,120,.11);
}

.final-word-result{
  margin:14px 0;
  padding:16px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
}
.final-word-result small{
  display:block;
  color:rgba(255,255,255,.66);
  font-size:9px;
  letter-spacing:.13em;
}
.final-word-result strong{
  display:block;
  color:#FFE4A1;
  font-family:"Playfair Display",Georgia,serif;
  font-size:28px;
  margin-top:3px;
}

.quest-prize-card{
  background:#FFF6D5;
  border:1px solid rgba(236,185,59,.25);
  color:#5D4A1F;
}
.quest-prize-card>span{font-size:24px}
.quest-prize-card strong{display:block}
.quest-prize-card p{margin:4px 0 0;font-size:12px;line-height:1.4}

.klaas-completion{background:linear-gradient(160deg,#49332C,#1F2428)}
.brownies-completion{background:linear-gradient(160deg,#6A452D,#30231D)}
.market-completion{background:linear-gradient(160deg,#48613A,#20382F)}
.studio-completion{background:linear-gradient(160deg,#503A5D,#172B3A)}

.passport-seal.klaas-seal{
  color:#704636;border-color:#A47761;
  background:radial-gradient(circle at center,#FFF9F5 0 54%,#EAD8CE 55% 100%);
}
.passport-seal.brownies-seal{
  color:#8A5B35;border-color:#C48A57;
  background:radial-gradient(circle at center,#FFF9EF 0 54%,#F0DFC7 55% 100%);
}
.passport-seal.market-seal{
  color:#5A7434;border-color:#87A451;
  background:radial-gradient(circle at center,#FDFFF6 0 54%,#E5EECF 55% 100%);
}
.passport-seal.studio-seal{
  color:#77517C;border-color:#A77CAE;
  background:radial-gradient(circle at center,#FFF9FF 0 54%,#E9DCEA 55% 100%);
}

@media (max-width:560px){
  .sensory-grid{
    grid-template-columns:1fr;
  }
  .sensory-grid div{
    display:grid;
    grid-template-columns:40px 1fr;
    text-align:left;
    align-items:center;
    column-gap:9px;
  }
  .sensory-grid span{
    grid-row:1 / span 2;
  }
  .sensory-grid strong,
  .sensory-grid small{
    margin:0;
  }
}

/* ============================================================
   V5.14 — Tour polish: compact stops, taller video, language UI
   ============================================================ */

.topbar-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.language-button{
  min-height:36px;
  border:1px solid rgba(5,42,67,.09);
  background:rgba(255,255,255,.78);
  color:var(--deep);
  border-radius:999px;
  padding:6px 9px;
  display:flex;
  align-items:center;
  gap:5px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(5,42,67,.04);
}
.language-button>span:first-child{font-size:14px;line-height:1}
.language-button strong{font-size:10px;letter-spacing:.04em}
.language-caret{font-size:9px;color:#71818B}
.language-button:focus-visible{outline:3px solid rgba(18,183,177,.28);outline-offset:2px}

.language-menu{
  position:fixed;
  top:66px;
  right:max(12px,env(safe-area-inset-right));
  z-index:1400;
  width:min(230px,calc(100vw - 24px));
  padding:7px;
  border:1px solid rgba(5,42,67,.10);
  border-radius:18px;
  background:rgba(255,253,248,.98);
  box-shadow:0 20px 55px rgba(5,42,67,.18);
  backdrop-filter:blur(18px);
}
.language-menu button{
  width:100%;
  min-height:45px;
  border:0;
  background:transparent;
  border-radius:13px;
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  color:var(--deep);
  text-align:left;
}
.language-menu button:hover,.language-menu button:focus-visible{background:#F2F8F6;outline:none}
.language-menu button span{font-size:18px}
.language-menu button strong{font-size:13px}
.language-menu button small{font-size:9px;color:#7B8A92;font-weight:900;letter-spacing:.08em}

/* Real place names are the visitor-facing labels; theme/codenames stay in badges only. */
.theme-pill{display:none!important}

/* Compress the stop chrome so media reaches the first viewport sooner. */
.tour-status{
  padding:9px 14px 7px;
  gap:10px;
}
.tour-status .eyebrow{font-size:9px}
.progress-track{height:5px;margin-top:5px}
.score-box{min-width:70px;border-radius:13px;padding:6px 9px}
.score-box strong{font-size:18px}
.score-box span{font-size:8px}

.stop-card{
  padding:13px 15px 16px;
  border-radius:24px;
}
.stop-icon{
  width:46px;
  height:46px;
  border-radius:15px;
  font-size:22px;
  margin-bottom:6px;
}
.stop-heading h2{
  font-size:29px;
  margin:2px 0 3px;
  line-height:1.04;
}
.stop-heading p{
  font-size:13px;
  line-height:1.3;
  margin:0 0 8px;
}
.distance-panel{
  padding:7px 0;
  gap:8px;
}
.distance-panel .label{font-size:8px}
.distance-panel strong{font-size:12px}
.distance-panel .btn.small{min-height:32px;padding:6px 9px;font-size:10px}
.unlock-banner{
  margin:8px 0 6px;
  min-height:30px;
  padding:6px 9px;
  border-radius:10px;
  font-size:9px;
}
.heritage-flow{margin-top:6px}
.flow-step-nav{
  min-height:28px;
  margin:0 0 4px;
  gap:8px;
}
.flow-step-nav>span{font-size:9px}
.flow-back-btn{min-height:28px;font-size:11px;padding:2px}
.flow-progress{gap:5px;margin:0 0 8px;padding:0 1px}
.flow-dot{height:4px}
.flow-copy{padding-top:1px}
.flow-eyebrow{font-size:9px;margin-bottom:5px}
.flow-copy h3,.guided-completion h3{font-size:27px;margin-bottom:7px}
.flow-copy p{line-height:1.48;margin-bottom:8px}
.flow-lead{font-size:16px!important}
.guided-story{font-size:14px;line-height:1.55}
.guided-story .lead{font-size:19px;line-height:1.18}
.guided-story p{margin-bottom:9px}
.modern-fact{margin-top:10px;padding:11px 12px;border-radius:16px}
.modern-fact>span{font-size:18px}
.modern-fact p{font-size:12px;line-height:1.4}
.flow-actions{margin-top:11px;gap:8px}
.flow-cta{margin-top:10px;min-height:47px}
.outside-only-note,.no-purchase-note,.history-care-note,.market-respect-note{margin-top:9px;padding:10px 11px}

/* No auto-repeat control. Videos play once, with only essential controls. */
.video-loop-label{display:none!important}
.video-quick-controls{
  top:9px;
  right:9px;
  gap:5px;
  flex-wrap:nowrap;
}
.video-pill{
  min-height:31px;
  padding:6px 9px;
  font-size:9px;
  border-radius:999px;
}

/* Give video a stronger visual presence. */
.overview-media,
.museum-hero-media,
.museum-overview-media,
.cathedral-hero-media,
.cathedral-overview-media,
.standard-stop-hero{
  min-height:285px;
  margin-bottom:12px;
}
.overview-media img,
.overview-media video,
.museum-hero-media img,
.museum-overview-media video,
.cathedral-hero-media img,
.cathedral-overview-media video,
.standard-stop-hero img{
  min-height:285px;
  max-height:410px;
}
.overview-media{aspect-ratio:auto}
.media-caption,
.museum-media-overlay,
.cathedral-media-overlay,
.standard-stop-overlay{
  padding:8px 10px!important;
  border-radius:13px!important;
}
.media-caption>span,
.museum-media-overlay>span,
.cathedral-media-overlay>span,
.standard-stop-overlay>span{
  width:30px!important;
  height:30px!important;
  font-size:15px!important;
}

@media (max-width:560px){
  .topbar{padding:8px max(10px,env(safe-area-inset-left))}
  .brand-button{gap:7px}
  .brand-mark{width:32px;height:32px;font-size:20px}
  .brand-button strong{font-size:13px}
  .brand-button small{font-size:8px}
  .gps-pill{padding:6px 8px;font-size:10px}
  .language-button{padding:5px 8px;min-height:34px}
  .language-menu{top:57px}

  .tour-status{padding:7px 11px 5px}
  .stop-card{margin:0 8px;padding:11px 13px 14px;border-radius:22px}
  .stop-icon{width:43px;height:43px;margin-bottom:5px}
  .stop-heading h2{font-size:27px}
  .stop-heading p{font-size:12px;margin-bottom:6px}
  .distance-panel{padding:6px 0}
  .unlock-banner{margin:7px 0 5px}

  .overview-media,
  .museum-hero-media,
  .museum-overview-media,
  .cathedral-hero-media,
  .cathedral-overview-media,
  .standard-stop-hero,
  .overview-media video,
  .museum-hero-media img,
  .museum-overview-media video,
  .cathedral-hero-media img,
  .cathedral-overview-media video,
  .standard-stop-hero img{
    min-height:280px!important;
  }

  .flow-copy h3,.guided-completion h3{font-size:25px}
  .flow-lead{font-size:15px!important}
  .guided-story{font-size:13px;line-height:1.48}
  .guided-story .lead{font-size:18px}
  .flow-actions.single-line{gap:7px}
}

@media (max-width:380px){
  .brand-button small{display:none}
  .gps-pill{padding-inline:7px}
  .overview-media,
  .museum-hero-media,
  .museum-overview-media,
  .cathedral-hero-media,
  .cathedral-overview-media,
  .standard-stop-hero,
  .overview-media video,
  .museum-hero-media img,
  .museum-overview-media video,
  .cathedral-hero-media img,
  .cathedral-overview-media video,
  .standard-stop-hero img{
    min-height:260px!important;
  }
}

/* Review mode: Back and Next can move freely through an already-completed stop. */
.flow-step-nav>span{
  margin-left:0!important;
  flex:1 1 auto;
  text-align:center;
}
.flow-step-nav .flow-back-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

/* ============================================================
   V5.14.2 — Passport completion contrast hotfix
   Ensures the final quest-complete card remains legible on iOS Safari.
   ============================================================ */
.completion-card{
  background-color:#052A43 !important;
  background-image:
    radial-gradient(circle at 82% 14%,rgba(255,212,71,.24),transparent 28%),
    linear-gradient(150deg,#052A43 0%,#07587C 62%,#087E8F 100%) !important;
  color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 44px rgba(5,42,67,.18);
}
.completion-card .completion-flag{filter:none;opacity:1}
.completion-card .eyebrow,
.completion-card .eyebrow.gold{
  color:#FFD447 !important;
  opacity:1 !important;
}
.completion-card h2{
  color:#FFFFFF !important;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.completion-card p,
.completion-card #completionWord{
  color:#F4FBFF !important;
  opacity:1 !important;
  font-weight:650;
}
.completion-card .btn.light{
  background:#FFD447 !important;
  color:#052A43 !important;
  border:0 !important;
  min-width:190px;
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}
@media(max-width:560px){
  .completion-card{
    margin:0 14px 30px;
    padding:28px 20px 30px;
  }
  .completion-card h2{font-size:30px;line-height:1.08}
  .completion-card p,
  .completion-card #completionWord{font-size:14px;line-height:1.55}
  .completion-card .btn.light{width:100%;min-height:50px}
}


/* ============================================================
   V5.15 — engagement-first challenges + Quay Studio interview/gallery
   ============================================================ */
.engagement-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0 4px;
}
.engagement-choice{
  min-height:92px;
  border:1px solid rgba(5,42,67,.10);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  color:var(--deep);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;
  text-align:left;
  box-shadow:0 7px 20px rgba(5,42,67,.035);
  touch-action:manipulation;
}
.engagement-choice span{font-size:26px;line-height:1}
.engagement-choice strong{font-size:13px;line-height:1.25}
.engagement-choice.selected{
  border-color:var(--aqua);
  background:#E9FAF8;
  box-shadow:0 0 0 4px rgba(13,183,174,.09);
}
.gallery-availability-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:12px 0 15px;
  padding:12px 13px;
  border-radius:17px;
  background:#F4F1FA;
  border:1px solid rgba(105,78,120,.10);
}
.gallery-availability-note>span{font-size:21px}
.gallery-availability-note p{margin:0;color:#5C5262;font-size:12px;line-height:1.45}
.studio-interview-card{
  margin:14px 0 17px;
  border-radius:23px;
  overflow:hidden;
  background:#102F3E;
  color:#fff;
  box-shadow:0 16px 38px rgba(5,42,67,.12);
}
.studio-interview-video-wrap{position:relative;background:#071F2D;aspect-ratio:16/9;overflow:hidden}
.studio-interview-video-wrap video{width:100%;height:100%;display:block;object-fit:cover;cursor:pointer}
.studio-interview-play{
  position:absolute;
  left:14px;
  bottom:14px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  min-height:42px;
  padding:9px 14px;
  background:rgba(5,42,67,.82);
  backdrop-filter:blur(10px);
  color:white;
  font:inherit;
  font-size:12px;
  font-weight:900;
  box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.studio-interview-meta{padding:14px 16px 16px}
.studio-interview-meta span{display:block;color:#BDEFE8;font-size:9px;font-weight:900;letter-spacing:.14em}
.studio-interview-meta strong{display:block;font-family:"Playfair Display",Georgia,serif;font-size:22px;margin-top:4px}
.studio-interview-meta p{margin:5px 0 0;color:rgba(255,255,255,.74);font-size:12px;line-height:1.45}
.studio-gallery-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px,72%);
  gap:12px;
  overflow-x:auto;
  padding:3px 3px 12px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.studio-gallery-strip::-webkit-scrollbar{display:none}
.studio-art-card{
  scroll-snap-align:start;
  overflow:hidden;
  border:1px solid rgba(5,42,67,.10);
  border-radius:21px;
  background:#fff;
  padding:0;
  text-align:left;
  color:var(--deep);
  box-shadow:0 10px 28px rgba(5,42,67,.06);
}
.studio-art-card img,.studio-art-placeholder{width:100%;aspect-ratio:4/3;display:block;object-fit:cover;background:#F0E9F3}
.studio-art-placeholder{display:grid;place-items:center;font-size:52px}
.studio-art-card>span{display:block;padding:12px 13px 14px}
.studio-art-card strong,.studio-art-card small,.studio-art-card em{display:block}
.studio-art-card strong{font-size:14px;line-height:1.25}
.studio-art-card small{margin-top:4px;color:#6D6570;font-size:11px}
.studio-art-card em{font-style:normal;margin-top:7px;color:#7A737B;font-size:10px;line-height:1.4}
.studio-art-card.selected{border-color:#8C68A0;box-shadow:0 0 0 4px rgba(140,104,160,.10),0 12px 32px rgba(5,42,67,.08)}
.studio-choice-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0}
.studio-choice-summary span{padding:12px 13px;border-radius:16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12)}
.studio-choice-summary small,.studio-choice-summary strong{display:block}
.studio-choice-summary small{color:rgba(255,255,255,.58);font-size:8px;letter-spacing:.11em}
.studio-choice-summary strong{margin-top:4px;color:#fff;font-size:12px;line-height:1.3}

@media(max-width:560px){
  .engagement-choice-grid{grid-template-columns:1fr 1fr;gap:8px}
  .engagement-choice{min-height:84px;padding:12px 10px}
  .studio-gallery-strip{grid-auto-columns:82%}
  .studio-choice-summary{grid-template-columns:1fr}
}
@media(max-width:360px){
  .engagement-choice-grid{grid-template-columns:1fr}
  .engagement-choice{min-height:70px}
}

/* ============================================================
   V5.16 — field-polish pass
   Passport contrast, Government House discovery/order flow,
   softer Prince Klaas entry, and image-based achievement sharing.
   ============================================================ */

/* Passport header: high contrast on iPhone/Safari. */
.passport-head{
  background:#FFF7E4 !important;
  background-image:
    radial-gradient(circle at 84% 18%,rgba(18,183,177,.12),transparent 31%),
    linear-gradient(145deg,#FFF5D9 0%,#F8F3E8 62%,#EDF8F5 100%) !important;
  color:#06233D !important;
  border:1px solid rgba(6,35,61,.08);
  box-shadow:0 16px 36px rgba(6,35,61,.07);
}
.passport-head .eyebrow,
.passport-head .eyebrow.gold{
  color:#8A6500 !important;
  opacity:1 !important;
}
.passport-head h2{
  color:#06233D !important;
  text-shadow:none !important;
}
.passport-head p{
  color:#435768 !important;
  opacity:1 !important;
  font-weight:600;
}
.passport-score div{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(6,35,61,.10) !important;
  box-shadow:0 7px 18px rgba(6,35,61,.035);
}
.passport-score strong{
  color:#0A6F78 !important;
}
.passport-score span{
  color:#52616D !important;
  opacity:1 !important;
  font-weight:800;
}

/* Government House: tap-to-learn milestone cards. */
.milestone-explorer{
  display:grid;
  gap:10px;
  margin:14px 0 16px;
}
.milestone-learn-card{
  width:100%;
  border:1px solid rgba(5,42,67,.10);
  background:#F5F9FA;
  border-radius:18px;
  padding:15px 16px;
  text-align:left;
  color:#06233D;
  box-shadow:0 7px 20px rgba(5,42,67,.035);
}
.milestone-learn-card .milestone-year{
  display:block;
  color:#0A7180;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.milestone-learn-card strong{
  display:block;
  margin-top:3px;
  font-size:16px;
}
.milestone-learn-card small{
  display:block;
  margin-top:6px;
  color:#667783;
  font-size:12px;
  line-height:1.45;
}
.milestone-learn-card.open{
  background:#EAF7F5;
  border-color:rgba(10,113,128,.24);
}
.milestone-learn-card.open small{
  color:#35535F;
}

.government-order-picked{
  display:grid;
  gap:8px;
  margin:15px 0 12px;
}
.government-order-picked span{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px dashed rgba(5,42,67,.18);
  border-radius:14px;
  padding:10px 12px;
  color:#7B8790;
  background:#FAFBFB;
  font-size:12px;
  font-weight:700;
}
.government-order-picked span.filled{
  border-style:solid;
  border-color:rgba(10,113,128,.20);
  background:#EEF8F7;
  color:#173E4A;
}
.government-order-picked b{
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  flex:0 0 auto;
  background:#E3EBEE;
  color:#536B76;
  font-size:11px;
}
.government-order-picked span.filled b{
  background:#0A7180;
  color:#fff;
}
.government-order-options{
  display:grid;
  gap:9px;
}
.government-order-option{
  min-height:58px;
  border:1px solid rgba(5,42,67,.10);
  border-radius:16px;
  background:#fff;
  color:#06233D;
  padding:12px 14px;
  font:inherit;
  font-weight:850;
  text-align:left;
  box-shadow:0 7px 20px rgba(5,42,67,.035);
}
.government-order-option.selected,
.government-order-option:disabled{
  opacity:.48;
  background:#F2F5F6;
}
.government-order-reset{
  margin-top:10px;
}
.government-order-result{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin:16px 0 18px;
}
.government-order-result span{
  min-height:104px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:12px 8px;
  border-radius:18px;
  background:#EEF7F8;
  border:1px solid rgba(10,113,128,.12);
}
.government-order-result strong{
  color:#0A7180;
  font-size:23px;
}
.government-order-result small{
  margin-top:5px;
  color:#526671;
  font-size:10px;
  line-height:1.25;
}
.government-order-result i{
  font-style:normal;
  color:#91A0A7;
  font-weight:900;
}

/* Share-card creator. */
.share-card-hint{
  max-width:390px;
  margin:10px auto 0 !important;
  color:rgba(255,255,255,.78) !important;
  font-size:12px !important;
  font-weight:600 !important;
}
.share-card-maker{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.15);
}
.share-card-maker canvas{
  display:block;
  width:min(100%,560px);
  height:auto;
  margin:0 auto;
  border-radius:18px;
  background:#F7F1E5;
  box-shadow:0 16px 34px rgba(0,0,0,.20);
}
.share-card-actions{
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:14px;
}
.share-card-actions .btn.primary{
  background:#FFD447;
  color:#052A43;
}
.share-card-actions .btn.secondary{
  background:rgba(255,255,255,.10);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}

@media(max-width:560px){
  .passport-head{
    margin:0 12px 18px;
    padding:26px 20px 24px;
  }
  .passport-head h2{font-size:31px}
  .passport-score{gap:8px}
  .passport-score div{min-width:0;flex:1}
  .government-order-result{
    grid-template-columns:1fr;
  }
  .government-order-result i{
    transform:rotate(90deg);
    justify-self:center;
  }
  .government-order-result span{min-height:82px}
  .share-card-actions{display:grid;grid-template-columns:1fr}
  .share-card-actions .btn{width:100%}
}

/* =========================================================
   V5.19 — flexible routes, bite-size stories, offline + group
   ========================================================= */
.quest-planner-section{padding-top:18px;padding-bottom:10px}
.quest-planner-card{
  max-width:980px;margin:0 auto;padding:26px;border-radius:30px;
  background:linear-gradient(145deg,#fffaf0 0%,#f0faf8 100%);
  border:1px solid rgba(7,54,76,.10);box-shadow:0 18px 45px rgba(6,42,67,.08)
}
.quest-planner-card h2{margin:4px 0 6px;color:#062a43;font-size:clamp(28px,4vw,42px);line-height:1.04}
.quest-planner-copy{margin:0 0 18px;color:#556975;max-width:720px;line-height:1.5}
.pace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pace-card{
  appearance:none;text-align:left;padding:18px;border-radius:22px;background:#fff;border:1.5px solid rgba(8,60,83,.12);
  color:#062a43;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;
  box-shadow:0 8px 20px rgba(6,42,67,.04);cursor:pointer;transition:.18s ease
}
.pace-card>span{grid-row:1/3;font-size:27px;align-self:center}.pace-card strong{font-size:17px}.pace-card small{color:#657884;font-size:12px;line-height:1.35}
.pace-card:hover,.pace-card:focus-visible{transform:translateY(-1px);border-color:rgba(8,126,143,.50);outline:none}
.pace-card.selected{border-color:#0b8290;background:#eaf9f7;box-shadow:0 0 0 4px rgba(11,130,144,.10)}
.route-plan-summary{margin-top:14px;padding:15px 17px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(8,60,83,.08)}
.route-plan-summary>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}
.route-plan-summary strong{color:#06304b}.route-plan-summary span{font-size:12px;color:#647884;font-weight:700}
.route-plan-summary p{margin:6px 0 0;font-size:12px;line-height:1.45;color:#60717a}
.route-finish-note{margin-top:9px;padding-top:9px;border-top:1px solid rgba(8,60,83,.09);font-size:12px;font-weight:800;color:#14725d}
.planner-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.planner-tools .btn{flex:1;min-width:220px}
.offline-status{margin-top:8px;font-size:12px;color:#61727b;text-align:center}
.offline-status.ready{color:#15705d;font-weight:800}.offline-status.working{color:#8b6500;font-weight:700}

.tour-flex-actions{display:flex;gap:10px;justify-content:center;max-width:760px;margin:18px auto 4px;padding:0 12px}
.tour-flex-actions .btn{flex:1;min-height:48px}

.story-bites{display:grid;gap:10px;margin:14px 0}
.story-bite{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:15px 16px;border-radius:20px;background:#f4f8f8;border:1px solid rgba(6,42,67,.08)}
.story-bite>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#fff8e5;font-size:21px}
.story-bite strong{display:block;color:#06304b;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:1px 0 4px}
.story-bite p{margin:0!important;color:#4f6470!important;line-height:1.5!important;font-size:15px!important}

.route-card.available,.route-card.open{cursor:pointer}.route-card.skipped{opacity:.72}.route-card.skipped::after{content:"Skipped for now";display:block;margin-top:6px;font-size:10px;font-weight:800;color:#7b6a3b}
.route-card.planned{box-shadow:inset 0 0 0 2px rgba(11,130,144,.14)}

.offline-route-list{display:grid;gap:8px;margin-top:14px;text-align:left}
.offline-stop-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:inherit;text-align:left}
.offline-stop-row>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);font-weight:900}.offline-stop-row small{font-size:10px;opacity:.8}.offline-stop-row.done small{color:#8ff0c4;opacity:1;font-weight:800}
.offline-manager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid rgba(6,42,67,.09);border-bottom:1px solid rgba(6,42,67,.09);margin:12px 0}
.offline-manager>div{display:grid;gap:3px}.offline-manager small{color:#647783}

.group-modal{position:fixed;inset:0;z-index:10000;display:grid;align-items:end;justify-items:center;padding:18px;padding-bottom:max(18px,env(safe-area-inset-bottom));}
.group-modal.hidden{display:none}.group-modal-backdrop{position:absolute;inset:0;background:rgba(2,20,34,.62);backdrop-filter:blur(6px)}
.group-sheet{position:relative;width:min(680px,100%);max-height:min(820px,88vh);overflow:auto;background:#fffdf8;border-radius:30px 30px 22px 22px;padding:28px;box-shadow:0 28px 90px rgba(0,0,0,.28);animation:groupSheetIn .28s ease both}
@keyframes groupSheetIn{from{transform:translateY(35px);opacity:.4}to{transform:none;opacity:1}}
.group-close{position:absolute;right:17px;top:15px;width:40px;height:40px;border:0;border-radius:50%;background:#edf4f4;color:#07304b;font-size:27px;line-height:1;cursor:pointer}
.group-sheet h2{font-size:clamp(27px,5vw,40px);line-height:1.03;color:#062a43;margin:5px 46px 8px 0}.group-sheet>p{color:#5b6f79;line-height:1.5}
.group-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.group-mode-card{display:grid;gap:5px;text-align:left;padding:18px;border-radius:20px;border:1px solid rgba(6,42,67,.12);background:#f7fbfa;color:#062a43;cursor:pointer}
.group-mode-card>span{font-size:27px}.group-mode-card strong{font-size:17px}.group-mode-card small{line-height:1.35;color:#657783}
.group-setup-area{padding-top:6px}.group-setup-area.hidden{display:none}
.group-form{display:grid;gap:11px}.group-field{display:grid;gap:5px}.group-field span{font-size:12px;font-weight:900;color:#173e55}.group-field input,.group-field select{width:100%;padding:14px 15px;border-radius:14px;border:1px solid #cbd8dc;font:inherit;color:#082d45;background:#fff}
.group-code{display:flex;align-items:center;justify-content:center;margin:12px 0;padding:16px;border-radius:18px;background:#062a43;color:#fff;font-size:38px;font-weight:900;letter-spacing:.22em}
.group-notice{padding:12px 14px;border-radius:14px;background:#fff6d9;color:#695016;font-size:12px;line-height:1.45}
.group-waiting-list{display:grid;gap:7px;margin:12px 0}.group-person{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border-radius:14px;background:#f0f7f6}.group-person small{color:#637680}
.group-preview-badge{display:inline-flex;padding:6px 9px;border-radius:999px;background:#eaf7f5;color:#0b6f75;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}

.success-celebration{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;pointer-events:none;background:rgba(4,28,43,.06)}.success-celebration.hidden{display:none}
.success-pop{display:grid;place-items:center;min-width:210px;padding:22px 30px;border-radius:28px;background:#fff;box-shadow:0 28px 80px rgba(4,28,43,.24);color:#06304b}
.success-pop>span{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#dcf7e9;color:#13734f;font-size:42px;font-weight:900}.success-pop strong{font-size:26px;margin-top:7px}.success-pop small{color:#0b7a69;font-weight:900;margin-top:3px}
.success-celebration.play .success-pop{animation:successPop .72s cubic-bezier(.2,1.5,.35,1) both}.success-celebration.play .success-pop>span{animation:checkBounce .6s .08s cubic-bezier(.2,1.7,.35,1) both}
@keyframes successPop{0%{transform:scale(.55);opacity:0}55%{transform:scale(1.07);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes checkBounce{0%{transform:scale(.2) rotate(-18deg)}70%{transform:scale(1.18) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.option-btn.correct{position:relative;border-color:#1c956f!important;background:#e9f9f1!important;color:#0d5e47!important;padding-right:58px!important}.option-btn.correct::after{content:"✓";position:absolute;right:17px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#17835f;color:#fff;font-weight:900;animation:checkBounce .45s ease both}
.option-btn.wrong{animation:softNudge .24s ease}@keyframes softNudge{0%,100%{transform:none}35%{transform:translateX(-3px)}70%{transform:translateX(3px)}}

.market-mission-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.market-mission-steps>div{padding:12px 9px;border-radius:16px;background:#f5f8f7;text-align:center}.market-mission-steps span{display:block;font-size:23px;margin-bottom:4px}.market-mission-steps strong{display:block;color:#07304b;font-size:12px}.market-mission-steps small{display:block;color:#657783;font-size:10px;line-height:1.35;margin-top:3px}

@media(max-width:640px){
  .quest-planner-card{padding:21px 16px;border-radius:25px}.pace-grid{grid-template-columns:1fr}.pace-card{padding:15px}
  .planner-tools{display:grid;grid-template-columns:1fr}.planner-tools .btn{min-width:0;width:100%}
  .route-plan-summary>div:first-child{align-items:flex-start;flex-direction:column;gap:2px}
  .tour-flex-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tour-flex-actions .btn{font-size:13px;padding-inline:9px}
  .story-bite{grid-template-columns:36px 1fr;padding:13px}.story-bite>span{width:36px;height:36px;border-radius:12px;font-size:18px}
  .group-sheet{padding:24px 18px 20px}.group-mode-grid{grid-template-columns:1fr}.group-sheet h2{font-size:29px}
  .market-mission-steps{grid-template-columns:1fr}.market-mission-steps>div{display:grid;grid-template-columns:34px 64px 1fr;align-items:center;text-align:left;gap:5px}.market-mission-steps span{margin:0}.market-mission-steps small{margin:0}
}

@media(prefers-reduced-motion:reduce){.success-celebration.play .success-pop,.success-celebration.play .success-pop>span,.option-btn.correct::after,.group-sheet{animation:none!important}}
body.modal-open{overflow:hidden}

/* ==========================================================
   V5.19 — Quick Points
   Optional timed observation/fact bonuses. Safety-first: the
   timer creates urgency, but the language never encourages running.
   ========================================================== */
.quick-point-launcher{width:100%;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;margin:14px 0 4px;padding:13px 14px;border:1px solid rgba(226,174,48,.52);border-radius:18px;background:linear-gradient(135deg,#fff8da,#fff0a8);box-shadow:0 10px 28px rgba(62,50,8,.12);color:var(--navy);text-align:left;cursor:pointer;animation:quickPointGlow 2.8s ease-in-out 1}
.quick-point-launcher.hidden{display:none!important}
.quick-point-bolt{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#f3c843;font-size:24px;box-shadow:inset 0 0 0 1px rgba(83,61,0,.12)}
.quick-point-launch-copy{display:grid;gap:2px;min-width:0}.quick-point-launch-copy small{font-size:9px;letter-spacing:.12em;font-weight:900;color:#8a6511}.quick-point-launch-copy strong{font-size:17px;line-height:1.08}.quick-point-launch-copy>span{font-size:11px;color:#67591f;font-weight:700}.quick-point-arrow{font-size:21px;font-weight:900;color:#7a5a0f}
@keyframes quickPointGlow{0%,100%{transform:translateY(0);box-shadow:0 10px 28px rgba(62,50,8,.12)}50%{transform:translateY(-2px);box-shadow:0 14px 34px rgba(226,174,48,.28)}}
.quick-point-modal{position:fixed;inset:0;z-index:1200;display:grid;align-items:end}.quick-point-modal.hidden{display:none!important}.quick-point-backdrop{position:absolute;inset:0;background:rgba(3,18,31,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.quick-point-sheet{position:relative;width:min(100%,560px);max-height:min(88vh,760px);overflow:auto;margin:0 auto;background:#fffdf7;border-radius:28px 28px 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -18px 55px rgba(0,0,0,.24)}
.quick-point-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#edf1f2;color:var(--navy);font-size:24px;line-height:1;cursor:pointer}.quick-point-hero{display:grid;place-items:center;width:64px;height:64px;margin:4px auto 12px;border-radius:22px;background:linear-gradient(145deg,#f8d65d,#efb52f);font-size:34px;box-shadow:0 10px 25px rgba(189,136,14,.25)}
.quick-point-sheet .flow-eyebrow{text-align:center;color:#8a6511}.quick-point-sheet h2{text-align:center;color:var(--navy);font-family:"Playfair Display",serif;font-size:30px;line-height:1.06;margin:7px 32px 10px}.quick-point-ready{max-width:440px;margin:0 auto 16px;text-align:center;color:#53666f;line-height:1.5}.quick-point-time-preview{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:10px auto 18px;color:var(--navy)}.quick-point-time-preview strong{font-size:44px;line-height:1}.quick-point-time-preview span{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#6d7475}
.quick-point-actions{display:grid;gap:8px}.quick-point-actions .btn{width:100%}.quick-point-running-head{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin:2px 0 10px}.quick-point-running-head .flow-eyebrow{text-align:left}.quick-point-running-head h2{text-align:left;margin:4px 0 0;font-size:24px}.quick-point-timer{display:grid;place-items:center;min-width:76px;height:76px;border-radius:50%;background:#0a3653;color:white;border:5px solid #f2cb4d;box-shadow:0 6px 20px rgba(6,42,67,.2)}.quick-point-timer strong{font-size:27px;line-height:1}.quick-point-timer span{font-size:8px;text-transform:uppercase;font-weight:900;letter-spacing:.08em;opacity:.88}.quick-point-timer.ending{background:#7b4d0b;border-color:#ffd971;animation:quickPointTick .8s ease-in-out infinite}
@keyframes quickPointTick{50%{transform:scale(1.04)}}
.quick-point-instruction{margin:8px 0 14px;padding:11px 12px;border-radius:14px;background:#eef7f5;color:#214d4b;font-size:12px;line-height:1.45}.quick-point-question{font-family:"Playfair Display",serif;color:var(--navy);font-size:22px;line-height:1.25;margin:14px 0}.quick-point-options{display:grid;gap:9px}.quick-point-option{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid #dce4e6;border-radius:15px;background:#fff;color:var(--navy);text-align:left;cursor:pointer}.quick-point-option:active{transform:scale(.99)}.quick-point-option>span{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:#f1f5f5;font-size:12px;font-weight:900}.quick-point-option strong{font-size:14px;line-height:1.25}.quick-point-skip-running{width:100%;margin-top:12px}
.quick-point-result{text-align:center;padding:6px 0}.quick-point-result-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:#eef2f2;color:#8a6511;font-size:34px;font-weight:900}.quick-point-result.success .quick-point-result-icon{background:#dff5e9;color:#13724f}.quick-point-result p{max-width:450px;margin:10px auto 16px;color:#52636b;line-height:1.5}.quick-point-earned{display:inline-flex;align-items:center;justify-content:center;margin:2px auto 8px;padding:7px 12px;border-radius:999px;background:#e1f6e9;color:#126a4a;font-size:13px;font-weight:900}.quick-point-answer{display:grid;gap:3px;margin:13px 0 18px;padding:12px;border-radius:14px;background:#f4f6f6;color:var(--navy)}.quick-point-answer small{font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#718086}.quick-point-answer strong{font-size:14px}.quick-point-result .btn{width:100%}
@media (min-width:680px){.quick-point-sheet{border-radius:28px;margin:auto;align-self:center;padding-bottom:26px}.quick-point-modal{align-items:center;padding:20px}}
@media (prefers-reduced-motion:reduce){.quick-point-launcher,.quick-point-timer.ending{animation:none!important}}

/* ==========================================================
   V5.20 — LOCKED SHARE CARD + APP SURFACE POLISH
   Softer borders + consistently curved surfaces for a more
   native-app feel without turning every element into a pill.
   ========================================================== */
:root{
  --app-border:rgba(6,42,67,.10);
  --app-shadow:0 12px 34px rgba(6,42,67,.075);
  --app-shadow-soft:0 7px 22px rgba(6,42,67,.05);
}
body{padding-bottom:104px}

/* Floating, rounded app chrome. */
.topbar{
  top:8px;
  width:calc(100% - 20px);
  max-width:800px;
  margin:8px auto 10px;
  padding:10px 12px;
  border:1px solid var(--app-border);
  border-radius:22px;
  background:rgba(255,252,245,.94);
  box-shadow:0 8px 26px rgba(6,42,67,.08);
  overflow:hidden;
}
.brand-mark{border-radius:13px}
.hero{
  margin-top:8px;
  border-radius:30px;
}

/* Major content surfaces. */
.route-row{
  border-radius:20px;
  border-color:var(--app-border);
  box-shadow:var(--app-shadow-soft);
}
.route-row .num{border-radius:14px}
.stop-card{
  border-radius:30px;
  border-color:var(--app-border);
  box-shadow:var(--app-shadow);
}
.stop-icon{border-radius:20px}
.distance-panel{
  margin:2px 0 0;
  padding:12px 14px;
  border:1px solid var(--app-border);
  border-radius:19px;
  background:rgba(255,255,255,.58);
}
.unlock-banner{border-radius:16px}

/* Interactive surfaces should look touchable, not boxed-in. */
.btn{border-radius:16px}
.btn.small{border-radius:14px}
.option-btn,
.sequence-item,
.check-row,
.text-answer,
.challenge-note,
.result-box{
  border-radius:17px;
}
.option-btn,
.sequence-item,
.check-row,
.text-answer{
  border-color:var(--app-border);
  box-shadow:0 5px 16px rgba(6,42,67,.035);
}

/* Story / mission cards. */
.story-bite{border-radius:22px;box-shadow:0 5px 18px rgba(6,42,67,.035)}
.story-bite>span{border-radius:15px}
.fun-fact-card,
.arrival-panel,
.bonus-mission-card,
.stop-completion,
.stop-score-card,
.next-clue-card,
.mission-instructions{
  border-radius:24px;
}

/* Map + passport surfaces. */
#map{border-radius:30px;border-color:var(--app-border);box-shadow:var(--app-shadow-soft)}
.map-fallback{border-radius:20px}
.passport-head{
  margin-top:8px;
  border-radius:30px;
  box-shadow:var(--app-shadow);
}
.passport-score div{border-radius:18px}
.stamp{border-radius:24px}
.completion-card{border-radius:30px;box-shadow:var(--app-shadow)}
.info-grid article{border-radius:22px;box-shadow:var(--app-shadow-soft);border-color:var(--app-border)}
.settings-card{border-radius:24px;box-shadow:var(--app-shadow-soft);border-color:var(--app-border)}

/* Planner, group and bonus surfaces use the same curve language. */
.quest-planner-card{border-radius:30px}
.pace-card{border-radius:22px}
.route-plan-summary{border-radius:20px}
.group-mode-card{border-radius:22px}
.group-code{border-radius:20px}
.group-notice{border-radius:18px}
.group-person{border-radius:17px}
.quick-point-launcher{border-radius:22px}
.quick-point-bolt{border-radius:17px}
.quick-point-option{border-radius:18px}
.quick-point-instruction,.quick-point-answer{border-radius:17px}
.success-pop{border-radius:30px}

/* Floating bottom tab bar. */
.bottom-nav{
  left:50%;
  right:auto;
  bottom:max(8px,env(safe-area-inset-bottom));
  width:min(800px,calc(100% - 20px));
  height:72px;
  transform:translateX(-50%);
  padding:7px 8px;
  border:1px solid var(--app-border);
  border-radius:24px;
  background:rgba(255,253,248,.96);
  box-shadow:0 12px 34px rgba(6,42,67,.15);
  overflow:hidden;
}
.nav-btn{border-radius:16px}
.nav-btn.active{border-radius:16px}
.toast{bottom:98px}

@media(max-width:390px){
  .topbar{width:calc(100% - 14px);border-radius:20px}
  .hero{margin-left:8px;margin-right:8px;border-radius:26px}
  .stop-card{margin-left:8px;margin-right:8px;border-radius:26px}
  .passport-head{margin-left:8px;margin-right:8px;border-radius:26px}
  #map{margin-left:8px;margin-right:8px;border-radius:26px}
  .bottom-nav{width:calc(100% - 14px);border-radius:22px}
}


/* V5.20.1 — route planner start CTA + quieter offline helper */
.offline-status:empty{display:none}
.route-start-btn{width:100%;margin-top:14px;min-height:52px;font-weight:800}

/* V5.21 — challenge-first onboarding */
.hero-start-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  max-width:360px;
}
.start-challenge-btn{
  width:100%;
  min-height:56px!important;
  font-size:17px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(3,72,92,.22);
}
.demo-link{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.84);
  font:inherit;
  font-size:13px;
  font-weight:800;
  padding:5px 2px;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.32);
  text-underline-offset:4px;
  cursor:pointer;
}
.demo-link:hover,.demo-link:focus-visible{color:#fff;text-decoration-color:#fff}
.home-tools-section{padding-top:6px;padding-bottom:10px}
.home-tools-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px 20px;
  padding:20px 22px;
  border:1px solid rgba(6,42,67,.08);
  border-radius:24px;
  background:rgba(255,255,255,.83);
  box-shadow:0 10px 26px rgba(5,42,67,.055);
}
.home-tools-card h2{margin:3px 0 5px;color:#062a43;font-size:22px;line-height:1.08}
.home-tools-card p{margin:0;color:#60717a;line-height:1.45;font-size:14px}
.home-tools-card .offline-status{grid-column:1/-1;margin-top:-4px}
.challenge-sheet{width:min(720px,100%)}
.challenge-mode-grid{margin-top:20px}
.challenge-mode-grid .group-mode-card{min-height:138px}
.challenge-mode-grid .group-mode-card>span{font-size:31px}
.modal-back-link{
  appearance:none;border:0;background:transparent;color:#0b6074;font:inherit;font-size:13px;font-weight:900;
  padding:4px 0 13px;cursor:pointer
}
.solo-pace-grid{margin:18px 0 14px}
.solo-pace-grid .pace-card.selected{
  border-color:#078b91;
  box-shadow:0 0 0 3px rgba(7,139,145,.11),0 12px 25px rgba(5,42,67,.08);
  background:#f0fbf9;
}
.challenge-start-btn{margin-top:8px;min-height:54px}
.challenge-start-btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.location-later-note{margin:10px 2px 0!important;text-align:center;font-size:12px;line-height:1.4;color:#71808a!important}
#enableLocationBtn{margin-top:12px;min-width:180px}
#enableLocationBtn.hidden{display:none}

@media(max-width:640px){
  .hero-start-actions{max-width:none;width:100%}
  .start-challenge-btn{width:100%}
  .demo-link{align-self:center}
  .home-tools-card{grid-template-columns:1fr;padding:18px 16px;border-radius:22px}
  .home-tools-card .btn{width:100%}
  .home-tools-card .offline-status{grid-column:auto}
  .challenge-sheet{padding-bottom:max(22px,env(safe-area-inset-bottom))}
  .challenge-mode-grid .group-mode-card{min-height:0}
}


/* V5.22 — live private Group Challenge */
.group-leaderboard-launch{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:9400;display:flex;align-items:center;justify-content:space-between;gap:8px;width:auto;max-width:calc(100vw - 36px);margin:0;padding:11px 15px;border:1px solid rgba(13,125,139,.22);border-radius:999px;background:linear-gradient(135deg,#e9f8f5,#fff8dd);color:#07304b;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 10px 28px rgba(7,48,75,.16)}
.group-leaderboard-launch.hidden{display:none}.group-leaderboard-launch span{font-size:12px;color:#47707d;font-weight:800}
.group-live-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#e7f7ef;color:#0d7552;font-size:10px;font-weight:900;letter-spacing:.08em;margin-bottom:8px}
.group-share-code{margin:4px 0 10px;color:#5b6f79;text-align:center}.group-waiting-message{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:16px;background:#eff8f7;color:#234d5a;font-weight:800;margin:12px 0}
.group-pulse{width:9px;height:9px;border-radius:50%;background:#17a26f;box-shadow:0 0 0 0 rgba(23,162,111,.35);animation:groupPulse 1.6s infinite}
@keyframes groupPulse{70%{box-shadow:0 0 0 9px rgba(23,162,111,0)}100%{box-shadow:0 0 0 0 rgba(23,162,111,0)}}
.group-leaderboard-list{display:grid;gap:8px;margin:14px 0}.group-rank-row{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:10px;padding:12px 13px;border:1px solid rgba(6,42,67,.10);border-radius:17px;background:#f8fbfa}.group-rank-row.me{border-color:#12a7ae;background:#eaf9f7;box-shadow:0 0 0 3px rgba(18,167,174,.08)}
.group-rank{font-size:17px;font-weight:950;color:#0b5466}.group-rank-row strong{display:block;color:#062a43}.group-rank-row small{display:block;margin-top:3px;color:#637680;line-height:1.25}.group-rank-row>b{white-space:nowrap;color:#06334d;font-size:15px}
.group-leaderboard-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
@media(max-width:520px){.group-rank-row{grid-template-columns:46px 1fr auto;padding:11px 10px}.group-rank-row>b{font-size:13px}.group-leaderboard-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.group-pulse{animation:none}}

/* ============================================================
   V5.23 — Group Challenge polish
   ============================================================ */
.group-waiting-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.group-joined-count{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:7px 11px;
  border-radius:999px;
  background:#eef7f6;
  color:#0b5261;
  border:1px solid rgba(13,125,139,.12);
}
.group-joined-count strong{font-size:17px;line-height:1}
.group-joined-count span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#607681}
.group-person{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  animation:groupPersonIn .32s ease both;
  animation-delay:var(--member-delay,0ms);
}
.group-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#0c6f7d,#0d9aa0);
  color:white;
  font-weight:950;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);
}
.group-person-copy{min-width:0}.group-person-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#062a43}.group-person-copy small{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:2px}
.group-host-pill{display:inline-flex;padding:3px 7px;border-radius:999px;background:#fff1bd;color:#795a05;font-size:9px;font-weight:950;letter-spacing:.05em;text-transform:uppercase}
.group-ready-check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#daf5e7;color:#087a4e;font-weight:950}
.group-launch-btn{display:flex;align-items:center;justify-content:center;gap:5px}.group-launch-btn span{font-size:12px;opacity:.78}
@keyframes groupPersonIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}

.group-rank-row{transition:transform .28s ease,background-color .28s ease,border-color .28s ease,box-shadow .28s ease}
.group-rank-row.rank-up{animation:groupRankUp .9s ease both}
.group-rank-row.rank-down{animation:groupRankDown .7s ease both}
@keyframes groupRankUp{0%{transform:translateY(8px);background:#fff9d9}45%{transform:translateY(-3px);box-shadow:0 10px 24px rgba(12,154,160,.14)}100%{transform:none}}
@keyframes groupRankDown{0%{transform:translateY(-5px)}55%{transform:translateY(3px);background:#fff4ee}100%{transform:none}}

.group-podium{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  align-items:end;
  margin:14px 0 18px;
}
.group-podium-card{
  min-width:0;
  text-align:center;
  border:1px solid rgba(6,42,67,.11);
  border-radius:20px;
  padding:14px 9px;
  background:#f8fbfa;
  box-shadow:0 8px 22px rgba(7,48,75,.06);
}
.group-podium-card.place-1{order:2;padding-top:22px;background:linear-gradient(155deg,#fff8d8,#fffdf6);border-color:#e8ca67;transform:translateY(-7px)}
.group-podium-card.place-2{order:1}.group-podium-card.place-3{order:3}
.group-podium-card>span{display:block;font-size:30px;margin-bottom:5px}
.group-podium-card strong{display:block;color:#062a43;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-podium-card b{display:block;color:#0b6671;font-size:17px;margin:5px 0 2px}
.group-podium-card small{display:block;color:#687b84;font-size:9px;line-height:1.25}
@media(max-width:520px){
  .group-podium{grid-template-columns:1fr;align-items:stretch}
  .group-podium-card.place-1,.group-podium-card.place-2,.group-podium-card.place-3{order:initial;transform:none;padding-top:14px}
  .group-podium-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;text-align:left;gap:9px}
  .group-podium-card>span{margin:0}.group-podium-card b{text-align:right}.group-podium-card small{grid-column:2/4}
}
@media(prefers-reduced-motion:reduce){.group-person,.group-rank-row.rank-up,.group-rank-row.rank-down{animation:none!important}}


/* ============================================================
   V5.24 — Stops 3–10 immersion + bite-sized story cards
   ============================================================ */
.immersive-story-bites{
  gap:9px;
}
.immersive-story-bites .story-bite{
  position:relative;
  overflow:hidden;
}
.immersive-story-bites .story-bite.key-detail{
  background:linear-gradient(145deg,#FFF9E8,#FFFDF7);
  border-color:rgba(201,151,43,.20);
}
.immersive-story-bites .story-bite.why{
  background:linear-gradient(145deg,#EEF8F5,#F7FBFA);
  border-color:rgba(15,120,111,.14);
}
.immersive-story-bites .story-bite.key-detail>span{
  background:#FFF1C6;
}
.immersive-story-bites .story-bite.why>span{
  background:#E2F4EF;
}

.street-mission-card{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:13px;
  align-items:start;
  margin:14px 0;
  padding:16px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,rgba(255,210,86,.20),transparent 40%),
    linear-gradient(145deg,#073451,#0B5360);
  color:white;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 32px rgba(6,42,67,.11);
}
.street-mission-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:rgba(255,255,255,.12);
  font-size:27px;
}
.street-mission-copy span{
  display:block;
  color:#FFD86E;
  font-size:9px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.street-mission-copy strong{
  display:block;
  font-size:16px;
  line-height:1.25;
  margin-bottom:5px;
}
.street-mission-copy p{
  margin:0!important;
  color:rgba(255,255,255,.82)!important;
  font-size:13px!important;
  line-height:1.48!important;
}

/* Make correct-answer feedback feel more like an app reward without
   turning every answer into a full-screen confetti event. */
.success-pop{
  position:relative;
  overflow:visible;
}
.success-pop::before,
.success-pop::after{
  content:"✦";
  position:absolute;
  color:#E2AF32;
  font-size:18px;
  opacity:0;
}
.success-celebration.play .success-pop::before{
  left:-8px;
  top:18px;
  animation:rewardSpark .72s .08s ease-out both;
}
.success-celebration.play .success-pop::after{
  right:-8px;
  bottom:24px;
  animation:rewardSpark .72s .18s ease-out both;
}
@keyframes rewardSpark{
  0%{transform:scale(.25) rotate(-18deg);opacity:0}
  45%{opacity:1}
  100%{transform:scale(1.2) rotate(18deg);opacity:0}
}

@media(max-width:640px){
  .street-mission-card{
    grid-template-columns:46px 1fr;
    padding:14px;
    border-radius:20px;
  }
  .street-mission-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    font-size:23px;
  }
  .street-mission-copy strong{font-size:15px}
  .street-mission-copy p{font-size:12.5px!important}
}
@media(prefers-reduced-motion:reduce){
  .success-celebration.play .success-pop::before,
  .success-celebration.play .success-pop::after{animation:none!important}
}

/* ============================================================
   V5.25 — Real St. John's homepage hero
   ============================================================ */
#homeView .hero{
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 38px 46px;
  margin-top:12px;
  border-radius:34px;
  background-image:
    linear-gradient(90deg,rgba(2,30,49,.96) 0%,rgba(3,43,67,.90) 34%,rgba(3,48,70,.48) 60%,rgba(2,35,54,.08) 100%),
    linear-gradient(180deg,rgba(3,27,44,.16),rgba(3,27,44,.10)),
    url("home-harbour.jpg");
  background-size:cover;
  background-position:center center;
  box-shadow:0 18px 48px rgba(5,42,67,.16);
  isolation:isolate;
}
#homeView .hero:before,
#homeView .hero:after{display:none}
#homeView .hero .eyebrow{position:relative;z-index:1;color:#FFD349}
#homeView .hero h1{
  position:relative;z-index:1;
  max-width:570px;
  margin:14px 0 18px;
  font-size:clamp(46px,7.2vw,72px);
  line-height:.94;
  letter-spacing:-.045em;
  text-shadow:0 3px 18px rgba(0,0,0,.18);
}
#homeView .hero h1 span{color:#FFD349}
#homeView .hero-copy{
  position:relative;z-index:1;
  max-width:520px;
  margin:0;
  font-size:17px;
  line-height:1.55;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}
#homeView .hero-stats{
  position:relative;z-index:1;
  display:flex;
  grid-template-columns:none;
  gap:12px;
  margin:24px 0 26px;
  max-width:470px;
}
#homeView .hero-stats .hero-stat-card{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px;
  padding:13px 16px;
  background:rgba(5,42,67,.52);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 9px 24px rgba(0,0,0,.10);
}
#homeView .hero-stats .hero-stat-card:nth-child(1),
#homeView .hero-stats .hero-stat-card:nth-child(2){border-top-color:rgba(255,255,255,.20)}
#homeView .hero-stat-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:12px;
  color:#FFD349;
  background:rgba(255,211,73,.10);
  font-size:25px;
  font-weight:900;
}
#homeView .hero-stat-card>span:last-child{display:block;min-width:0}
#homeView .hero-stats strong{display:block;font-size:21px;line-height:1;color:white}
#homeView .hero-stats small{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.72);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.10em;
}
#homeView .hero-start-actions{position:relative;z-index:1;max-width:460px}
#homeView .start-challenge-btn{
  min-height:62px!important;
  border-radius:20px;
  font-size:18px;
  background:linear-gradient(135deg,#FFD64D,#F3B52F);
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}
#homeView .demo-link{color:rgba(255,255,255,.90);font-size:14px;padding:8px 4px}

/* Make the global app bar read like part of the premium landing experience. */
.topbar{
  border-color:rgba(255,255,255,.30);
  background:rgba(255,252,245,.90);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
}

@media(min-width:900px){
  main{max-width:980px}
  .topbar{max-width:960px}
}
@media(max-width:640px){
  #homeView .hero{
    min-height:600px;
    padding:46px 20px 30px;
    background-image:
      linear-gradient(180deg,rgba(2,28,47,.82) 0%,rgba(3,43,67,.80) 43%,rgba(3,42,62,.62) 68%,rgba(3,31,48,.52) 100%),
      url("home-harbour.jpg");
    background-position:58% center;
  }
  #homeView .hero h1{font-size:clamp(43px,13vw,59px);max-width:100%}
  #homeView .hero-copy{font-size:15px;max-width:100%}
  #homeView .hero-stats{gap:8px;width:100%;margin:20px 0 22px}
  #homeView .hero-stats .hero-stat-card{padding:11px 12px;gap:9px;border-radius:16px}
  #homeView .hero-stat-icon{width:34px;height:34px;font-size:21px}
  #homeView .hero-stats strong{font-size:18px}
  #homeView .hero-start-actions{width:100%;max-width:none}
}
@media(max-width:390px){
  #homeView .hero{min-height:570px;margin-left:7px;margin-right:7px;padding:42px 17px 27px}
  #homeView .hero h1{font-size:43px}
  #homeView .hero-stats .hero-stat-card{padding:10px}
  #homeView .hero-stat-icon{display:none}
}

/* ============================================================
   V5.26 — Stop 3 dual Then & Now support
   ============================================================ */
.cathedral-comparison-block{display:grid;gap:12px}
.cathedral-comparison-copy{margin-bottom:0}
.cathedral-then-now{margin-top:0}
.cathedral-then-now .then-now-stage{min-height:280px}
.cathedral-then-now .then-now-image{object-fit:cover}
@media (max-width:640px){
  .cathedral-then-now .then-now-stage{min-height:245px}
}

/* =========================================================
   V5.27 — Collapsible story cards + Cathedral interior video
   ========================================================= */
.collapsible-story-bites .story-bite-static{
  display:grid;
}
.story-disclosure{
  display:block;
  padding:0;
  overflow:hidden;
}
.story-disclosure summary{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 30px;
  gap:12px;
  align-items:center;
  padding:15px 16px;
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.story-disclosure summary::-webkit-details-marker{display:none}
.story-disclosure summary::marker{display:none;content:""}
.story-disclosure-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:#fff8e5;
  font-size:21px;
}
.story-disclosure-title{min-width:0}
.story-disclosure-title strong{
  margin:0 0 2px;
}
.story-disclosure-title small{
  display:block;
  color:#73838c;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
}
.story-disclosure-plus{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:rgba(6,48,75,.06);
  color:#06304b;
  font-size:22px;
  line-height:1;
  transition:transform .2s ease, background .2s ease;
}
.story-disclosure[open] .story-disclosure-plus{
  transform:rotate(45deg);
  background:rgba(6,48,75,.11);
}
.story-disclosure-content{
  padding:0 16px 16px 70px;
  animation:storyReveal .18s ease-out;
}
.story-disclosure-content p{
  margin:0!important;
  color:#4f6470!important;
  line-height:1.55!important;
  font-size:15px!important;
}
@keyframes storyReveal{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.cathedral-interior-block{
  display:grid;
  gap:14px;
}
.cathedral-interior-copy{
  margin-bottom:0;
}
.cathedral-interior-video-shell{
  overflow:hidden;
  border-radius:24px;
  background:#061d2d;
  box-shadow:0 12px 30px rgba(6,42,67,.12);
  border:1px solid rgba(6,42,67,.08);
  aspect-ratio:3 / 4;
  max-height:62vh;
}
.cathedral-interior-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:#061d2d;
}
@media(max-width:560px){
  .story-disclosure summary{
    grid-template-columns:36px minmax(0,1fr) 28px;
    gap:10px;
    padding:13px;
  }
  .story-disclosure-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    font-size:18px;
  }
  .story-disclosure-content{
    padding:0 13px 14px 59px;
  }
  .cathedral-interior-video-shell{border-radius:20px}
}

/* ============================================================
   V5.28 — Stop 4 Government House guided flow refresh
   ============================================================ */
.government-comparison-block{
  display:grid;
  gap:12px;
}
.government-comparison-copy{
  margin-bottom:0;
}
.government-then-now .then-now-stage{
  min-height:300px;
}
.milestone-learn-card.seen:not(.open){
  border-color:rgba(10,113,128,.18);
  background:#F3FAF9;
}
.milestone-learn-card.seen:not(.open) .milestone-year::after{
  content:"  ✓";
  color:#0A7180;
}
.quick-point-flow-card{
  display:flex;
  align-items:center;
  gap:13px;
  margin:14px 0 18px;
  padding:16px;
  border-radius:19px;
  border:1px solid rgba(212,154,50,.22);
  background:linear-gradient(145deg,#FFF9E8,#FFF3CB);
  color:#06233D;
}
.quick-point-flow-card>span{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#FFE49A;
  font-size:22px;
}
.quick-point-flow-card strong,
.quick-point-flow-card small{
  display:block;
}
.quick-point-flow-card strong{
  font-size:14px;
}
.quick-point-flow-card small{
  margin-top:4px;
  color:#687985;
  font-size:11px;
  line-height:1.4;
}
.quick-point-flow-card.done{
  border-color:rgba(10,113,128,.18);
  background:#EEF8F7;
}
@media (max-width:560px){
  .government-then-now .then-now-stage{
    min-height:265px;
  }
}


/* ============================================================
   V5.29 — cleaner hero media + Government House overview step
   ============================================================ */
.media-caption,
.museum-media-overlay,
.cathedral-media-overlay,
.standard-stop-overlay{
  display:none !important;
}

.government-hero,
.government-overview-fallback{
  margin-bottom:18px;
}

.government-overview-screen .flow-copy{
  margin-bottom:14px;
}

.government-overview-media{
  margin-bottom:18px;
  border-radius:24px;
  overflow:hidden;
  background:#082B40;
}

.government-overview-media video,
.government-overview-fallback img,
.government-hero img{
  width:100%;
  min-height:285px;
  max-height:410px;
  object-fit:cover;
  display:block;
}

@media (max-width:560px){
  .government-overview-media video,
  .government-overview-fallback img,
  .government-hero img{
    min-height:250px;
  }
}


/* V5.32 — Stop 5 guided Then & Now */
.catholic-comparison-block .flow-cta{margin-top:16px;}
.catholic-then-now{margin-top:14px;}

/* ============================================================
   V5.34.1 — Prince Klaas hero framing
   Preserve the full portrait monument image inside the wide hero card.
   ============================================================ */
.standard-stop-hero.klaas-hero,
.standard-stop-hero.klaas-hero img{
  min-height:360px;
}

.standard-stop-hero.klaas-hero{
  background:linear-gradient(180deg,#DCECF3 0%,#F5F1E8 100%);
}

.standard-stop-hero.klaas-hero img{
  object-fit:contain;
  object-position:center center;
}

@media (max-width:560px){
  .standard-stop-hero.klaas-hero,
  .standard-stop-hero.klaas-hero img{
    min-height:320px !important;
  }
}

/* ============================================================
   V5.37 — field reliability, navigation, PWA and accessibility
   ============================================================ */
.skip-link{
  position:fixed;left:12px;top:10px;z-index:20000;
  transform:translateY(-160%);padding:10px 14px;border-radius:12px;
  background:#fff;color:#052A43;font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.2)
}
.skip-link:focus{transform:none}
.home-tool-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.install-hint{margin-top:8px;color:#5f707a;font-size:11px;line-height:1.45}

.journey-assist{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;
  margin:10px 0 2px;padding:11px 12px;border:1px solid rgba(5,42,67,.09);border-radius:17px;
  background:linear-gradient(145deg,#f4faf8,#fff8e7)
}
.journey-assist-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:white;font-size:21px;box-shadow:0 5px 16px rgba(5,42,67,.05)}
.journey-assist-copy{min-width:0;display:grid;gap:2px}.journey-assist-copy small{font-size:8px;font-weight:900;letter-spacing:.12em;color:#0A7180}.journey-assist-copy strong{font-size:13px;color:#06233D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.journey-assist-copy span{font-size:10px;color:#61737D;line-height:1.3}
.gps-rescue-link{display:block;width:100%;margin:10px auto 0;border:0;background:transparent;color:#4f6571;text-decoration:underline;text-underline-offset:3px;font-weight:800;font-size:11px}
.gps-help-text{margin:9px 0 0!important;padding:9px 10px;border-radius:12px;background:#f4f7f7;color:#526670!important;font-size:10px!important;line-height:1.45!important}
.map-head-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}

.offline-route-map{margin:14px 0 10px;padding:10px;border-radius:17px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);overflow:hidden}
.offline-route-map svg{width:100%;height:auto;display:block}.offline-map-line{fill:none;stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5}.offline-map-pin{fill:#fff;stroke:#0b6f75;stroke-width:2}.offline-map-pin.done{fill:#dff6e9;stroke:#1b815b}.offline-map-pin.current{fill:#ffd447;stroke:#8a6500}.offline-map-num{font:800 9px system-ui,sans-serif;fill:#052A43;text-anchor:middle;dominant-baseline:middle}

.diagnostics-card{margin:14px 0;border-top:1px solid rgba(6,42,67,.09);padding-top:12px}.diagnostics-card summary{cursor:pointer;color:#435866;font-weight:900;font-size:12px}.diagnostics-output{white-space:pre-wrap;margin:10px 0;padding:11px;border-radius:13px;background:#f5f7f7;color:#425560;font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;max-height:260px;overflow:auto}
.issue-sheet textarea,.issue-sheet select{width:100%;padding:13px 14px;border:1px solid #cbd8dc;border-radius:14px;background:#fff;color:#082d45;font:inherit}.issue-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.issue-privacy{font-size:10px!important;color:#71818b!important;text-align:center}.challenge-near-btn{margin-top:8px}

body.large-text{font-size:112%}body.large-text .stop-heading p,body.large-text .guided-story,body.large-text .flow-copy p{font-size:1em!important}body.large-text .btn{font-size:1em}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

.standard-stop-hero img[data-hero-fit="contain"]{object-fit:contain!important;background:linear-gradient(180deg,#dcecf3 0%,#f5f1e8 100%)}
.standard-stop-hero img[data-hero-fit="cover"]{object-fit:cover!important}
.standard-stop-hero.media-failed{display:grid;place-items:end stretch;padding:18px;background:linear-gradient(145deg,#edf4f4,#fff5dc)}
.standard-stop-hero.media-failed::after{content:"Image unavailable — continue with the stop below.";display:block;padding:12px 13px;border-radius:13px;background:rgba(5,42,67,.80);color:#fff;font-size:11px;font-weight:800}

@media(max-width:560px){
  .home-tool-actions{display:grid;grid-template-columns:1fr}.home-tool-actions .btn{width:100%}
  .journey-assist{grid-template-columns:38px 1fr}.journey-assist-icon{width:38px;height:38px}.journey-assist .btn{grid-column:1/-1;width:100%;min-height:40px}
  .map-head-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:7px}.map-heading{align-items:flex-start;flex-wrap:wrap}
  .issue-actions{grid-template-columns:1fr}
}
.map-route-note{margin:-13px 18px 18px;color:#697982;font-size:10px;line-height:1.4}

/* V5.37.4 — Stop 7 optional YouTube story video */
.youtube-story-card{
  margin:18px 0;
  padding:16px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(7,27,49,.10);
  box-shadow:0 12px 28px rgba(5,42,67,.08);
}
.youtube-story-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.youtube-story-kicker{
  display:block;
  margin-bottom:5px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#8b5b22;
}
.youtube-story-head strong{display:block;font-size:1.05rem;line-height:1.3;color:#071B31;}
.youtube-story-head p{margin:6px 0 0;color:#53616d;line-height:1.5;font-size:.93rem;}
.youtube-embed-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:16px;
  background:#111;
}
.youtube-embed-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.youtube-open-link{
  display:inline-flex;
  align-items:center;
  margin-top:11px;
  font-weight:750;
  color:#0b5f8a;
  text-decoration:none;
}
.youtube-open-link:focus-visible{outline:3px solid rgba(11,95,138,.25);outline-offset:4px;border-radius:4px;}
@media(max-width:560px){
  .youtube-story-card{padding:13px;border-radius:18px;}
  .youtube-story-head p{font-size:.9rem;}
}


/* V5.37.4 — Trail Audio: plays only while travelling to a locked stop */
.trail-audio-card{width:100%;margin:18px 0 14px;padding:14px 14px 11px;border:1px solid rgba(7,48,75,.12);border-radius:20px;background:linear-gradient(145deg,#F3FBF9,#FFF8E7);box-shadow:0 8px 22px rgba(7,48,75,.06);text-align:left}
.trail-audio-topline{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center}
.trail-audio-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:white;font-size:21px;box-shadow:0 3px 10px rgba(7,48,75,.08)}
.trail-audio-copy{min-width:0}.trail-audio-copy small{display:block;color:#0C7880;font-size:9px;font-weight:900;letter-spacing:.12em;margin-bottom:2px}.trail-audio-copy strong{display:block;color:var(--navy);font-size:15px;line-height:1.2}.trail-audio-copy span{display:block;color:#667782;font-size:11px;line-height:1.35;margin-top:3px}
.trail-audio-toggle{border:0;border-radius:999px;background:var(--navy);color:white;font-weight:900;font-size:12px;padding:10px 13px;white-space:nowrap;min-width:74px}.trail-audio-toggle:disabled{opacity:.55}
.trail-audio-progress{height:4px;border-radius:999px;background:rgba(7,48,75,.09);overflow:hidden;margin-top:11px}.trail-audio-progress span{display:block;height:100%;width:0;background:#1595A3;border-radius:inherit;transition:width .25s linear}
@media(max-width:430px){.trail-audio-topline{grid-template-columns:38px minmax(0,1fr) auto;gap:9px}.trail-audio-icon{width:38px;height:38px}.trail-audio-toggle{font-size:11px;padding:9px 11px;min-width:68px}}


/* ============================================================
   V5.39.1 — consolidated field-test refinements
   ============================================================ */

/* Preserve the complete video frame instead of cropping landmarks or people. */
.overview-media video,
.museum-overview-media video,
.cathedral-overview-media video,
.government-overview-media video,
.cathedral-interior-video,
.studio-interview-video-wrap video,
video.standard-stop-video{
  object-fit:contain!important;
  object-position:center!important;
  background:#071B31!important;
}

/* Keep the Then ↔ Now thumb easy to retrieve at either edge. */
.then-now-knob{
  width:56px!important;
  height:56px!important;
  margin-left:-28px!important;
  margin-top:-28px!important;
  touch-action:none;
}
.then-now-badge{transition:opacity .12s ease}

/* Clear, consistent guided progression. */
.next-primary-cta{
  width:100%!important;
  min-height:58px;
  padding:15px 18px!important;
  font-size:15px!important;
  font-weight:900!important;
}
.listen-top-btn{
  display:inline-flex!important;
  margin:12px 0 5px!important;
  min-height:44px;
}
.flow-actions .listen-top-btn{margin:0!important}
.flow-actions:empty{display:none!important}

/* Group Challenge follows one shared route. */
.tour-flex-actions.hidden,
.tour-nav.hidden{display:none!important}
.group-rejoin-note{
  margin:12px 0 0;
  color:#667782;
  font-size:12px;
  line-height:1.45;
}

/* Leaderboard becomes a between-stop reveal rather than a floating control. */
.group-leaderboard-launch{display:none!important}
.between-stop-standings{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:22px;
}
.between-stop-standings.hidden{display:none!important}
.between-stop-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,22,36,.72);
  backdrop-filter:blur(7px);
}
.between-stop-card{
  position:relative;
  z-index:1;
  width:min(520px,100%);
  max-height:min(82vh,720px);
  overflow:auto;
  padding:24px 18px 20px;
  border-radius:26px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.between-stop-card h2{
  margin:5px 0 5px;
  color:var(--navy);
  font-family:"Playfair Display",serif;
  font-size:28px;
  line-height:1.1;
}
.between-stop-copy{
  margin:0 0 14px;
  color:#64747e;
  font-size:13px;
  line-height:1.45;
}
.between-stop-card .group-leaderboard-list{margin:12px 0 18px}

/* Give the Source Lens enough room to read as interpretation, not a teaser. */
.source-lens-card p{
  line-height:1.55!important;
  margin-top:4px!important;
}

/* Mobile touch comfort. */
@media(max-width:560px){
  .then-now-knob{
    width:58px!important;
    height:58px!important;
    margin-left:-29px!important;
    margin-top:-29px!important;
  }
  .next-primary-cta{min-height:60px}
}


/* V5.39.2 — Main-route map numbering + bonus preview cards */
.tour-map-preview-popup .leaflet-popup-content-wrapper{padding:0;border-radius:18px;overflow:hidden;box-shadow:0 16px 38px rgba(6,35,61,.22);border:1px solid rgba(6,35,61,.10)}
.tour-map-preview-popup .leaflet-popup-content{margin:0;width:auto!important}
.tour-map-preview-popup .leaflet-popup-tip{box-shadow:none}
.tour-map-preview-popup .leaflet-popup-close-button{width:31px!important;height:31px!important;line-height:29px!important;border-radius:50%;background:rgba(255,255,255,.94)!important;color:#082943!important;font-size:20px!important;right:8px!important;top:8px!important;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.map-preview-card{background:#fff;color:#092942;overflow:hidden}
.map-preview-card.bonus{border-top:4px solid #D89A23}
.map-preview-card.main{border-top:4px solid #1F8BCA}
.map-preview-image{height:118px;background:#eaf1f2;overflow:hidden}
.map-preview-image img{width:100%;height:100%;object-fit:cover;display:block}
.map-preview-body{padding:15px 16px 16px}
.map-preview-topline{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:7px}
.map-preview-kind{font-size:9px;font-weight:900;letter-spacing:.11em;color:#13759a}
.map-preview-card.bonus .map-preview-kind{color:#9a6909}
.map-preview-status{font-size:9px;font-weight:800;color:#617383;background:#f3f6f7;border-radius:999px;padding:4px 7px;white-space:nowrap}
.map-preview-body h3{font-size:20px;line-height:1.08;margin:0 0 6px;color:#072842}
.map-preview-body p{font-size:12px;line-height:1.45;color:#657582;margin:0 0 10px}
.map-preview-distance{display:block;font-size:11px;font-weight:800;color:#355267;margin:0 0 11px}
.map-preview-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
.map-preview-actions button{border-radius:12px;padding:10px 12px;font:800 11px/1.1 inherit;cursor:pointer}
.map-preview-primary{border:0;background:#082f4d;color:#fff}
.map-preview-secondary{border:1px solid #d8e0e4;background:#fff;color:#12364f}
.map-preview-group-note{font-size:10px;line-height:1.4;color:#667783;background:#f6f4ed;border-radius:11px;padding:9px 10px}
.offline-stop-row.bonus>span{background:#fff1bd;color:#8b5a00}
.offline-stop-row.main-route>span{background:#e7f2f7;color:#0c5274}
@media(max-width:560px){.tour-map-preview-popup .leaflet-popup-content-wrapper{border-radius:16px}.map-preview-image{height:105px}.map-preview-body h3{font-size:18px}.map-preview-actions button{padding:10px}}


/* V5.39.3 — interactive quest introduction */
.quest-intro-step{padding-top:2px}
.quest-intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 12px}
.quest-intro-card{appearance:none;border:1px solid #dce5e5;background:#fffdf8;border-radius:22px;padding:17px 12px;text-align:left;display:grid;gap:5px;min-height:132px;color:#0a2a42;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.quest-intro-card>span{font-size:29px}.quest-intro-card strong{font-size:16px}.quest-intro-card small{color:#647784;line-height:1.3}
.quest-intro-card:hover,.quest-intro-card:focus-visible{transform:translateY(-2px);outline:none;border-color:#2a9ba1}
.quest-intro-card.selected{background:linear-gradient(145deg,#eefaf7,#fff7df);border-color:#0e8f99;box-shadow:0 8px 24px rgba(8,83,92,.10)}
.quest-intro-tip{border-radius:18px;background:#082c45;color:#fff;padding:15px 17px;display:grid;gap:3px;margin:10px 0 16px}
.quest-intro-tip strong{font-size:15px}.quest-intro-tip span{font-size:13px;line-height:1.42;color:rgba(255,255,255,.78)}
@media(max-width:620px){.quest-intro-grid{grid-template-columns:1fr}.quest-intro-card{min-height:0;grid-template-columns:44px 1fr;align-items:center}.quest-intro-card>span{grid-row:1/3}.quest-intro-card small{grid-column:2}}

/* V5.39.3 — route-first passport with optional Bonus discoveries */
.bonus-passport-section{margin:4px 18px 28px;padding:22px 0 4px;border-top:1px solid rgba(193,148,38,.28)}
.bonus-passport-head{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;padding:0 4px 14px}
.bonus-passport-head h3{font-family:"Playfair Display",serif;color:var(--navy);font-size:25px;margin:4px 0 4px}.bonus-passport-head p{margin:0;color:#667985;line-height:1.45}
.bonus-passport-head>span{white-space:nowrap;border-radius:999px;background:#fff3c8;color:#78570b;padding:8px 12px;font-size:12px;font-weight:800}
.bonus-passport-grid{padding:0!important}.bonus-stamp:not(.earned){background:#fffaf0;border-color:#d6b662;color:#8c6a1e}.bonus-stamp:not(.earned) .stamp-icon{color:#d09a14}
@media(max-width:620px){.bonus-passport-head{align-items:flex-start;flex-direction:column;gap:8px}.bonus-passport-head>span{align-self:flex-start}}

/* V5.39.3 — post-stop reflection / completion graphic handoff */
.post-stop-panel{background:linear-gradient(180deg,#fffdf8,#f5fbf8)}
.post-quest-reflection{text-align:center;max-width:760px;margin:0 auto}.post-quest-check{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:2px auto 14px;background:#e5f8ef;color:#187955;font-size:29px;font-weight:900}
.post-quest-celebrate{max-width:650px;margin:0 auto;color:#586e7b;line-height:1.55}.post-quest-divider{height:1px;background:linear-gradient(90deg,transparent,#d8c48e,transparent);margin:26px 0}
.word-choice-nudge{text-align:center;color:#6b7d88;font-size:13px;margin:15px 0 0}.post-word-actions{display:grid;gap:10px;margin-top:18px}.post-word-actions .final-word-result{margin:0 0 4px}.post-word-actions .btn{width:100%}
.full-map-action{width:100%}

/* V5.39.4 — explicit answer → Next progression */
.answer-step-hint{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;align-items:center;margin:8px 0 12px;padding:10px 12px;border:1px solid rgba(8,116,139,.16);border-radius:14px;background:linear-gradient(135deg,rgba(239,249,247,.96),rgba(255,248,222,.82));color:var(--navy)}
.answer-step-hint>span{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:900}
.answer-step-hint strong{font-size:13px;line-height:1.15}.answer-step-hint small{font-size:11px;line-height:1.25;color:var(--muted)}
.answer-next-action{width:100%;margin-top:14px;min-height:58px;font-weight:900}

/* V5.39.6 — Explore Antigua brand mark */
.brand-mark{
  width:40px;
  height:40px;
  object-fit:contain;
  object-position:center;
  display:block;
  flex:0 0 auto;
  padding:0;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
@media (max-width:520px){
  .brand-mark{width:36px;height:36px}
}

/* Launch controls: !important prevents render updates exposing disabled features. */
.launch-no-groups #groupChallengeBtn,.launch-no-groups #groupStartBtn,.launch-no-groups #groupLeaderboardBtn,.launch-no-groups #groupModal,.launch-no-groups #betweenStopStandings,.launch-no-groups #backToChallengeModeBtn,.launch-no-demo #demoBtn,.launch-no-demo #unlockDemoBtn,.launch-no-demo label:has(#demoToggle){display:none!important}

/* Preview is a first-class path for visitors exploring away from the route. */
#homeView #demoBtn{border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(7,27,49,.45);color:#fff;padding:14px 18px;font-size:16px;font-weight:800;text-decoration:none;width:100%}
#homeView #demoBtn:hover,#homeView #demoBtn:focus-visible{background:rgba(255,255,255,.2);outline-offset:3px}
.preview-location-hint{color:#fff;text-align:center;font-size:12px;line-height:1.5}