/* xPloris go-to companion, v3. Cinematic photography, near-black surfaces, aurora glow, glass pills, two-tone type.
   Patterns studied on Dribbble: glass pill nav, search-style planner widget, tall photo cards with glass badges, dark device UI, ultra-light oversized type. */
@font-face { font-family: "Mona Sans"; src: url("../assets/fonts/mona-sans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
:root { --bg: #070C10; --bg2: #0D151B; --line: rgba(255,255,255,.12); --mut: rgba(255,255,255,.64); --ink: #0F2433; --soft: #4B6272; --hair: rgba(15,36,51,.11); --hair2: rgba(15,36,51,.2); --blue: #116B98; --aqua: #7FD6F5; --tan: #F08047; --cta: #F08047; --cta-ink: #1b0f08; --cta-glow: rgba(240,128,71,.9); --r1: 8px; --r2: 12px; --r3: 20px; --gutter: clamp(1.1rem, 4vw, 3.5rem); --sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --out: cubic-bezier(.23, 1, .32, 1); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.g3 { margin: 0; background: var(--bg); color: #fff; font: 450 1.0625rem/1.5 var(--sans); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; } ul, ol { list-style: none; }
a { color: inherit; } button, select, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 60; padding: .8rem 1.2rem; background: #fff; color: var(--ink); font-weight: 700; border-radius: .75rem; } .skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--out), transform .9s var(--out); }
.js .rv.is-in { opacity: 1; transform: none; }

.glass { background: rgba(255,255,255,.1); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 24px 48px -24px rgba(0,0,0,.6); color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; font-weight: 650; font-size: 1rem; letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform .16s var(--out), background .2s; }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-tan { background: var(--cta); color: var(--cta-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 28px -14px var(--cta-glow); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(127,214,245,.2); }
h2 { font-size: clamp(2.3rem, 5vw, 4.6rem); font-weight: 640; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
h2 span { color: var(--mut); font-weight: 520; }
.lab { display: block; font: 600 .68rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.rnd { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
@media (hover: hover) { .rnd:hover { background: rgba(255,255,255,.2); } } .rnd[disabled] { opacity: .35; cursor: default; }
.rnd svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ================= nav ================= */
.nav { position: absolute; z-index: 8; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 22px var(--gutter); }
.nav-logo img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.nav-links { display: none; gap: 2px; padding: 5px; border-radius: 999px; }
.nav-links a { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 560; font-size: .95rem; text-decoration: none; color: rgba(255,255,255,.92); transition: background .2s; }
@media (hover: hover) { .nav-links a:hover { background: rgba(255,255,255,.16); } }
.nav .btn { height: 44px; padding: 0 20px; font-size: .94rem; }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* ================= hero ================= */
.h { position: relative; height: 100svh; min-height: 700px; overflow: hidden; isolation: isolate; color: #fff; }
.h-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.h-scene.is-on { opacity: 1; z-index: 1; }
.h-scene img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.h-scene.is-on img { animation: push 30s ease-out forwards; }
@keyframes push { from { transform: scale(1.03); } to { transform: scale(1.13); } }
.h-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(5,12,18,.62) 0, rgba(5,12,18,.2) 50%, rgba(5,12,18,0) 72%), linear-gradient(180deg, rgba(5,12,18,.55) 0, rgba(5,12,18,0) 26%), linear-gradient(0deg, rgba(5,12,18,.72) 0, rgba(5,12,18,0) 52%); }
.h-copy { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(70px, 10.5vh, 112px); max-width: 78rem; }
.tag { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px; font: 600 .74rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: clamp(14px, 2.4vh, 24px); }
.tag i, .ai-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 4px rgba(127,214,245,.25); }
.h-copy h1 { display: grid; font-size: min(8.4vw, 15.5vh); line-height: .92; letter-spacing: -.055em; }
.hl { grid-area: 1 / 1; display: grid; opacity: 0; transform: translateY(.14em); filter: blur(10px); transition: opacity .7s var(--out), transform .9s var(--out), filter .7s var(--out); pointer-events: none; }
.hl.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.h-copy .thin { font-weight: 260; }
.h-copy h1 { text-shadow: 0 4px 60px rgba(3,10,16,.5); }
.h-copy .bold { font-weight: 700; }
.h-sub { margin-top: clamp(14px, 2.4vh, 24px); max-width: 33rem; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.92); }
.planner { margin-top: clamp(16px, 2.8vh, 28px); display: flex; align-items: stretch; gap: 4px; padding: 6px; border-radius: 999px; width: fit-content; max-width: 100%; }
.pf { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 10px; border-radius: 999px; cursor: pointer; transition: background .2s; }
@media (hover: hover) { .pf:hover { background: rgba(255,255,255,.12); } }
.pf + .pf::before { content: ""; position: absolute; left: -2px; top: 14px; bottom: 14px; width: 1px; background: rgba(255,255,255,.22); }
.pf-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.pf-ic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-t { display: grid; }
.pf-t small { font-size: .7rem; color: rgba(255,255,255,.72); font-weight: 560; letter-spacing: .02em; }
.pf select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0 18px 0 0; font-weight: 600; font-size: 1rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 9px; }
.pf select option { color: #0F2433; }
.pf:focus-within { outline: 2px solid var(--aqua); outline-offset: 2px; }
.pf select:focus-visible { outline: none; }
.plan-go { height: 56px; margin-left: 6px; }
.h-note { margin-top: 12px; min-height: 1.4em; font-weight: 560; font-size: .94rem; text-shadow: 0 1px 14px rgba(5,12,18,.8); }
.h-note:empty { min-height: 0; margin: 0; }
.ai-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 14px 8px 12px; border-radius: 10px; font-weight: 500; font-size: .88rem; line-height: 1.25; }
.h-float { position: absolute; z-index: 4; right: var(--gutter); top: 20vh; width: 300px; display: none; gap: 12px; }
.fc { border-radius: 20px; padding: 16px; animation: bob 7s ease-in-out infinite; }
.fc-chat { margin-left: 40px; animation-delay: -3s; display: grid; gap: 6px; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.fc-plan > *, .fc-chat > * { transition: opacity .26s, transform .3s var(--out); }
.fc.is-swap > * { opacity: 0; transform: translateY(8px); }
.td { display: flex; gap: 4px; padding: 5px 0 3px; } .td i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); animation: tdot 1s infinite; } .td i:nth-child(2) { animation-delay: .15s; } .td i:nth-child(3) { animation-delay: .3s; }
.fc-chat .bot b { display: block; }
.fc-plan b #fcTitle { font-size: 1rem; color: #fff; font-weight: 650; }
.fc-plan b { display: flex; justify-content: space-between; font-weight: 650; margin-bottom: 8px; } .fc-plan b span { font-size: .76rem; font-weight: 500; color: var(--mut); }
.fc-plan li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: .86rem; font-weight: 540; }
.fc-plan time { color: var(--mut); font-variant-numeric: tabular-nums; }
.fc-plan s { color: var(--mut); } .fc-plan em { font-style: normal; font-size: .66rem; font-weight: 650; padding: 3px 7px; border-radius: 6px; background: rgba(127,214,245,.2); color: var(--aqua); }
.fc-chat p { font-size: .84rem; line-height: 1.35; padding: 9px 12px; border-radius: 14px; font-weight: 520; max-width: 92%; }
.fc-chat .me { justify-self: end; background: rgba(255,255,255,.9); color: var(--ink); border-bottom-right-radius: 4px; }
.fc-chat .bot { background: rgba(255,255,255,.14); border-bottom-left-radius: 4px; }
.h-badge { position: absolute; z-index: 4; right: calc(var(--gutter) + 6px); bottom: clamp(130px, 19vh, 190px); width: 112px; height: 112px; display: none; }
.h-badge text { font: 650 10.4px var(--sans); letter-spacing: .2em; fill: #fff; }
.h-badge-r { transform-origin: 60px 60px; animation: spin 22s linear infinite; }
.h-badge-s { fill: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.h-rail { position: absolute; z-index: 6; right: var(--gutter); bottom: clamp(24px, 4.4vh, 44px); display: flex; align-items: center; gap: 8px; }
.h-thumb { position: relative; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: pointer; opacity: .62; transition: opacity .25s, transform .25s var(--out); box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.h-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .h-thumb:hover { opacity: 1; } }
.h-thumb.is-on { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 2px #fff; }
.h-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.h-thumb.is-on::after { animation: fill var(--dur, 7.5s) linear forwards; }
.h.is-paused .h-thumb.is-on::after { animation-play-state: paused; }
.h.is-still .h-thumb.is-on::after { animation: none; transform: none; }
.h-pause { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; }
.h-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.h-ring circle { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; }
.h-pause.go .h-ring circle { animation: ring var(--dur, 7.5s) linear forwards; }
.h.is-paused .h-pause.go .h-ring circle { animation-play-state: paused; }
.h.is-still .h-ring { display: none; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.h-pause svg { width: 16px; height: 16px; fill: #fff; } .h-pause .i-play { display: none; }
.h.is-paused .h-pause .i-play, .h.is-still .h-pause .i-play { display: block; } .h.is-paused .h-pause .i-pause, .h.is-still .h-pause .i-pause { display: none; }
@media (min-width: 1280px) { .h-float { display: grid; } .h-badge { display: block; } }
@media (max-width: 900px) {
  .planner { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; width: 100%; gap: 0; padding: 8px; }
  .pf { padding: 8px 6px; min-width: 0; } .pf + .pf::before { display: none; }
  .pf:nth-of-type(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.18); border-radius: 0 0 16px 16px; }
  .pf-ic { width: 32px; height: 32px; }
  .pf select { width: 100%; font-size: .95rem; } .pf-t { flex: 1; min-width: 0; }
  .plan-go { grid-column: 1 / -1; margin: 6px 0 0; width: 100%; }
  .h { min-height: 880px; }
  .h-rail { left: auto; right: var(--gutter); }
  .h-copy h1 { font-size: min(12vw, 9vh); }
  .h-sub { font-size: 1rem; } .ai-note { font-size: .8rem; }
  .h-copy { bottom: 96px; }
}

/* ================= story ================= */
.gs { background: var(--bg); position: relative; overflow-x: clip; }
.gs-track { position: relative; }
.gs-sticky { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 1280px; margin: 0 auto; padding: clamp(40px, 8vw, 100px) var(--gutter) clamp(60px, 9vw, 110px); isolation: isolate; }
.gs.is-pinned .gs-track { height: 440vh; }
.gs.is-pinned .gs-sticky { position: sticky; top: 0; height: 100svh; min-height: 700px; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-top: 0; padding-bottom: 0; }
.gs-aurora { position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none; overflow: hidden; }
.gs-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.gs-aurora i:nth-child(1) { width: 46vw; height: 34vw; right: 4%; top: 12%; background: radial-gradient(closest-side, rgba(19,159,193,.9), transparent); }
.gs-aurora i:nth-child(2) { width: 38vw; height: 30vw; right: 22%; bottom: 4%; background: radial-gradient(closest-side, rgba(52,92,214,.75), transparent); animation-delay: -6s; }
.gs-aurora i:nth-child(3) { width: 30vw; height: 22vw; right: -4%; bottom: 14%; background: radial-gradient(closest-side, rgba(90,214,170,.55), transparent); animation-delay: -11s; }
@keyframes drift { to { transform: translate(-6vw, -3vw) scale(1.12); } }
.gs h2 { font-size: clamp(2.1rem, 3.8vw, 3.5rem); }
.gs-text .eyebrow { margin-bottom: 16px; }
.gs-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; margin-top: clamp(22px, 3.4vw, 34px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.gs-tab { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: rgba(255,255,255,.78); font-weight: 600; font-size: .94rem; cursor: pointer; transition: background .25s, color .25s; }
.gs-tab[aria-selected="true"] { background: #fff; color: var(--ink); }
.gs-chaps { display: grid; margin-top: clamp(24px, 3.6vw, 40px); }
.gs-chap { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .55s var(--out), visibility 0s .35s; align-self: start; }
.gs-chap.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: .12s, .12s, 0s; }
.gs-chap h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); font-weight: 640; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.gs-chap > p { margin-top: 12px; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.5; color: var(--mut); max-width: 30rem; }
.gs-points { margin-top: 20px; display: grid; gap: 10px; }
.gs-points li { display: flex; align-items: center; gap: 12px; font-weight: 560; font-size: .98rem; }
.gs-points li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(127,214,245,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 2.9L14.5 7' fill='none' stroke='%237FD6F5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.gs-hint { display: none; align-items: center; gap: 10px; margin-top: clamp(20px, 3vh, 32px); font-weight: 560; font-size: .86rem; color: var(--mut); transition: opacity .4s; }
.gs-hint i { width: 16px; height: 26px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px var(--mut); position: relative; }
.gs-hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 5px; margin-left: -1.5px; border-radius: 2px; background: var(--mut); animation: wheel 1.6s var(--out) infinite; }
@keyframes wheel { from { transform: translateY(0); opacity: 1; } to { transform: translateY(8px); opacity: 0; } }
.gs.is-pinned .gs-hint { display: flex; } .gs[data-stage="3"] .gs-hint { opacity: 0; }
.gs-stage { --ph: 780px; display: flex; justify-content: center; align-items: flex-start; height: calc(var(--ph) * var(--s, 1) + 44px); }
.phone { flex: none; position: relative; width: 372px; height: var(--ph); padding: 11px; border-radius: 58px; background: linear-gradient(160deg, #1b2832, #0A1118 45%); transform: scale(var(--s, 1)); transform-origin: center top; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), 0 0 0 1.5px #0d151b, 0 70px 120px -30px rgba(19,159,193,.5), 0 50px 90px -30px rgba(0,0,0,.9); }
.phone::before, .phone::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #1b2630; }
.phone::before { left: -5px; top: 150px; height: 38px; box-shadow: 0 58px 0 #1b2630; }
.phone::after { right: -5px; top: 210px; height: 72px; }
.phone-island { position: absolute; z-index: 5; top: 23px; left: 50%; width: 96px; height: 27px; margin-left: -48px; border-radius: 14px; background: #05090D; }
.phone-in { position: relative; height: 100%; border-radius: 47px; background: #fff; color: var(--ink); overflow: hidden; display: flex; flex-direction: column; }
.app-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 46px 18px 10px; border-bottom: 1px solid var(--hair); }
.app-bar img { width: 22px; height: auto; } .app-bar b { font-weight: 650; letter-spacing: -.02em; }
.app-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 .62rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.app-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E0A800; }
.app-body { position: relative; flex: 1; min-height: 0; }
.scr { position: absolute; inset: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .5s var(--out), visibility 0s .35s; overflow: hidden; }
.scr.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: .12s, .12s, 0s; }
.sc-go { height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--cta); color: var(--cta-ink); font: 650 .95rem var(--sans); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); transition: transform .16s var(--out); }
.sc-go:active { transform: scale(.97); }
.mascot { display: block; position: relative; --mh: 160px; }
.mascot img { height: var(--mh); width: auto; max-width: none; display: block; filter: drop-shadow(0 10px 12px rgba(8,28,42,.38)); }

/* ---------- the app inside the phone: dark, photo-led, glass ---------- */
.phone-in { background: radial-gradient(120% 55% at 50% 0%, #12303B 0%, #0A1218 62%); color: #fff; }
.phone-tag { position: absolute; left: 0; right: 0; bottom: -36px; text-align: center; font: 600 .64rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.ap-status { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 19px 30px 0; font: 650 .8rem var(--sans); pointer-events: none; }
.ap-status svg { height: 11px; width: auto; fill: #fff; }
.ap-body { position: absolute; inset: 0; }
.phone-in::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 118px; pointer-events: none; background: linear-gradient(0deg, #0A1218 38%, rgba(10,18,24,0)); }
.ap-tabs { z-index: 5; }
.scr { padding: 58px 16px 94px; gap: 12px; }
.ap-tabs { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 14px; height: 62px; padding: 0 10px; border-radius: 999px; display: flex; align-items: center; justify-content: space-around; background: rgba(20,34,43,.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 30px -14px rgba(0,0,0,.7); }
.ap-tabs span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; transition: background .3s, transform .3s var(--out); }
.ap-tabs svg { width: 21px; height: 21px; fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.ap-tabs span.is-on { background: #fff; transform: scale(1.04); } .ap-tabs span.is-on svg { stroke: var(--ink); }

.ap-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ap-h small, .ap-chat-h small { display: block; font: 600 .64rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 6px; }
.ap-h h4 { margin: 0; font-size: 1.28rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.08; }
.ap-stack { display: flex; flex: none; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 650; font-size: .72rem; color: #fff; box-shadow: 0 0 0 2px #0B1419; }
.ap-stack .av + .av { margin-left: -5px; }
.a1 { background: #1A86B8; } .a2 { background: #1F8F7F; } .a3 { background: #6A7FD0; } .a4 { background: #C0608B; }

.ap-prompt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-weight: 520; font-size: .9rem; line-height: 1.38; min-height: 66px; }
.ap-prompt svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: var(--aqua); }
.ap-prompt p { margin: 0; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--aqua); margin-left: 2px; vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.seg { display: flex; width: 100%; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.seg label { flex: 1; cursor: pointer; } .seg input { position: absolute; opacity: 0; }
.seg span { display: flex; justify-content: center; align-items: center; height: 36px; border-radius: 11px; font-weight: 600; font-size: .86rem; color: rgba(255,255,255,.72); transition: background .25s, color .25s; }
.seg input:checked + span { background: #fff; color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--aqua); outline-offset: 2px; }
.ap-dayhead { display: flex; align-items: baseline; justify-content: space-between; padding-top: 2px; }
.ap-dayhead b { font-size: 1rem; font-weight: 650; } .ap-dayhead span { font-size: .76rem; color: var(--mut); font-weight: 500; }
.ap-tl { position: relative; display: grid; gap: 10px; align-content: start; }
.ap-tl li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 8px; align-items: center; animation: rise .5s var(--out) both; animation-delay: calc(var(--i, 0) * 70ms); }
.ap-tl time { font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--mut); font-weight: 600; }
.ap-it { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.ap-it img { flex: none; width: 46px; height: 46px; border-radius: 13px; object-fit: cover; }
.ap-it div { min-width: 0; flex: 1; }
.ap-it i { display: block; font-style: normal; font-weight: 620; font-size: .86rem; line-height: 1.2; letter-spacing: -.01em; }
.ap-it small { display: block; font-size: .7rem; color: var(--mut); margin-top: 1px; }
.dots { display: flex; flex: none; } .dots em { width: 20px; height: 20px; border-radius: 50%; margin-left: -6px; font-style: normal; font-size: .56rem; font-weight: 650; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #121D24; }

/* flights and stays */
.ap-bk { display: grid; gap: 10px; }
.ap-stay { position: relative; min-height: 190px; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; isolation: isolate; }
.ap-stay img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ap-stay::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,14,20,.9), rgba(6,14,20,.05) 62%); }
.ap-badge { position: absolute; top: 10px; left: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); font: 600 .68rem/1 var(--sans); }
.ap-stay-b { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ap-stay-b b, .ap-fl b { display: block; font-weight: 650; letter-spacing: -.015em; }
.ap-stay-b span, .ap-fl span { display: block; font-size: .74rem; line-height: 1.3; color: rgba(255,255,255,.78); margin-top: 2px; }
.ap-fl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.ap-fl i { width: 38px; height: 38px; border-radius: 50%; background: rgba(127,214,245,.14); display: grid; place-items: center; }
.ap-fl svg { width: 19px; height: 19px; fill: none; stroke: var(--aqua); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bk-add { flex: none; height: 34px; min-width: 60px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 650 .82rem var(--sans); cursor: pointer; transition: transform .16s var(--out), background .2s; }
.bk-add:active { transform: scale(.95); }
.bk-add[aria-pressed="true"] { background: rgba(127,214,245,.2); color: var(--aqua); box-shadow: inset 0 0 0 1px rgba(127,214,245,.5); }
.bk-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.bk-days i { display: grid; place-items: center; height: 30px; border-radius: 9px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font: 600 .72rem var(--sans); font-style: normal; color: rgba(255,255,255,.7); transition: background .3s, color .3s; }
.bk-stay { grid-column: 1 / -1; display: grid; place-items: center; height: 24px; border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font: 600 .66rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: background .3s, color .3s; }
.bk-trip[data-out="1"] i[data-d="out"], .bk-trip[data-home="1"] i[data-d="home"], .bk-trip[data-stay="1"] .bk-stay { background: var(--aqua); color: #06202B; box-shadow: none; }
.ap-note { margin: 0; font-size: .8rem; font-weight: 520; color: rgba(255,255,255,.78); }

/* chat */
.ap-chat-h { display: flex; align-items: center; gap: 10px; }
.ap-chat-h .mascot { --mh: 58px; flex: none; }
.ap-chat-h b { display: block; font-weight: 650; letter-spacing: -.02em; font-size: 1.05rem; }
.ap-chat-h small { margin: 2px 0 0; letter-spacing: .02em; text-transform: none; font-size: .78rem; color: var(--mut); font-weight: 500; }
.ct-feed > * { flex: none; }
.ct-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 18px; font-weight: 500; font-size: .9rem; line-height: 1.38; animation: rise .45s var(--out) both; }
.msg.me { align-self: flex-end; background: #fff; color: var(--ink); border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-bottom-left-radius: 6px; }
.msg.typing { display: flex; gap: 5px; padding: 14px 16px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); animation: tdot 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.mini { align-self: flex-start; width: 90%; border-radius: 18px; padding: 11px 14px; background: rgba(127,214,245,.1); box-shadow: inset 0 0 0 1px rgba(127,214,245,.3); animation: rise .45s var(--out) both; }
.mini b { display: block; font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 4px; }
.mini li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-weight: 560; font-size: .86rem; }
.mini li s { color: var(--mut); }
.mini li em { flex: none; font-style: normal; font-size: .66rem; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: rgba(127,214,245,.2); color: var(--aqua); }
.ct-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; flex-wrap: nowrap; }
.ct-quick::-webkit-scrollbar { display: none; }
.qk { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font: 560 .82rem var(--sans); color: #fff; cursor: pointer; transition: background .2s; }
@media (hover: hover) { .qk:hover { background: rgba(255,255,255,.16); } } .qk[disabled] { opacity: .45; cursor: default; }
.ct-in { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 16px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ct-in input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: 500 .9rem var(--sans); color: #fff; }
.ct-in input::placeholder { color: rgba(255,255,255,.6); } .ct-in input:focus-visible { outline: none; } .ct-in:focus-within { box-shadow: inset 0 0 0 2px var(--aqua); }
.send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--cta); display: grid; place-items: center; cursor: pointer; transition: transform .16s var(--out); }
.send:active { transform: scale(.92); } .send svg { width: 18px; height: 18px; fill: none; stroke: var(--cta-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* after */
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-tile { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1.04; background: #12303B; }
.af-tile img { width: 100%; height: 100%; object-fit: cover; }
.af-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,14,20,.78), rgba(6,14,20,0) 55%); pointer-events: none; }
.af-cap { position: absolute; z-index: 2; left: 12px; bottom: 10px; color: #fff; font-weight: 620; font-size: .84rem; letter-spacing: -.01em; }
.af-heart { position: absolute; z-index: 3; right: 3px; top: 3px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; }
.af-heart svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgba(6,14,20,.45); backdrop-filter: blur(10px); fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; transition: transform .16s var(--out), background .2s; }
.af-heart:active svg { transform: scale(.9); } .af-heart[aria-pressed="true"] svg { fill: #06202B; stroke: #06202B; background: var(--aqua); }
.af-learn { margin-top: auto; border-radius: 18px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); padding: 12px 14px; display: grid; gap: 8px; }
.af-learn .lab { color: var(--aqua); }
.af-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.af-chips li { padding: 4px 10px; border-radius: 999px; background: rgba(127,214,245,.18); color: var(--aqua); font-weight: 620; font-size: .78rem; animation: rise .4s var(--out) both; }
.af-chips:empty { display: none; }
.af-learn p { margin: 0; font-weight: 520; font-size: .84rem; line-height: 1.38; color: rgba(255,255,255,.86); }
@media (max-height: 760px) { .ap-it img { width: 36px; height: 36px; } .ap-stay { min-height: 130px; } .ap-prompt { min-height: 58px; } }


/* ================= close ================= */
.cl { position: relative; isolation: isolate; min-height: min(100svh, 860px); display: grid; align-items: end; overflow: hidden; }
.cl > figure { position: absolute; inset: 0; z-index: -1; } .cl > figure img { width: 100%; height: 100%; object-fit: cover; }
.cl > figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,12,18,.85), rgba(5,12,18,.15) 70%); }
.cl-in { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding: clamp(80px, 12vw, 160px) var(--gutter) clamp(40px, 6vw, 72px); }
.cl-in h2 { display: grid; font-size: clamp(3rem, 9vw, 9rem); line-height: .93; letter-spacing: -.055em; }
.cl-in h2 span, .cl-in .thin, .cl-in .bold { color: #fff; } .cl-in .thin { font-weight: 200; } .cl-in .bold { font-weight: 700; }
.cl-sub { margin-top: clamp(14px, 2vw, 22px); max-width: 30rem; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.9); text-shadow: 0 1px 16px rgba(3,10,16,.6); }
.cl-form { margin-top: clamp(18px, 2.6vw, 28px); display: flex; gap: 6px; padding: 6px; border-radius: 999px; width: min(100%, 680px); }
.cl-form input { flex: 1; min-width: 0; height: 56px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; font-weight: 520; font-size: 1.05rem; }
.cl-form input::placeholder { color: rgba(255,255,255,.72); }
.cl-form input:focus-visible { outline: none; } .cl-form:focus-within { box-shadow: inset 0 0 0 2px var(--aqua); }
.cl-form .btn { height: 56px; }
.cl-note { margin-top: 12px; min-height: 1.4em; font-weight: 560; } .cl-note:empty { min-height: 0; margin: 0; }
.cl-guide { display: none; position: absolute; right: var(--gutter); bottom: clamp(40px, 6vw, 72px); flex-direction: column; align-items: flex-end; gap: 10px; }
.cl-bub { position: relative; padding: 10px 16px; border-radius: 14px; font-weight: 600; }
.cl-bub b, .fc-chat b { display: block; font: 650 .64rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 4px; }
.cl-bub::after { content: ""; position: absolute; right: 38px; bottom: -6px; width: 12px; height: 12px; background: rgba(255,255,255,.18); transform: rotate(45deg); border-radius: 2px; }
.cl-guide .mascot { --mh: 112px; }
@media (min-width: 900px) { .cl-guide { display: flex; } }
@media (max-width: 700px) { .cl-form { flex-direction: column; border-radius: 24px; } .cl-form input { height: 52px; } .cl-form .btn { width: 100%; } }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 26px var(--gutter) 34px; background: var(--bg); color: var(--mut); font-size: .92rem; box-shadow: inset 0 1px 0 var(--line); }
.foot nav { display: flex; gap: 20px; } .foot a { color: #fff; font-weight: 560; }

/* ================= hero polish: grain, depth, scroll fade ================= */
.h-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.h-scene { translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -9px); }
.fc { translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 10px); background: rgba(8,18,26,.5); }
.h-badge { translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -8px); }
.h-float { gap: 14px; }
.h-copy { opacity: calc(1 - var(--hp, 0) * 1.25); translate: 0 calc(var(--hp, 0) * -48px); }
.h::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--bg); opacity: calc(var(--hp, 0) * .9); }
.h-cap { position: absolute; right: 0; bottom: calc(100% + 14px); font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(3,10,16,.7); white-space: nowrap; }
.btn-tan { position: relative; overflow: hidden; }
.btn-tan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--out); pointer-events: none; }
@media (hover: hover) { .btn-tan:hover::after { transform: translateX(120%); } }
@media (max-width: 900px) { .h-cap { display: none; } }


/* hero label: plain text with a short rule, no box */
.h-copy .tag { height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 14px; color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(3,10,16,.7); letter-spacing: .16em; }
.h-copy .tag i { width: 34px; height: 1.5px; border-radius: 2px; background: #fff; box-shadow: none; }

/* hero caption: a quiet editorial note, bottom right */
.h-place { position: absolute; z-index: 6; right: var(--gutter); bottom: clamp(32px, 6vh, 60px); width: min(300px, calc(100vw - 2 * var(--gutter))); padding-left: 22px; border-left: 1px solid rgba(255,255,255,.4); color: #fff; text-shadow: 0 1px 18px rgba(3,10,16,.8); transition: opacity .3s, transform .4s var(--out); }
.h-place.is-swap { opacity: 0; transform: translateY(8px); }
.hp-p { margin-bottom: 8px; font: 650 .78rem/1.25 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.hp-f { font: 300 1.04rem/1.5 var(--sans); letter-spacing: -.005em; color: rgba(255,255,255,.94); }
@media (max-width: 900px) {
  .h-place { width: auto; padding-left: 14px; bottom: auto; top: calc(84px + env(safe-area-inset-top)); }
  .hp-f { display: none; }
  .hp-p { margin: 0; font-size: .68rem; }
}


.fc-tag { margin: 2px 0 0 40px; font: 600 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); text-shadow: 0 1px 12px rgba(3,10,16,.8); }
@media (max-width: 900px) { .h-copy h1 { font-size: min(10vw, 9vh); } }

/* hero scroll cue: quiet, centred, light */
.h-cue { position: absolute; z-index: 6; left: 50%; bottom: clamp(10px, 2vh, 20px); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 8px 16px; color: rgba(255,255,255,.92); text-decoration: none; font: 300 .98rem/1.2 var(--sans); letter-spacing: .01em; text-shadow: 0 1px 16px rgba(3,10,16,.8); opacity: calc(1 - var(--hp, 0) * 3); transition: color .25s; }
.h-cue svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; animation: cue 2.6s ease-in-out infinite; }
@media (hover: hover) { .h-cue:hover { color: #fff; } } @media (hover: hover) { .h-cue:hover svg { animation-play-state: paused; transform: translateY(3px); } }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
@media (max-width: 900px) { .h-cue { display: none; } }
@media (prefers-reduced-motion: reduce) { .h-cue svg { animation: none; } }

/* ---- planner: slimmer, quieter, editorial ---- */
.pf-t { gap: 6px; }
.pf-t small { font: 600 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.64); }
.pf select { font-weight: 400; font-size: 1.08rem; letter-spacing: -.012em; padding: 0 22px 0 0; background-size: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"); }
.plan-go { height: 56px; padding: 0 8px 0 26px; gap: 16px; margin-left: 8px; }
.plan-go .go-ar { width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.14); display: grid; place-items: center; transition: transform .35s var(--out); }
.plan-go .go-ar svg { width: 16px; height: 16px; }
@media (hover: hover) { .plan-go:hover .go-ar { transform: translateX(3px); } }
@media (min-width: 901px) {
  .planner { gap: 0; padding: 6px; background: rgba(8,18,26,.42); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 30px 50px -28px rgba(0,0,0,.7); }
  .pf { padding: 0 30px 0 30px; }
  .pf + .pf::before { left: 0; top: 50%; bottom: auto; height: 30px; transform: translateY(-50%); background: rgba(255,255,255,.2); }
}
@media (max-width: 900px) { .pf { padding: 10px 14px; } .plan-go { padding: 0 8px 0 22px; justify-content: space-between; } }

/* ---- planner as a sentence: type-led, one hairline, no boxes ---- */
.plan-line { margin-top: clamp(18px, 3vh, 30px); display: flex; align-items: flex-end; gap: 30px; width: min(960px, 100%); padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.42); }
.pl-s { flex: 1; font: 300 clamp(1.2rem, 1.5vw, 1.5rem)/1.5 var(--sans); letter-spacing: -.016em; color: rgba(255,255,255,.95); text-shadow: 0 1px 18px rgba(3,10,16,.7); }
.pw { display: inline-block; }
.nb { white-space: nowrap; }
.pw select { appearance: none; -webkit-appearance: none; font: 600 1em var(--sans); letter-spacing: -.016em; color: #fff; background-color: transparent; border: 0; border-bottom: 1.5px solid rgba(127,214,245,.95); border-radius: 0; padding: 0 22px 1px 2px; margin: 0; cursor: pointer; background-repeat: no-repeat; background-position: right 4px center; background-size: 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237FD6F5' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); transition: background-color .2s, border-color .2s; }
@media (hover: hover) { .pw select:hover { background-color: rgba(255,255,255,.1); } }
.pw select:focus-visible { outline: none; background-color: rgba(255,255,255,.14); border-bottom-color: #fff; }
.pw select option { color: #0F2433; font-weight: 500; }
.plan-line .plan-go { flex: none; margin: 0 0 -2px; }
@media (max-width: 900px) {
  .plan-line { flex-direction: column; align-items: stretch; gap: 22px; border-bottom: 0; padding-bottom: 0; width: 100%; }
  .pl-s { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.42); font-size: 1.3rem; }
  .plan-line .plan-go { width: 100%; justify-content: space-between; }
}
/* ================= sticky dock + entrance ================= */
.dock { position: fixed; z-index: 30; top: 14px; left: 50%; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: rgba(10,20,28,.62); transform: translate(-50%, -160%); opacity: 0; transition: transform .6s var(--out), opacity .4s; width: max-content; max-width: calc(100vw - 24px); white-space: nowrap; }
.dock.on { transform: translate(-50%, 0); opacity: 1; }
.dock a:not(.btn) { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 560; font-size: .92rem; text-decoration: none; color: rgba(255,255,255,.9); transition: background .2s; }
@media (hover: hover) { .dock a:not(.btn):hover { background: rgba(255,255,255,.14); } }
.dock .dock-logo { padding: 0 12px; } .dock-logo img { width: 26px; height: auto; }
.dock .btn { height: 40px; padding: 0 18px; font-size: .9rem; margin-left: 4px; }
@media (max-width: 760px) {
  .dock a:not(.btn):not(.dock-logo) { display: none; }
  .dock { left: 12px; right: 12px; width: auto; top: max(10px, env(safe-area-inset-top)); transform: translateY(-160%); justify-content: space-between; max-width: none; }
  .dock.on { transform: none; }
  .dock .btn { white-space: nowrap; margin-left: 0; }
  .fx-card { flex-basis: min(78vw, 330px); height: min(112vw, 480px); }
  .en { min-height: 0; padding-bottom: clamp(300px, 80vw, 380px); }
  .en-cv { top: auto; bottom: 0; height: clamp(300px, 80vw, 380px); width: 100%; opacity: 1; }
  .en::before { background: linear-gradient(180deg, rgba(5,10,15,.86) 0, rgba(5,10,15,.72) 60%, rgba(5,10,15,.45) 100%); }
  .cl-form input { flex: none; width: 100%; }
  .cl { min-height: 720px; }
  .nav { padding-top: max(18px, env(safe-area-inset-top)); }
  .h-copy { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .h-rail { bottom: calc(20px + env(safe-area-inset-bottom)); }
}
.h-copy > * { animation: rise .9s var(--out) both; } .h-copy > :nth-child(2) { animation-delay: .08s; } .h-copy > :nth-child(3) { animation-delay: .16s; } .h-copy > :nth-child(4) { animation-delay: .24s; } .h-copy > :nth-child(n+5) { animation-delay: .32s; }
.h-float, .h-badge { animation: rise 1s .5s var(--out) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl { transition: none; filter: none; }
  .h-copy > *, .h-float, .h-badge { animation: none; } .dock { transition: none; } .fx-card { transition: none; }
  .h::after { display: none; } .h-copy { opacity: 1; translate: none; } .h-scene, .fc, .h-badge { translate: none; } .btn-tan::after { display: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .h-scene.is-on img { animation: none; transform: none; }
  .fc, .h-badge-r, .gs-aurora i { animation: none; }
  .gs-chap, .scr { transition-duration: .01s; transition-delay: 0s; }
  .pl-day li, .msg, .mini, .af-chips li { animation: none; }
  .caret, .msg.typing i, .gs-hint i::after { animation: none; }
  .en-big .w { transition: none; }
}

/* ================= the experience engine: you + everyone -> the engine -> your best trip (one screen) ================= */
.xe { position: relative; padding: clamp(44px, 7vh, 72px) 0 clamp(34px, 5vh, 56px); background: var(--bg); box-shadow: inset 0 1px 0 var(--line); overflow: hidden; }
.xe-bg { position: absolute; inset: 0; background: radial-gradient(55% 50% at 12% 28%, rgba(19,159,193,.2), transparent 62%), radial-gradient(45% 50% at 92% 72%, rgba(240,128,71,.16), transparent 62%); }
.xe .wrap { position: relative; z-index: 1; }
.xe .eyebrow { margin-bottom: 14px; }
.xe h2 { font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1.02; }
.xe-lede { max-width: 44rem; margin-top: 14px; font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.45; color: var(--mut); text-wrap: pretty; }
.xe-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(22px, 3.6vh, 36px); }
.xe-in { display: grid; gap: 12px; }
.xe-card, .xe-out { padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.xe-out { background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(240,128,71,.5), 0 30px 60px -30px rgba(0,0,0,.75); }
.xe-hd { display: flex; align-items: baseline; gap: 10px; }
.xe-k { font: 650 .68rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); }
.xe-out .xe-k { color: #FFB58F; }
.xe h3 { font-size: 1.02rem; font-weight: 640; letter-spacing: -.02em; line-height: 1.2; }
.xe-out h3 { margin-top: 6px; font-size: 1.15rem; }
.xe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.xe-chips li { padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .8rem; font-weight: 580; }
.xe-rows { margin-top: 6px; }
.xe-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); font-weight: 560; font-size: .9rem; }
.xe-rows img { width: 30px; height: 30px; object-fit: cover; border-radius: 8px; }
.xe-b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 650; }
.xe-b svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xe-b.love { background: rgba(240,128,71,.2); color: #FFC9AB; } .xe-b.love svg { fill: currentColor; }
.xe-b.no { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.xe-mosaic { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.xe-mosaic i { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; opacity: .5; animation: xe-glow 7s ease-in-out infinite; }
.xe-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.xe-mosaic i:nth-child(3n+1) { animation-delay: -1s; } .xe-mosaic i:nth-child(4n+2) { animation-delay: -3.5s; } .xe-mosaic i:nth-child(5n+3) { animation-delay: -5s; } .xe-mosaic i:nth-child(7n) { animation-delay: -2s; }
@keyframes xe-glow { 0%, 62%, 100% { opacity: .5; } 74%, 88% { opacity: 1; } }
.xe-sm { margin-top: 8px; font-size: .84rem; line-height: 1.35; color: var(--mut); }
.xe-c { display: none; }
.xe-core { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 4px 0; }
.xe-core b { margin-top: 6px; font-size: 1.02rem; font-weight: 650; letter-spacing: -.02em; }
.xe-core p { max-width: 14rem; font-size: .82rem; line-height: 1.4; color: var(--mut); }
.xe-node { position: relative; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #17415a, #0B1A24); box-shadow: 0 0 0 1px rgba(127,214,245,.45), 0 0 50px rgba(127,214,245,.28); }
.xe-node img { width: 50px; height: auto; position: relative; z-index: 1; }
.xe-node::before, .xe-node::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(127,214,245,.32); animation: xe-ring 3.6s ease-out infinite; }
.xe-node::after { animation-delay: -1.8s; }
@keyframes xe-ring { 0% { transform: scale(.82); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.xe-picks li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.xe-picks li:first-child { margin-top: 8px; }
.xe-picks img { width: 48px; height: 48px; object-fit: cover; border-radius: 11px; }
.xe-picks strong { display: block; font-weight: 620; font-size: .94rem; line-height: 1.25; }
.xe-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.xe-t { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border-radius: 999px; font-style: normal; font-size: .7rem; line-height: 1.2; font-weight: 560; }
.xe-t b { padding: 2px 7px; border-radius: 999px; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #06202B; }
.xe-t.you { background: rgba(127,214,245,.16); color: #CFEFFB; } .xe-t.you b { background: var(--aqua); }
.xe-t.all { background: rgba(240,128,71,.18); color: #FFD3BA; } .xe-t.all b { background: #F4935F; }
.xe-loop { display: flex; align-items: center; gap: 10px; margin-top: clamp(16px, 2.6vh, 26px); max-width: 44rem; color: var(--mut); font-size: .92rem; line-height: 1.4; }
.xe-loop svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--aqua); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* phone: top to bottom, with a short solid line between the steps */
.xe-core::before, .xe-core::after { content: ""; width: 2px; height: 26px; background: linear-gradient(180deg, rgba(127,214,245,.15), rgba(127,214,245,.7)); border-radius: 2px; }
.xe-core::after { order: 9; background: linear-gradient(180deg, rgba(244,147,95,.7), rgba(244,147,95,.15)); }
@media (min-width: 1000px) {
  .xe-flow { grid-template-columns: minmax(0, 1.1fr) 84px 176px 84px minmax(0, 1fr); gap: 0; height: 440px; align-items: center; }
  .xe-in { grid-template-rows: 214px 214px; height: 440px; }
  .xe-in .xe-card { height: 214px; overflow: hidden; }
  .xe-core { position: relative; height: 440px; display: flex; align-items: center; justify-content: center; padding: 0; }
  .xe-core b, .xe-core p { position: absolute; left: 50%; width: 176px; margin: 0; transform: translateX(-50%); }
  .xe-core b { top: calc(50% + 78px); }
  .xe-core p { top: calc(50% + 104px); max-width: none; }
  .xe-core::before, .xe-core::after { display: none; }
  .xe-c { display: block; width: 84px; height: 440px; overflow: visible; }
  .xe-c path { fill: none; stroke-linecap: round; }
  .xe-lane { stroke-width: 2; opacity: .32; }
  .xe-pulse { stroke-width: 3.4; stroke-dasharray: 14 86; stroke-dashoffset: 14; animation: xe-run 3.2s linear infinite; }
}
@media (min-width: 1000px) and (max-height: 820px) { .xe-lede { display: none; } .xe-flow { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .xe-mosaic i { animation: none; opacity: .75; } .xe-node::before, .xe-node::after { animation: none; opacity: .4; } }

/* the flow: your taste (blue) and everyone's (orange) run into the engine; both run out into the picks, which carry both tags */
@keyframes xe-run { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -86; } }
.xe-card:nth-child(2) .xe-k { color: #FFB58F; }
@keyframes xe-pick { 0%, 62%, 100% { background: transparent; } 72%, 88% { background: rgba(255,255,255,.07); } }
@media (min-width: 1000px) { .xe-picks li { animation: xe-pick 7s ease-in-out infinite; border-radius: 10px; } .xe-picks li:nth-child(2) { animation-delay: -4.7s; } .xe-picks li:nth-child(3) { animation-delay: -2.4s; } }
@media (prefers-reduced-motion: reduce) { .xe-pulse { animation: none; opacity: 0; } .xe-picks li { animation: none; } }

/* ================= destinations page ================= */
.dh { position: relative; padding: clamp(120px, 17vh, 176px) 0 clamp(28px, 4vh, 48px); overflow: hidden; }
.dh::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 60% at 14% 30%, rgba(19,159,193,.22), transparent 62%), radial-gradient(45% 55% at 90% 40%, rgba(240,128,71,.16), transparent 62%); pointer-events: none; }
.dh .wrap { position: relative; }
.dh h1 { font-size: clamp(2.6rem, 6.2vw, 5.2rem); line-height: .98; letter-spacing: -.05em; font-weight: 700; text-wrap: balance; }
.dh h1 .thin { font-weight: 250; }
.dh-lede { max-width: 36rem; margin-top: 20px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: var(--mut); }
.dg { padding: clamp(20px, 3vh, 36px) 0 clamp(56px, 9vw, 110px); }
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; border-radius: 26px; overflow: hidden; isolation: isolate; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0,0,0,.8); }
.dcard > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.dcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,12,16,0) 28%, rgba(7,12,16,.72) 62%, rgba(7,12,16,.94) 100%); }
.dcard-in { padding: 20px; }
.dcard h2 { font-size: clamp(1.8rem, 2.4vw, 2.3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.dcard-t { margin-top: 8px; color: rgba(255,255,255,.9); line-height: 1.4; }
.droute { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-top: 14px; }
.droute li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .8rem; font-weight: 580; }
.droute li:not(:last-child)::after { content: "\2192"; margin-left: 6px; margin-right: -4px; opacity: .6; }
.dcard-a { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.dcard-a .btn { height: 44px; padding: 0 18px; font-size: .94rem; }
.dlink { font-weight: 620; font-size: .95rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 4px; }
@media (hover: hover) { .dlink:hover { text-decoration-color: #fff; } }
@media (hover: hover) { .dcard:hover > img { transform: scale(1.05); } }
@media (min-width: 640px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .dcard { min-height: 560px; } }
.dsoon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; font-size: .92rem; color: var(--mut); }
.dsoon span { padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-weight: 560; }
.nav-links a[aria-current="page"] { background: rgba(255,255,255,.16); }
@media (prefers-reduced-motion: reduce) { .dcard > img { transition: none; } }

@media (max-width: 900px) {
  .g3 .foot a, .g3 .dlink { position: relative; }
  .g3 .foot a::after, .g3 .dlink::after { content: ""; position: absolute; inset: -2px 0; }
}