@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;600;700;800;900&display=swap");

:root {
  --bg:#020b13;
  --surface:#071826;
  --surface-2:#0a2131;
  --line:rgba(255,255,255,.11);
  --yellow:#ffbd18;
  --yellow-soft:#ffd35c;
  --cyan:#20d5ce;
  --white:#eef7ff;
  --muted:#9cadba;
  --display:"Archivo Black",Impact,sans-serif;
  --body:"Inter","Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;overflow-x:hidden}
body{min-height:100vh;margin:0;overflow-x:hidden;color:var(--white);background:radial-gradient(circle at 72% 0%,rgba(32,213,206,.055),transparent 30%),var(--bg);font-family:var(--body)}
a{color:inherit;text-decoration:none}button,input{font:inherit}[hidden]{display:none!important}img,video{display:block}

.button{min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:10px;font-weight:900;text-transform:uppercase;transition:.18s ease}
.button:hover{transform:translateY(-2px)}
.button-yellow{color:#07131b;background:linear-gradient(180deg,var(--yellow-soft),var(--yellow));border:1px solid var(--yellow)}
.button-ghost{color:#dce8ee;border:1px solid rgba(255,255,255,.14)}
.button-large{min-height:54px;padding-inline:24px;font-size:11px}
.eyebrow{color:var(--cyan);font-size:40px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}

.public-header{width:min(1510px,calc(100% - 56px));min-height:86px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(255,255,255,.055)}
.public-logo{width:145px;height:74px;display:flex;align-items:center}.public-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.public-actions{display:flex;gap:12px}

.hero-section{width:min(1510px,calc(100% - 56px));margin-inline:auto;position:relative;padding:50px 0 82px;display:grid;grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);align-items:center;gap:72px}
.hero-background{position:absolute;inset:0;overflow:hidden;pointer-events:none}.world-map{width:420px;height:210px;position:absolute;left:-30px;top:58px;opacity:.22;background-image:radial-gradient(circle,rgba(32,213,206,.45) 1px,transparent 1.5px);background-size:9px 9px;mask-image:radial-gradient(ellipse,black,transparent 72%)}
.flight-route{position:absolute;left:210px;top:128px;width:330px;height:90px;border-top:1px dashed rgba(32,213,206,.38);border-radius:50%;transform:rotate(8deg)}.flight-plane{position:absolute;left:500px;top:164px;color:var(--cyan);font-size:30px;transform:rotate(-18deg);opacity:.7}
.hero-copy{position:relative;z-index:2}.hero-copy h1{margin:15px 0 0;font-family:var(--display);font-size:clamp(50px,6vw,86px);line-height:.98;letter-spacing:-.05em}.hero-copy h1 em{color:var(--cyan);font-style:normal}.hero-lead{margin:28px 0 0;font-size:18px;font-weight:800}.hero-support{max-width:590px;margin:17px 0 0;color:var(--muted);font-size:15px;line-height:1.65}.hero-actions{margin-top:32px;display:flex;gap:14px}

.hero-product{min-width:0;position:relative;z-index:2}.hero-carousel{position:relative;min-height:500px}.hero-slide{position:absolute;inset:0;opacity:0;transform:translateX(20px);transition:opacity .45s ease,transform .45s ease}.hero-slide.active{opacity:1;transform:none}.hero-slide[hidden]{display:block!important;visibility:hidden}.hero-slide.active[hidden]{visibility:visible}
.product-window,.devices-window{height:100%;overflow:hidden;background:#07131e;border:1px solid rgba(32,213,206,.31);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.36)}
.product-window{display:grid;grid-template-rows:48px minmax(0,1fr) auto}.product-window-bar{padding:0 17px;display:flex;align-items:center;gap:7px;background:#06131f;border-bottom:1px solid rgba(255,255,255,.07)}.product-window-bar span{width:9px;height:9px;background:#405563;border-radius:50%}.product-window-bar small{margin-left:auto;color:#748995;font-size:9px;font-weight:800;text-transform:uppercase}.product-window>img{width:100%;height:100%;min-height:360px;object-fit:cover}.product-window-caption{min-height:78px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.product-window-caption div{display:grid}.product-window-caption small{color:var(--cyan);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.product-window-caption strong{margin-top:5px;font-size:16px}.product-window-caption>span{padding:7px 10px;color:var(--yellow);background:rgba(255,189,24,.07);border:1px solid rgba(255,189,24,.27);border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase}
.hero-carousel-dots{margin-top:18px;display:flex;justify-content:center;gap:9px}.hero-carousel-dots button{width:9px;height:9px;padding:0;background:#425967;border:0;border-radius:50%;cursor:pointer;transition:.2s}.hero-carousel-dots button.active{width:34px;background:var(--yellow);border-radius:999px}

.devices-window{padding:44px;display:grid;align-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,rgba(32,213,206,.12),transparent 37%),#07131e}.devices-kicker{color:var(--cyan);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.devices-window h2{margin:12px 0 0;font-family:var(--display);font-size:42px;letter-spacing:-.04em}.devices-window>p{margin:28px auto 0;color:var(--muted);font-size:13px}.device-stage{margin-top:35px;display:grid;grid-template-columns:1.3fr .65fr 1fr;align-items:end;gap:30px}.device{display:grid;justify-items:center;gap:10px}.device-screen{overflow:hidden;display:block;background:#02080e;border:3px solid #89a2af}.device-screen img{width:100%;height:100%;object-fit:cover}.desktop-device .device-screen{width:250px;height:145px;border-radius:9px}.desktop-device i{width:80px;height:7px;margin-top:-9px;background:#89a2af;border-radius:0 0 9px 9px}.mobile-device .device-screen{width:82px;height:155px;border-width:4px;border-radius:14px}.vr-device{position:relative;min-height:168px;grid-template-columns:1fr 1fr}.vr-lens{width:118px;height:84px;overflow:hidden;background:#02080e;border:4px solid #89a2af}.vr-lens.left{border-radius:32px 10px 10px 32px}.vr-lens.right{margin-left:-2px;border-radius:10px 32px 32px 10px}.vr-lens img{width:210%;height:100%;object-fit:cover}.vr-device strong{grid-column:1/3}.device strong{font-size:12px;text-transform:uppercase}

.preview-section{width:min(1510px,calc(100% - 56px));margin-inline:auto;padding-bottom:86px}.preview-shell{padding:24px;background:linear-gradient(145deg,#071826,#07131e);border:1px solid rgba(32,213,206,.24);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.32)}
.preview-heading{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:28px}.preview-heading h2{margin:8px 0 0;font-family:var(--display);font-size:clamp(30px,3.7vw,52px);letter-spacing:-.045em}.preview-progress{display:flex;align-items:center;gap:10px}.preview-progress span{width:34px;height:34px;display:grid;place-items:center;color:#718794;background:#102b3c;border:1px solid rgba(255,255,255,.12);border-radius:50%;font-size:10px;font-weight:900}.preview-progress span.active{color:#07131b;background:var(--yellow);border-color:var(--yellow)}.preview-progress span.complete{color:#06201d;background:var(--cyan);border-color:var(--cyan)}.preview-progress i{width:56px;height:1px;background:rgba(255,255,255,.13)}
.preview-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:17px}.journey-video-card{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.11);border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.35)}.journey-main-video{width:100%;height:100%;object-fit:cover;background:#000}.video-poster{position:absolute;inset:0;z-index:2}.video-poster img{width:100%;height:100%;object-fit:cover}.video-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 54%)}
.video-stage-action{min-width:220px;min-height:66px;position:absolute;left:50%;top:50%;z-index:10;padding:0 25px;display:flex;align-items:center;justify-content:center;gap:13px;color:#07131b;background:linear-gradient(180deg,var(--yellow-soft),var(--yellow));border:1px solid var(--yellow);border-radius:14px;box-shadow:0 18px 42px rgba(0,0,0,.36),0 0 0 8px rgba(255,189,24,.08);transform:translate(-50%,-50%);cursor:pointer;font-size:12px;text-transform:uppercase}.video-stage-action-icon{width:34px;height:34px;display:grid;place-items:center;background:rgba(7,19,27,.1);border-radius:50%;font-size:14px}.video-stage-action:hover{transform:translate(-50%,-52%)}
.role-badge{position:absolute;z-index:8;top:20px;left:20px;padding:11px 15px;display:grid;color:#06131b;background:var(--yellow);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.28)}.role-badge small{font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.role-badge strong{margin-top:3px;font-size:16px;text-transform:uppercase}
.journey-speech-bubble{max-width:310px;position:absolute;top:28%;left:33%;z-index:5;padding:18px 24px;color:#174072;background:white;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.3);font-size:clamp(22px,2.2vw,38px);font-weight:800;text-align:center}.journey-speech-bubble:after{content:"";position:absolute;left:18px;bottom:-18px;border-width:18px 18px 0 0;border-style:solid;border-color:white transparent transparent transparent}
.journey-microphone-overlay{position:absolute;right:22px;bottom:84px;z-index:9;display:flex;flex-direction:column;align-items:center;gap:8px}.journey-microphone-button{width:66px;height:66px;display:grid;place-items:center;padding:0;color:white;background:linear-gradient(180deg,#24334a,#101b2b);border:1px solid rgba(255,255,255,.18);border-radius:50%;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .18s ease,border-color .18s ease,background .18s ease}.journey-microphone-button:hover{transform:translateY(-2px);border-color:var(--cyan)}.journey-microphone-button.listening{background:linear-gradient(180deg,#2d9be8,#1668b3);border-color:rgba(255,255,255,.5);box-shadow:0 0 0 8px rgba(32,213,206,.12),0 8px 24px rgba(0,0,0,.35)}.journey-microphone-symbol{font-size:30px}.journey-microphone-label{padding:5px 10px;color:#e8edf3;background:rgba(2,8,14,.82);border-radius:999px;font-size:12px;font-weight:700}
.journey-video-controls{min-height:58px;position:absolute;left:0;right:0;bottom:0;z-index:6;padding:8px 12px;display:flex;align-items:center;gap:10px;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.42))}.journey-control-button{width:36px;height:36px;padding:0;flex:0 0 auto;display:grid;place-items:center;color:white;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer}.journey-control-button:hover{color:var(--yellow);border-color:rgba(255,189,24,.35)}.journey-time{color:#dbe1e8;font-size:12px}.journey-progress-range,.journey-volume-range{accent-color:var(--yellow);cursor:pointer}.journey-progress-range{min-width:0;flex:1}.journey-volume-range{width:82px}
.video-instruction{min-height:58px;margin-top:12px;padding:0 16px;display:flex;align-items:center;gap:12px;background:rgba(8,29,42,.74);border:1px solid rgba(255,255,255,.075);border-radius:12px}.video-instruction span{color:var(--cyan)}.video-instruction p{margin:0;color:#a9bac5;font-size:12px}

.preview-panel{display:grid;align-content:start;gap:12px;background:transparent;border:0;border-radius:0}.preview-panel-section{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(9,26,41,.98),rgba(4,13,23,.98));border:1px solid var(--line);border-radius:16px;transition:opacity .22s,filter .22s,border-color .22s,box-shadow .22s}.preview-panel-section.active{opacity:1;filter:none;border-color:rgba(64,231,216,.72);box-shadow:0 0 0 1px rgba(64,231,216,.1),0 0 24px rgba(28,205,191,.1)}.preview-panel-section.locked{opacity:.44;filter:saturate(.48)}.preview-panel-section.complete{opacity:.76}.preview-panel-heading{min-height:52px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.07)}.preview-panel-heading h3{margin:0;color:var(--yellow);font-size:13px;font-weight:900;text-transform:uppercase}.preview-panel-heading-actions{display:flex;align-items:center;gap:8px}.preview-section-indicator{width:18px;height:18px;display:grid;place-items:center;color:rgba(90,224,211,.22);font-size:11px}.preview-panel-section.active .preview-section-indicator{color:#5ee6d7;text-shadow:0 0 10px rgba(94,230,215,.72)}.preview-section-check{color:var(--cyan);font-size:22px;font-weight:900}.preview-mode-card{min-height:96px;position:relative;margin:0;padding:13px 40px 13px 13px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;background:rgba(255,255,255,.03);border:0;border-radius:0}.preview-mode-card.active{background:rgba(32,213,206,.035)}.preview-mode-card.locked{opacity:.72}.preview-mode-card-icon{width:44px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.055);border-radius:10px;font-size:21px}.preview-mode-card-content{min-width:0;display:grid}.preview-mode-card-content span{color:var(--cyan);font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.preview-mode-card-content strong{margin-top:4px;color:#fff;font-size:14px;text-transform:uppercase}.preview-mode-card-content small{margin-top:5px;color:#abb5c0;font-size:10px;line-height:1.35}.preview-card-status{position:absolute;top:50%;right:14px;color:#a9b5be;font-size:17px;transform:translateY(-50%)}.preview-mode-card.complete .preview-card-status{color:var(--cyan)}.preview-mode-card.active .preview-card-status{color:#fff}.preview-checkpoint-list{padding:10px;display:grid;gap:9px}.preview-checkpoint-row{min-height:76px;padding:9px 10px;display:grid;grid-template-columns:48px 44px minmax(0,1fr) 38px;align-items:center;gap:8px;color:#8f99a6;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:11px;transition:color .18s,border-color .18s,background .18s}.preview-checkpoint-row.active{color:#fff;background:rgba(32,213,206,.055);border-color:rgba(32,213,206,.58)}.preview-checkpoint-row.complete{color:#fff}.preview-checkpoint-row.locked{opacity:.56}.preview-checkpoint-time{color:#c2cbd3;font-size:11px}.preview-checkpoint-avatar{width:40px;height:40px;display:grid;place-items:center;background:rgba(255,255,255,.06);border-radius:9px;font-size:21px}.preview-checkpoint-content{min-width:0;display:grid}.preview-checkpoint-content small{color:#89cfd0;font-size:9px;text-transform:uppercase}.preview-checkpoint-content strong{overflow:hidden;margin-top:4px;color:inherit;font-size:13px;white-space:nowrap;text-overflow:ellipsis}.preview-checkpoint-status{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:13px}.preview-checkpoint-row.complete .preview-checkpoint-status{color:#fff;background:#32d09c;box-shadow:0 0 0 3px rgba(50,208,156,.12)}.preview-checkpoint-row.active .preview-checkpoint-status{color:#07131c;background:var(--yellow)}
.preview-result{margin-top:16px;padding:14px;display:flex;align-items:center;gap:11px;background:rgba(32,213,206,.065);border:1px solid rgba(32,213,206,.24);border-radius:11px}.preview-result>span{width:34px;height:34px;display:grid;place-items:center;color:#06201d;background:var(--cyan);border-radius:50%;font-weight:900}.preview-result>div{display:grid}.preview-result small{color:var(--cyan);font-size:8px;font-weight:900;text-transform:uppercase}.preview-result strong{margin-top:4px;color:var(--yellow);font-size:12px}

.public-footer{min-height:150px;padding:28px clamp(22px,5vw,80px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;border-top:1px solid rgba(255,255,255,.07)}.public-footer img{width:110px}.public-footer p{justify-self:center;color:#81939f;font-size:12px}.public-footer a{color:var(--cyan);font-size:11px;font-weight:800}

@media(max-width:1120px){.hero-section{grid-template-columns:1fr}.hero-product{max-width:920px;margin-inline:auto;width:100%}.preview-grid{grid-template-columns:1fr}.preview-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.preview-panel-section,.preview-result{min-width:0}.preview-checkpoint-list{padding:8px}.preview-checkpoint-row{grid-template-columns:38px 38px minmax(0,1fr) 32px}}
@media(max-width:720px){.public-header,.hero-section,.preview-section{width:calc(100% - 28px)}.public-header{min-height:72px}.public-logo{width:112px;height:62px}.public-actions .button-ghost{display:none}.hero-section{padding:42px 0 64px;gap:48px}.hero-copy h1{font-size:45px}.hero-carousel{min-height:410px}.product-window>img{min-height:280px}.device-stage{grid-template-columns:1fr}.preview-heading{align-items:flex-start;flex-direction:column}.preview-progress i{width:36px}.preview-shell{padding:13px}.journey-volume-range{display:none}.preview-panel{display:grid;grid-template-columns:1fr}.preview-checkpoint-row{grid-template-columns:44px 40px minmax(0,1fr) 34px}.public-footer{grid-template-columns:1fr;justify-items:center;text-align:center}}


/* =========================================================
   PREVIEW COMPLETE — SCRAPBOOK / ACCESS GRANTED
========================================================= */

body.preview-modal-open {
  overflow: hidden;
}

.preview-reward-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 28px;
}

.preview-reward-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(1, 7, 13, 0.82);
  border: 0;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.preview-reward-card {
  width: min(980px, 100%);
  max-height: calc(100vh - 56px);
  position: relative;
  z-index: 1;
  overflow-y: auto;
  padding: 34px;
  background:
    radial-gradient(circle at 100% 0%, rgba(32, 213, 206, 0.09), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(255, 189, 24, 0.07), transparent 30%),
    linear-gradient(155deg, #0a2131, #050f1a 72%);
  border: 1px solid rgba(91, 220, 210, 0.34);
  border-radius: 25px;
  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.025);
  animation: previewRewardIn 420ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes previewRewardIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.preview-reward-close {
  width: 42px;
  height: 42px;
  position: absolute;
  top: 17px;
  right: 17px;
  display: grid;
  place-items: center;
  color: #b9c6ce;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  cursor: pointer;
  font-size: 27px;
  line-height: 1;
}

.preview-reward-close:hover {
  color: var(--yellow);
  border-color: rgba(255, 189, 24, 0.35);
}

.preview-reward-header {
  max-width: 720px;
  padding-right: 50px;
}

.preview-reward-kicker,
.preview-memory-label {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.preview-reward-header h2 {
  margin: 11px 0 0;
  color: #fff;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(31px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.preview-reward-header p {
  margin: 15px 0 0;
  color: #a9b8c2;
  line-height: 1.58;
}

.preview-reward-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.05fr .95fr 1fr;
  gap: 14px;
}

.preview-memory-card {
  min-height: 250px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 17px;
}

.preview-memory-card h3 {
  margin: 16px 0 0;
  color: #fff;
  font-size: 18px;
}

.preview-memory-card p {
  margin: 9px 0 0;
  color: #93a5b1;
  font-size: 11px;
  line-height: 1.5;
}

.preview-stamp {
  width: 148px;
  height: 148px;
  margin: 18px auto 0;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--yellow);
  border: 4px double var(--yellow);
  border-radius: 50%;
  transform: rotate(-7deg);
  text-align: center;
  box-shadow:
    inset 0 0 0 7px rgba(255, 189, 24, 0.055),
    0 0 25px rgba(255, 189, 24, 0.08);
}

.preview-stamp span,
.preview-stamp small {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}

.preview-stamp strong {
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.02;
}

.preview-highlight-card {
  align-items: center;
  text-align: center;
}

.preview-highlight-icon {
  width: 105px;
  height: 105px;
  margin-top: 27px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(32, 213, 206, .19), rgba(32, 213, 206, .035));
  border: 1px solid rgba(32, 213, 206, .28);
  border-radius: 50%;
  font-size: 52px;
}

.preview-highlight-card > small {
  margin-top: 20px;
  color: #8da1ae;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.preview-highlight-card h3 {
  color: var(--yellow);
  font-size: 22px;
  text-transform: uppercase;
}

.preview-itinerary-card h3 {
  margin-top: 25px;
}

.preview-itinerary-card ul {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
}

.preview-itinerary-card li {
  min-height: 43px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dce5e9;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 10px;
  font-size: 11px;
}

.preview-itinerary-card li span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #06201d;
  background: var(--cyan);
  border-radius: 50%;
  font-weight: 900;
}

.preview-access-card {
  margin-top: 16px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(410px, 1.22fr);
  align-items: center;
  gap: 24px;
  background:
    linear-gradient(115deg, rgba(255, 189, 24, .085), transparent 48%),
    rgba(2, 10, 17, .45);
  border: 1px solid rgba(255, 189, 24, 0.28);
  border-radius: 18px;
}

.preview-access-copy h3 {
  margin: 9px 0 0;
  color: #fff;
  font-size: 21px;
}

.preview-access-copy p {
  margin: 8px 0 0;
  color: #93a5b1;
  font-size: 11px;
}

.preview-boarding-ticket {
  min-height: 112px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 112px;
  color: #08131b;
  background: linear-gradient(135deg, #ffd75e, #ffb814);
  border-radius: 16px;
  box-shadow:
    0 14px 34px rgba(255, 189, 24, .22),
    0 0 0 1px rgba(255, 255, 255, .18) inset;
  animation: previewTicketFloat 2.8s ease-in-out infinite;
  transform-origin: center;
}

.preview-boarding-ticket::before {
  content: "";
  width: 36%;
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -55%;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .55),
    transparent
  );
  transform: rotate(18deg);
  animation: previewTicketShine 3.4s ease-in-out infinite;
  pointer-events: none;
}

.preview-boarding-ticket::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  right: 111px;
  border-left: 2px dashed rgba(8, 19, 27, .27);
}

@keyframes previewTicketFloat {
  0%, 100% {
    transform: translateY(0) rotate(-.15deg);
  }

  50% {
    transform: translateY(-5px) rotate(.25deg);
  }
}

@keyframes previewTicketShine {
  0%, 56% {
    left: -55%;
  }

  82%, 100% {
    left: 125%;
  }
}

.preview-boarding-ticket:hover {
  animation-play-state: paused;
  transform: translateY(-5px) rotate(.3deg) scale(1.015);
  box-shadow:
    0 20px 46px rgba(255, 189, 24, .34),
    0 0 0 7px rgba(255, 189, 24, .08);
}

.preview-ticket-main,
.preview-ticket-stub {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
}

.preview-ticket-main {
  padding: 18px 22px;
}

.preview-ticket-main small,
.preview-ticket-main em,
.preview-ticket-stub small {
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .12em;
}

.preview-ticket-main strong {
  margin: 8px 0;
  font-size: 17px;
}

.preview-ticket-stub {
  padding: 14px;
  justify-items: center;
  text-align: center;
}

.preview-ticket-stub strong {
  margin-top: 5px;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 25px;
}

.preview-ticket-stub b {
  margin-top: 8px;
  font-size: 26px;
  animation: previewTicketArrow 900ms ease-in-out infinite alternate;
}

@keyframes previewTicketArrow {
  to {
    transform: translateX(5px);
  }
}

.preview-reward-replay {
  margin: 20px auto 0;
  display: block;
  color: #8fa2ae;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
}

.preview-reward-replay:hover {
  color: var(--cyan);
}

@media (max-width: 820px) {
  .preview-reward-grid {
    grid-template-columns: 1fr;
  }

  .preview-access-card {
    grid-template-columns: 1fr;
  }

  .preview-boarding-ticket {
    grid-template-columns: 1fr 92px;
  }
}

@media (max-width: 560px) {
  .preview-reward-modal {
    padding: 10px;
  }

  .preview-reward-card {
    max-height: calc(100vh - 20px);
    padding: 25px 16px;
    border-radius: 18px;
  }

  .preview-access-card {
    padding: 16px;
  }

  .preview-boarding-ticket {
    grid-template-columns: 1fr 74px;
  }

  .preview-ticket-main {
    padding-inline: 14px;
  }

  .preview-ticket-main strong {
    font-size: 13px;
  }
}


/* =========================================================
   PREVIEW COMPLETE — COMPACT DESKTOP REFINEMENT
========================================================= */

@media (min-width: 821px) and (min-height: 650px) {
  .preview-reward-modal {
    padding: 18px;
  }

  .preview-reward-card {
    width: min(1050px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow: hidden;
    padding: 24px 28px 18px;
    border-radius: 21px;
  }

  .preview-reward-close {
    width: 36px;
    height: 36px;
    top: 13px;
    right: 13px;
    font-size: 23px;
  }

  .preview-reward-header {
    max-width: 760px;
    padding-right: 42px;
  }

  .preview-reward-header h2 {
    margin-top: 7px;
    font-size: clamp(29px, 3.2vw, 43px);
    line-height: .98;
  }

  .preview-reward-header p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.42;
  }

  .preview-reward-grid {
    margin-top: 18px;
    gap: 12px;
  }

  .preview-memory-card {
    min-height: 188px;
    padding: 16px 18px;
    border-radius: 15px;
  }

  .preview-memory-card h3 {
    margin-top: 10px;
    font-size: 15px;
  }

  .preview-memory-card p {
    margin-top: 6px;
    font-size: 9.5px;
    line-height: 1.35;
  }

  .preview-stamp {
    width: 105px;
    height: 105px;
    margin-top: 10px;
    border-width: 3px;
  }

  .preview-stamp span,
  .preview-stamp small {
    font-size: 6px;
  }

  .preview-stamp strong {
    margin: 5px 0;
    font-size: 11px;
  }

  .preview-highlight-icon {
    width: 72px;
    height: 72px;
    margin-top: 13px;
    font-size: 35px;
  }

  .preview-highlight-card > small {
    margin-top: 11px;
    font-size: 7px;
  }

  .preview-highlight-card h3 {
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.05;
  }

  .preview-itinerary-card h3 {
    margin-top: 14px;
  }

  .preview-itinerary-card ul {
    margin-top: 14px;
    gap: 7px;
  }

  .preview-itinerary-card li {
    min-height: 31px;
    padding-inline: 9px;
    gap: 8px;
    font-size: 9px;
  }

  .preview-itinerary-card li span {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .preview-access-card {
    margin-top: 12px;
    padding: 14px 16px;
    grid-template-columns: minmax(225px, .72fr) minmax(420px, 1.28fr);
    gap: 18px;
    border-radius: 15px;
  }

  .preview-access-copy h3 {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.15;
  }

  .preview-access-copy p {
    margin-top: 5px;
    font-size: 9px;
  }

  .preview-boarding-ticket {
    min-height: 82px;
    grid-template-columns: 1fr 92px;
    border-radius: 13px;
    animation: previewTicketShake 3.2s ease-in-out infinite;
  }

  .preview-boarding-ticket::after {
    top: 10px;
    bottom: 10px;
    right: 91px;
  }

  .preview-ticket-main {
    padding: 12px 17px;
  }

  .preview-ticket-main small,
  .preview-ticket-main em,
  .preview-ticket-stub small {
    font-size: 6px;
  }

  .preview-ticket-main strong {
    margin: 5px 0;
    font-size: 14px;
  }

  .preview-ticket-stub {
    padding: 9px;
  }

  .preview-ticket-stub strong {
    margin-top: 3px;
    font-size: 20px;
  }

  .preview-ticket-stub b {
    margin-top: 4px;
    font-size: 20px;
  }

  .preview-reward-replay {
    margin-top: 10px;
    font-size: 8px;
  }
}

@keyframes previewTicketShake {
  0%, 72%, 100% {
    transform: translateY(0) rotate(0);
  }

  75% {
    transform: translateY(-1px) rotate(-1.2deg);
  }

  78% {
    transform: translateY(0) rotate(1.15deg);
  }

  81% {
    transform: translateY(-1px) rotate(-.8deg);
  }

  84% {
    transform: translateY(0) rotate(.65deg);
  }

  87% {
    transform: translateY(0) rotate(0);
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  .preview-reward-card {
    padding-top: 18px;
    padding-bottom: 12px;
  }

  .preview-reward-header h2 {
    font-size: 35px;
  }

  .preview-reward-header p {
    margin-top: 6px;
  }

  .preview-reward-grid {
    margin-top: 12px;
  }

  .preview-memory-card {
    min-height: 166px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .preview-stamp {
    width: 88px;
    height: 88px;
    margin-top: 7px;
  }

  .preview-highlight-icon {
    width: 62px;
    height: 62px;
    margin-top: 9px;
    font-size: 30px;
  }

  .preview-highlight-card > small {
    margin-top: 8px;
  }

  .preview-itinerary-card ul {
    margin-top: 10px;
  }

  .preview-access-card {
    margin-top: 9px;
    padding-block: 10px;
  }

  .preview-boarding-ticket {
    min-height: 70px;
  }

  .preview-reward-replay {
    margin-top: 7px;
  }
}

.preview-boarding-ticket:hover {
  animation-play-state: paused;
}


/* =========================================================
   V7 — FINAL POPUP POLISH
========================================================= */

.preview-itinerary-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preview-itinerary-bonus {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 198, 46, .34);
  background: linear-gradient(180deg, rgba(255, 198, 46, .17), rgba(255, 198, 46, .08));
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 0 16px rgba(255, 198, 46, .08);
}

.preview-highlight-icon {
  color: #6bc8ff;
}

.preview-reward-replay {
  margin-top: 14px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(71, 230, 214, .28);
  background: rgba(71, 230, 214, .08);
  color: #dffcf7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(71, 230, 214, .08);
}

.preview-reward-replay:hover {
  color: #07131c;
  background: linear-gradient(180deg, #60eadb, #2fd8c9);
  border-color: rgba(96, 234, 219, .68);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(47, 216, 201, .22);
}

@media (min-width: 821px) and (min-height: 650px) {
  .preview-itinerary-bonus {
    padding: 5px 9px;
    font-size: 9px;
  }

  .preview-reward-replay {
    margin-top: 12px;
    min-height: 38px;
    font-size: 10px;
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  .preview-reward-replay {
    margin-top: 8px;
    min-height: 34px;
    font-size: 9px;
  }

  .preview-itinerary-bonus {
    padding: 4px 8px;
    font-size: 8px;
  }
}

/* =========================================================
   V8 — POPUP READABILITY
========================================================= */

.preview-memory-label {
  font-size: 15px;
  letter-spacing: .1em;
}

.preview-reward-kicker {
  font-size: 11px;
}

.preview-reward-header p {
  font-size: 14px;
}

.preview-memory-card h3 {
  font-size: 17px;
}

.preview-memory-card p {
  font-size: 12px;
  line-height: 1.42;
}

.preview-highlight-card > small {
  font-size: 9px;
}

.preview-itinerary-card li {
  font-size: 11px;
}

.preview-access-copy p {
  font-size: 11px;
}

.preview-ticket-main small,
.preview-ticket-main em,
.preview-ticket-stub small {
  font-size: 8px;
}

.preview-ticket-main strong {
  font-size: 16px;
}

.preview-itinerary-bonus {
  padding: 8px 13px;
  font-size: 13px;
  gap: 7px;
}

@media (min-width: 821px) and (min-height: 650px) {
  .preview-memory-label {
    font-size: 15px;
  }

  .preview-reward-kicker {
    font-size: 10px;
  }

  .preview-reward-header p {
    font-size: 14px;
  }

  .preview-memory-card h3 {
    font-size: 17px;
  }

  .preview-memory-card p {
    font-size: 11.5px;
  }

  .preview-highlight-card > small {
    font-size: 9px;
  }

  .preview-highlight-card h3 {
    font-size: 18px;
  }

  .preview-itinerary-card li {
    font-size: 11px;
  }

  .preview-access-copy h3 {
    font-size: 17px;
  }

  .preview-access-copy p {
    font-size: 11px;
  }

  .preview-ticket-main small,
  .preview-ticket-main em,
  .preview-ticket-stub small {
    font-size: 8px;
  }

  .preview-ticket-main strong {
    font-size: 16px;
  }

  .preview-itinerary-bonus {
    padding: 7px 12px;
    font-size: 13px;
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  .preview-memory-label {
    font-size: 13px;
  }

  .preview-reward-header p {
    font-size: 12px;
  }

  .preview-memory-card h3 {
    font-size: 15px;
  }

  .preview-memory-card p,
  .preview-access-copy p,
  .preview-itinerary-card li {
    font-size: 10px;
  }

  .preview-itinerary-bonus {
    padding: 6px 10px;
    font-size: 11px;
  }
}


/* =========================================================
   V9 — HERO DEVICES, PREVIEW AND FOOTER CLEANUP
========================================================= */

/* All device names share the same baseline. */
.device-stage {
  align-items: start;
}

.device {
  grid-template-rows: 168px auto;
  align-items: start;
  gap: 12px;
}

.device-visual {
  width: 100%;
  height: 168px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.desktop-device .device-visual {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.desktop-device .device-visual i {
  width: 80px;
  height: 7px;
  margin-top: -1px;
  background: #89a2af;
  border-radius: 0 0 9px 9px;
}

.vr-device {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.vr-visual {
  flex-direction: row;
  align-items: center;
}

.vr-device strong {
  grid-column: auto;
}

.device strong {
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  text-align: center;
}

/* The instruction box was removed from the preview markup. */
.video-instruction {
  display: none !important;
}

/* Minimal public footer: phrase only. */
.public-footer {
  min-height: 92px;
  padding: 24px clamp(22px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
}

.public-footer p {
  margin: 0;
  color: #81939f;
  font-size: 12px;
}


/* =========================================================
   V10 — QNG DEVICE ASSETS + FLIGHT PATH ALIGNMENT
========================================================= */

/* The airplane now sits directly on the dotted route. */
.flight-route {
  left: 210px;
  top: 128px;
  width: 330px;
  height: 90px;
  transform: rotate(8deg);
  transform-origin: left center;
}

.flight-plane {
  left: 511px;
  top: 161px;
  z-index: 2;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-18deg);
  transform-origin: center;
}

/* Device artwork saved by the project in public/images. */
.device-stage {
  grid-template-columns: 1.35fr .7fr 1fr;
  align-items: start;
  gap: 32px;
}

.device {
  grid-template-rows: 178px auto;
  align-items: start;
  gap: 12px;
}

.device-visual {
  width: 100%;
  height: 178px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.device-art {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .34));
}

.device-art-desktop {
  width: 255px;
}

.device-art-mobile {
  width: 96px;
}

.device-art-vr {
  width: 174px;
}

.desktop-device .device-visual,
.vr-visual {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.desktop-device .device-visual i,
.device-screen,
.vr-lens {
  display: none;
}

.vr-device {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.device strong {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 1080px) and (min-width: 721px) {
  .device-stage {
    gap: 18px;
  }

  .device-art-desktop {
    width: 220px;
  }

  .device-art-mobile {
    width: 84px;
  }

  .device-art-vr {
    width: 150px;
  }
}

/* =========================================================
   INDEX MOBILE UX — FOCUSED FIX
   1) Fullscreen video in phone landscape
   2) Preview rewards as a four-step carousel on small screens
========================================================= */

/* Desktop keeps the original three cards + full-width access card. */
.preview-reward-track {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.05fr .95fr 1fr;
  gap: 14px;
}

.preview-reward-track > .preview-access-card {
  grid-column: 1 / -1;
}

.preview-reward-dots {
  display: none;
}

/* The fullscreen element must own the whole viewport; its old 16:9 aspect
   ratio must not keep the video stuck to the top with empty space below. */
.journey-video-card:fullscreen,
.journey-video-card.is-fullscreen,
.journey-video-card:-webkit-full-screen {
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.journey-video-card:fullscreen .journey-main-video,
.journey-video-card.is-fullscreen .journey-main-video,
.journey-video-card:-webkit-full-screen .journey-main-video,
.journey-video-card:fullscreen .video-poster,
.journey-video-card.is-fullscreen .video-poster,
.journey-video-card:-webkit-full-screen .video-poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.journey-video-card:fullscreen .journey-main-video,
.journey-video-card.is-fullscreen .journey-main-video,
.journey-video-card:-webkit-full-screen .journey-main-video,
.journey-video-card:fullscreen .video-poster img,
.journey-video-card.is-fullscreen .video-poster img,
.journey-video-card:-webkit-full-screen .video-poster img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.journey-video-card:fullscreen .journey-video-controls,
.journey-video-card.is-fullscreen .journey-video-controls,
.journey-video-card:-webkit-full-screen .journey-video-controls {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 30 !important;
}

@media (max-width: 820px), (max-height: 620px) and (orientation: landscape) {
  .preview-reward-modal {
    padding: 8px;
  }

  .preview-reward-card {
    width: min(680px, 100%);
    height: auto;
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    padding: 18px 16px 13px;
    border-radius: 18px;
  }

  .preview-reward-close {
    width: 36px;
    height: 36px;
    top: 11px;
    right: 11px;
    font-size: 23px;
  }

  .preview-reward-header {
    max-width: none;
    padding-right: 42px;
  }

  .preview-reward-header h2 {
    margin-top: 7px;
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.02;
  }

  .preview-reward-header p {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.35;
  }

  .preview-reward-track {
    min-height: 315px;
    margin-top: 14px;
    display: block;
    position: relative;
    touch-action: pan-y;
  }

  .preview-reward-slide {
    display: none !important;
    width: 100%;
    min-height: 315px;
    margin: 0 !important;
    animation: previewRewardSlideIn 220ms ease;
  }

  .preview-reward-slide.active {
    display: flex !important;
  }

  .preview-access-card.active {
    display: grid !important;
  }

  @keyframes previewRewardSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .preview-memory-card {
    min-height: 315px;
    padding: 18px;
  }

  .preview-stamp {
    width: 130px;
    height: 130px;
    margin-top: 14px;
  }

  .preview-highlight-icon {
    width: 96px;
    height: 96px;
    margin-top: 22px;
    font-size: 46px;
  }

  .preview-itinerary-card h3 {
    margin-top: 18px;
  }

  .preview-itinerary-card ul {
    margin-top: 17px;
    gap: 9px;
  }

  .preview-itinerary-card li {
    min-height: 40px;
  }

  .preview-access-card {
    min-height: 315px;
    padding: 18px;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 18px;
  }

  .preview-access-copy h3 {
    font-size: 20px;
  }

  .preview-boarding-ticket {
    width: 100%;
    min-height: 96px;
    grid-template-columns: 1fr 78px;
  }

  .preview-boarding-ticket::after {
    right: 77px;
  }

  .preview-ticket-main {
    padding: 14px;
  }

  .preview-reward-dots {
    min-height: 24px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .preview-reward-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    background: #435967;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .18s ease, background .18s ease;
  }

  .preview-reward-dots button.active {
    width: 34px;
    background: var(--cyan);
  }

  .preview-reward-replay {
    margin-top: 6px;
    font-size: 11px;
  }
}

/* Phone landscape: everything must fit without vertical scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  .preview-reward-card {
    width: min(820px, calc(100vw - 14px));
    max-height: calc(100dvh - 10px);
    padding: 11px 15px 8px;
  }

  .preview-reward-close {
    width: 31px;
    height: 31px;
    top: 8px;
    right: 9px;
    font-size: 20px;
  }

  .preview-reward-header {
    padding-right: 38px;
  }

  .preview-reward-kicker {
    font-size: 8px;
  }

  .preview-reward-header h2 {
    margin-top: 3px;
    font-size: clamp(20px, 4.3vw, 28px);
    white-space: nowrap;
  }

  .preview-reward-header p {
    margin-top: 4px;
    font-size: 9px;
  }

  .preview-reward-track {
    min-height: 208px;
    margin-top: 8px;
  }

  .preview-reward-slide,
  .preview-memory-card,
  .preview-access-card {
    min-height: 208px;
  }

  .preview-memory-card {
    padding: 12px 16px;
  }

  .preview-memory-label {
    font-size: 10px;
  }

  .preview-stamp {
    width: 104px;
    height: 104px;
    margin-top: 6px;
  }

  .preview-stamp strong {
    margin: 5px 0;
    font-size: 12px;
  }

  .preview-memory-card h3 {
    margin-top: 8px;
    font-size: 15px;
  }

  .preview-memory-card p {
    margin-top: 4px;
    font-size: 9px;
  }

  .preview-highlight-icon {
    width: 75px;
    height: 75px;
    margin-top: 10px;
    font-size: 36px;
  }

  .preview-highlight-card > small {
    margin-top: 8px;
  }

  .preview-highlight-card h3 {
    margin-top: 5px;
    font-size: 18px;
  }

  .preview-itinerary-card h3 {
    margin-top: 10px;
  }

  .preview-itinerary-card ul {
    margin-top: 8px;
    gap: 5px;
  }

  .preview-itinerary-card li {
    min-height: 31px;
    font-size: 9px;
  }

  .preview-itinerary-card li span {
    width: 20px;
    height: 20px;
  }

  .preview-itinerary-bonus {
    padding: 4px 8px;
    font-size: 10px;
  }

  .preview-access-card {
    padding: 13px 16px;
    grid-template-columns: .75fr 1.25fr;
    gap: 15px;
  }

  .preview-access-copy h3 {
    margin-top: 5px;
    font-size: 17px;
  }

  .preview-access-copy p {
    margin-top: 4px;
    font-size: 9px;
  }

  .preview-boarding-ticket {
    min-height: 82px;
  }

  .preview-ticket-main strong {
    margin: 5px 0;
    font-size: 13px;
  }

  .preview-ticket-stub strong {
    font-size: 20px;
  }

  .preview-reward-dots {
    min-height: 18px;
    margin-top: 4px;
  }

  .preview-reward-replay {
    margin-top: 1px;
    font-size: 9px;
  }
}

/* =========================================================
   INDEX MOBILE — LANDSCAPE VIDEO + REWARD MODAL FINAL POLISH
========================================================= */

/* Phone landscape, outside native fullscreen: keep the preview video compact
   and force the rendered frame to fill the card instead of floating at top. */
@media (orientation: landscape) and (max-height: 500px) {
  .preview-shell {
    padding: 10px;
  }

  .preview-heading {
    min-height: 58px;
  }

  .preview-heading h2 {
    margin-top: 2px;
    font-size: clamp(23px, 4.2vw, 34px);
  }

  .preview-heading .eyebrow {
    font-size: clamp(13px, 2.2vw, 19px);
  }

  .journey-video-card:not(.is-fullscreen) {
    width: 100%;
    height: calc((100vw - 48px) * .5625);
    max-height: 58dvh;
    min-height: 0;
    aspect-ratio: auto;
  }

  .journey-video-card:not(.is-fullscreen) .journey-main-video,
  .journey-video-card:not(.is-fullscreen) .video-poster,
  .journey-video-card:not(.is-fullscreen) .video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .journey-video-card:not(.is-fullscreen) .journey-video-controls {
    height: 48px;
    padding: 6px 9px;
  }

  .journey-video-card:not(.is-fullscreen) .journey-control-button {
    width: 32px;
    height: 32px;
  }

  .journey-video-card:not(.is-fullscreen) .video-stage-action {
    min-width: 184px;
    min-height: 50px;
    padding-inline: 18px;
    font-size: 10px;
  }

  /* The dialog itself is one screen: header, one slide, dots and replay. */
  .preview-reward-modal {
    padding: 5px;
  }

  .preview-reward-card {
    width: min(920px, calc(100vw - 10px));
    height: calc(100dvh - 10px);
    max-height: calc(100dvh - 10px);
    overflow: hidden;
    padding: 9px 14px 7px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
  }

  .preview-reward-header {
    max-width: none;
    min-height: 0;
    padding-right: 38px;
  }

  .preview-reward-kicker {
    font-size: 7px;
  }

  .preview-reward-header h2 {
    margin-top: 2px;
    font-size: clamp(18px, 3.5vw, 27px);
    line-height: 1;
    white-space: nowrap;
  }

  .preview-reward-header p {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.25;
  }

  .preview-reward-carousel {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 18px;
  }

  .preview-reward-track {
    min-height: 0;
    height: 100%;
    margin-top: 5px;
  }

  .preview-reward-slide,
  .preview-memory-card,
  .preview-access-card {
    min-height: 0 !important;
    height: 100%;
    max-height: none;
  }

  .preview-memory-card {
    padding: 9px 14px;
  }

  .preview-stamp {
    width: 86px;
    height: 86px;
    margin-top: 3px;
  }

  .preview-memory-card h3 {
    margin-top: 5px;
    font-size: 13px;
  }

  .preview-memory-card p {
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.25;
  }

  .preview-highlight-icon {
    width: 62px;
    height: 62px;
    margin-top: 5px;
    font-size: 29px;
  }

  .preview-highlight-card > small {
    margin-top: 4px;
    font-size: 7px;
  }

  .preview-highlight-card h3 {
    margin-top: 2px;
    font-size: 15px;
  }

  .preview-itinerary-card h3 {
    margin-top: 4px;
    font-size: 14px;
  }

  .preview-itinerary-card ul {
    margin-top: 4px;
    gap: 3px;
  }

  .preview-itinerary-card li {
    min-height: 25px;
    font-size: 8px;
  }

  .preview-access-card {
    padding: 9px 13px;
    grid-template-columns: .72fr 1.28fr;
    align-items: center;
    gap: 12px;
  }

  .preview-access-copy h3 {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.08;
  }

  .preview-access-copy p {
    margin-top: 3px;
    font-size: 8px;
  }

  .preview-boarding-ticket {
    min-width: 0;
    min-height: 72px;
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .preview-boarding-ticket::after {
    right: 87px;
  }

  .preview-ticket-main {
    min-width: 0;
    padding: 9px 12px;
  }

  .preview-ticket-main small,
  .preview-ticket-main em {
    font-size: 6px;
  }

  .preview-ticket-main strong {
    margin: 3px 0;
    font-size: 12px;
  }

  .preview-ticket-stub {
    min-width: 88px;
    padding-inline: 8px;
    overflow: visible;
  }

  .preview-ticket-stub strong {
    font-size: 19px;
    line-height: 1;
  }

  .preview-reward-dots {
    min-height: 18px;
    margin-top: 0;
  }

  .preview-reward-replay {
    min-height: 25px;
    margin: 1px auto 0;
    padding: 0 15px;
    font-size: 8px;
  }
}

/* Portrait phones: give the ticket stub enough room for QNG and keep it away
   from the rounded edge. */
@media (orientation: portrait) and (max-width: 720px) {
  .preview-boarding-ticket {
    grid-template-columns: minmax(0, 1fr) 104px;
  }

  .preview-boarding-ticket::after {
    right: 103px;
  }

  .preview-ticket-main {
    min-width: 0;
  }

  .preview-ticket-stub {
    min-width: 104px;
    padding: 12px 13px 12px 9px;
    overflow: visible;
  }

  .preview-ticket-stub strong {
    font-size: clamp(23px, 7vw, 30px);
    line-height: 1;
    letter-spacing: -.03em;
  }

  .preview-ticket-stub b {
    transform: translateX(-2px);
  }
}

/* =========================================================
   INDEX MOBILE — LANDSCAPE MICRO POLISH V28
   - slightly taller preview video outside fullscreen
   - compact reward slide area
   - keep the souvenir stamp perfectly circular
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  /* A little more vertical room keeps more of the 16:9 frame visible. */
  .journey-video-card:not(.is-fullscreen) {
    height: min(calc((100vw - 48px) * .60), 64dvh) !important;
    max-height: 64dvh !important;
  }

  .journey-video-card:not(.is-fullscreen) .journey-main-video,
  .journey-video-card:not(.is-fullscreen) .video-poster,
  .journey-video-card:not(.is-fullscreen) .video-poster img {
    height: 100% !important;
    object-position: center center !important;
  }

  /* Do not stretch the modal just to fill the entire viewport. */
  .preview-reward-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 10px) !important;
    grid-template-rows: auto auto auto !important;
  }

  .preview-reward-carousel {
    min-height: 0 !important;
    grid-template-rows: 190px 18px !important;
  }

  .preview-reward-track {
    height: 190px !important;
    min-height: 190px !important;
  }

  .preview-reward-slide,
  .preview-memory-card,
  .preview-access-card {
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }

  .preview-memory-card {
    overflow: hidden;
  }

  /* Prevent flexbox from squeezing the circular stamp into an oval. */
  .preview-stamp {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    flex: 0 0 92px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 2px auto 0 !important;
    padding: 7px !important;
    box-sizing: border-box !important;
  }

  .preview-stamp span,
  .preview-stamp small {
    font-size: 6px !important;
    line-height: 1.05 !important;
  }

  .preview-stamp strong {
    margin: 4px 0 !important;
    font-size: 11px !important;
    line-height: .98 !important;
  }

  .preview-memory-card h3 {
    margin-top: 3px !important;
  }

  .preview-reward-dots {
    position: relative;
    z-index: 3;
    margin-top: 3px !important;
  }
}

/* =========================================================
   INDEX MOBILE — LANDSCAPE FINAL PROPORTION POLISH V29
   Focus only on:
   1) taller non-fullscreen preview video
   2) shorter reward modal and slide area
   3) stable, readable circular souvenir stamp
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  /* Give the scene more vertical room. The panel below may continue by scroll,
     which is preferable to cropping too much of the video frame. */
  .journey-video-card:not(.is-fullscreen) {
    height: min(calc((100vw - 48px) * .66), 72dvh) !important;
    max-height: 72dvh !important;
    min-height: 250px !important;
  }

  .journey-video-card:not(.is-fullscreen) .journey-main-video,
  .journey-video-card:not(.is-fullscreen) .video-poster,
  .journey-video-card:not(.is-fullscreen) .video-poster img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Keep the achievement popup visibly smaller than the viewport. */
  .preview-reward-modal {
    padding: 8px 12px !important;
    align-items: center !important;
  }

  .preview-reward-card {
    width: min(920px, calc(100vw - 24px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 88dvh !important;
    padding: 8px 14px 7px !important;
    grid-template-rows: auto auto auto !important;
    overflow: hidden !important;
  }

  .preview-reward-header h2 {
    font-size: clamp(18px, 3.25vw, 25px) !important;
  }

  .preview-reward-header p {
    margin-top: 2px !important;
  }

  .preview-reward-carousel {
    min-height: 0 !important;
    grid-template-rows: 166px 18px !important;
  }

  .preview-reward-track {
    height: 166px !important;
    min-height: 166px !important;
    margin-top: 5px !important;
  }

  .preview-reward-slide,
  .preview-memory-card,
  .preview-access-card {
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
  }

  .preview-memory-card {
    padding: 9px 14px 8px !important;
    overflow: hidden !important;
  }

  /* Remove the rotation on small landscape screens and constrain the long
     CONVERSATION word so it cannot escape the circular border. */
  .preview-stamp {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    flex: 0 0 96px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    padding: 8px 6px !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .preview-stamp span,
  .preview-stamp small {
    max-width: 76px !important;
    font-size: 5.8px !important;
    line-height: 1.05 !important;
    letter-spacing: .10em !important;
    white-space: nowrap !important;
  }

  .preview-stamp strong {
    width: 78px !important;
    max-width: 78px !important;
    margin: 4px 0 !important;
    font-size: 9px !important;
    line-height: 1.02 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .preview-memory-card h3 {
    margin-top: 3px !important;
    font-size: 13px !important;
  }

  .preview-memory-card p {
    margin-top: 1px !important;
    font-size: 8px !important;
  }

  .preview-reward-dots {
    min-height: 18px !important;
    margin-top: 2px !important;
  }

  .preview-reward-replay {
    min-height: 24px !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   INDEX — PHONE LANDSCAPE VIDEO HEIGHT V31
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .journey-video-card:not(.is-fullscreen):not(:fullscreen):not(:-webkit-full-screen) {
    width: 100% !important;
    height: clamp(320px, 88dvh, 450px) !important;
    min-height: 320px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .journey-video-card:not(.is-fullscreen):not(:fullscreen):not(:-webkit-full-screen) .journey-main-video,
  .journey-video-card:not(.is-fullscreen):not(:fullscreen):not(:-webkit-full-screen) .video-poster,
  .journey-video-card:not(.is-fullscreen):not(:fullscreen):not(:-webkit-full-screen) .video-poster img {
    width: 100% !important;
    height: 100% !important;
  }

  .journey-video-card:not(.is-fullscreen):not(:fullscreen):not(:-webkit-full-screen) .journey-main-video,
  .journey-video-card:not(.is-fullscreen):not(:fullscreen):not(:-webkit-full-screen) .video-poster img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  .journey-video-card:not(.is-fullscreen):not(:fullscreen):not(:-webkit-full-screen) .journey-video-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 30 !important;
  }
}

/* =========================================================
   INDEX REWARDS — TWO-PAGE LANDSCAPE CAROUSEL V33
   Page 1: Souvenir + Highlight + Itinerary
   Page 2: Access granted
========================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .preview-reward-track.reward-overview-page {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .preview-reward-track.reward-overview-page > [data-reward-slide="0"],
  .preview-reward-track.reward-overview-page > [data-reward-slide="1"],
  .preview-reward-track.reward-overview-page > [data-reward-slide="2"] {
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .preview-reward-track.reward-overview-page > [data-reward-slide="3"] {
    display: none !important;
  }

  .preview-reward-track.reward-access-page {
    display: block !important;
  }

  .preview-reward-track.reward-access-page > [data-reward-slide="0"],
  .preview-reward-track.reward-access-page > [data-reward-slide="1"],
  .preview-reward-track.reward-access-page > [data-reward-slide="2"] {
    display: none !important;
  }

  .preview-reward-track.reward-access-page > [data-reward-slide="3"] {
    display: grid !important;
    width: 100% !important;
  }

  .preview-reward-track.reward-overview-page .preview-memory-card {
    padding: 8px 11px 7px !important;
  }

  .preview-reward-track.reward-overview-page .preview-memory-label {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .preview-reward-track.reward-overview-page .preview-stamp {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    flex-basis: 76px !important;
    padding: 6px 4px !important;
  }

  .preview-reward-track.reward-overview-page .preview-stamp span,
  .preview-reward-track.reward-overview-page .preview-stamp small {
    max-width: 62px !important;
    font-size: 4.7px !important;
  }

  .preview-reward-track.reward-overview-page .preview-stamp strong {
    width: 64px !important;
    max-width: 64px !important;
    margin: 3px 0 !important;
    font-size: 7.3px !important;
  }

  .preview-reward-track.reward-overview-page .preview-highlight-icon {
    width: 58px !important;
    height: 58px !important;
    margin-top: 5px !important;
    font-size: 27px !important;
  }

  .preview-reward-track.reward-overview-page .preview-highlight-card > small {
    margin-top: 4px !important;
    font-size: 6px !important;
  }

  .preview-reward-track.reward-overview-page .preview-memory-card h3 {
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
  }

  .preview-reward-track.reward-overview-page .preview-memory-card p {
    margin-top: 2px !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
  }

  .preview-reward-track.reward-overview-page .preview-itinerary-topline {
    gap: 5px !important;
  }

  .preview-reward-track.reward-overview-page .preview-itinerary-bonus {
    padding: 3px 6px !important;
    font-size: 8px !important;
  }

  .preview-reward-track.reward-overview-page .preview-itinerary-card h3 {
    margin-top: 8px !important;
  }

  .preview-reward-track.reward-overview-page .preview-itinerary-card ul {
    margin-top: 7px !important;
    gap: 4px !important;
  }

  .preview-reward-track.reward-overview-page .preview-itinerary-card li {
    min-height: 27px !important;
    padding: 0 7px !important;
    gap: 6px !important;
    font-size: 7.5px !important;
  }

  .preview-reward-track.reward-overview-page .preview-itinerary-card li span {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    font-size: 9px !important;
  }

  .preview-reward-dots [data-reward-dot="2"],
  .preview-reward-dots [data-reward-dot="3"] {
    display: none !important;
  }
}