/* Lycia AI Venues page: the guest-facing side of Lycia AI. Built on the homepage styles in home-lycia.css. */
.vn{--vn-ink:#0f1418;--vn-muted:#56616c;--vn-line:#dde3ea;--vn-sky:#edf2f7;--vn-stage:#121a22;--vn-blue:#9cc4f0;--vn-indigo:#6366f1;--vn-busy:#f2a84b}

/* ============ HERO ============ */
/* The homepage's morning sky. On the right, one guest after another, venue by venue, each in their own language. */
.vn-hero{position:relative;overflow:hidden;background:var(--vn-sky);color:var(--vn-ink);padding:150px 0 104px}
.vn-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(15,20,24,.07) 1px,transparent 1px) 0 0/32px 32px}
.vn-hero-grid{position:relative;max-width:1320px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:72px;align-items:center}
.vn .vn-lockup{margin-bottom:26px}
.vn .vn-lockup span{color:var(--vn-ink);border-left-color:rgba(15,20,24,.22)}
.vn-hero h1{font-size:clamp(40px,4.4vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1.03;max-width:15ch}
/* Each sentence wraps on its own, evenly, so neither leaves a word alone on a line. */
.vn-hero h1 span{display:block;text-wrap:balance}
.vn-hero-lede{font-size:18px;line-height:1.62;color:#3b4652;max-width:50ch;margin-top:24px}
.vn-btn-dark{background:#0f1418;color:#fff}
.vn-btn-dark:hover{background:#26303a}
.vn-btn-line{color:#0f1418;border:1px solid rgba(15,20,24,.28)}
.vn-btn-line:hover{border-color:rgba(15,20,24,.6)}
.vn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;max-width:54ch}
.vn-chips li{font-size:13px;font-weight:500;line-height:1;padding:7px 11px;border-radius:999px;border:1px solid rgba(15,20,24,.2);color:rgba(15,20,24,.8)}

/* The desk: a dark product stage like the homepage cards. */
.vn-desk{position:relative;background:var(--vn-stage);color:#fff;border-radius:24px;padding:12px 12px 20px;box-shadow:0 40px 90px -20px rgba(15,20,24,.35)}
.vn-tabs{display:flex;gap:2px;padding:4px;margin-bottom:12px;border-radius:14px;background:rgba(255,255,255,.06)}
.vn-tabs button{position:relative;flex:1 1 0;min-width:0;padding:10px 6px;border:0;border-radius:10px;background:none;color:rgba(255,255,255,.62);font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;cursor:pointer;overflow:hidden;transition:color .2s,background-color .2s}
.vn-tabs button:hover{color:#fff}
.vn-tabs button[aria-selected=true]{background:#fff;color:var(--vn-ink)}
/* The countdown to the next guest: a thin line under the picked venue. When it runs out, venues.js moves on.
   It holds while the pointer or focus is on the desk, and stops for good once someone picks a venue. */
.vn-tabs i{position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--vn-indigo);opacity:.5;transform:scaleX(0);transform-origin:left;pointer-events:none}
.vn-tabs [aria-selected=true] i{animation:vn-count 8s linear forwards}
.vn-desk:hover .vn-tabs i,.vn-desk:focus-within .vn-tabs i,.vn-desk.is-away .vn-tabs i{animation-play-state:paused}
.vn-desk.is-manual .vn-tabs i{animation:none}
@keyframes vn-count{to{transform:scaleX(1)}}

.vn-panes{display:grid}
.vn-pane{grid-area:1/1;display:flex;flex-direction:column;min-width:0;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.vn-pane.is-on{visibility:visible;opacity:1;transition:opacity .35s}
/* The scene is the menu's venue tile at full size; header.css plays its characters while the venue is on. */
.vn-scene{display:block;border-radius:16px}
.vn-scene .mi-scene{height:auto;aspect-ratio:120/50;border-radius:16px}
.vn-desk .vn-scene:hover .mi-scene{transform:none;box-shadow:inset 0 0 0 1px rgba(15,20,24,.06)}
.vn-talk{display:flex;flex-direction:column;gap:10px;padding:18px 8px 0;flex:1}
.vn-via{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
.vn-via img,.vn-via-ico{flex:none;width:16px;height:16px}
.vn-via-ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vn-via span{font-weight:500;color:rgba(255,255,255,.45)}
.vn-msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.vn-msg small{display:block;margin-top:5px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.5)}
.vn-msg p[dir=rtl]{text-align:right}
.vn-msg.is-guest{align-self:flex-end;background:rgba(255,255,255,.09);border-bottom-right-radius:6px}
.vn-msg.is-ai{align-self:flex-start;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;background:rgba(156,196,240,.13);border-bottom-left-radius:6px}
.vn-msg.is-ai img{grid-row:span 2;width:22px;height:22px;margin-top:1px}
.vn-done{display:flex;align-items:center;gap:10px;margin-top:4px;padding:11px 14px;border:1px dashed rgba(255,255,255,.2);border-radius:12px;font-size:14px}
.vn-done::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:rgba(156,196,240,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%239cc4f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.vn-done b{font-weight:650}
.vn-done span{margin-left:auto;font-weight:750;font-variant-numeric:tabular-nums;color:var(--vn-blue)}
.vn-pane-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:16px 8px 0;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.75);text-decoration:none}
.vn-pane-link:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.vn-pane-link svg,.vn-type-go svg{width:14px;height:14px}
/* The conversation plays out each time a venue comes on: the question, the answer, then what it ended in. */
.vn-pane.is-on .vn-msg,.vn-pane.is-on .vn-done{animation:vn-pop .45s cubic-bezier(.2,.7,.2,1) both}
.vn-pane.is-on .vn-msg.is-guest{animation-delay:.25s}
.vn-pane.is-on .vn-msg.is-ai{animation-delay:1.15s}
.vn-pane.is-on .vn-done{animation-delay:2.2s}
@keyframes vn-pop{from{opacity:0;transform:translateY(8px)}}

/* ============ CONTRAST ============ */
/* The homepage flow rows. The headline breaks between its two sentences. */
.vn .lx-versus .lx-h2{max-width:none}

/* ============ SELL ============ */
/* Every answer can end in a sale. A till prints one evening of them, line by line, once it scrolls into view. */
.vn-sell{background:#111;color:#fff;padding:120px 0;overflow:hidden}
.vn-sell .lx-lede{color:#a6a6b1}
.vn-sell-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:88px;align-items:center}
.vn-sell-points{margin-top:40px;border-top:1px solid #2b2d34}
.vn-sell-points li{padding:20px 0;border-bottom:1px solid #2b2d34}
.vn-sell-points h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.vn-sell-points p{font-size:15px;line-height:1.6;color:#a6a6b1;margin-top:6px;max-width:52ch}
/* One receipt per kind of venue. Picking another venue prints its receipt. */
.vn-till-wrap{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;max-width:440px;justify-self:center}
.vn-till-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:4px;border-radius:14px;background:rgba(255,255,255,.06)}
.vn-till-tabs button{padding:8px 12px;border:0;border-radius:10px;background:none;color:rgba(255,255,255,.62);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:color .2s,background-color .2s}
.vn-till-tabs button:hover{color:#fff}
.vn-till-tabs [aria-selected=true],.vn-till-tabs [aria-selected=true]:hover{background:#fff;color:var(--vn-ink)}
.vn-till{position:relative;width:100%;max-width:420px;padding-top:12px}
.vn-till-slot{position:absolute;z-index:2;top:0;left:-20px;right:-20px;height:30px;border-radius:15px;background:linear-gradient(#2c3038,#1c1f25);box-shadow:0 14px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.vn-till-slot::after{content:"";position:absolute;left:16px;right:16px;top:13px;height:5px;border-radius:3px;background:#060708}
.vn-receipt-clip{position:relative;overflow:hidden;padding:0 4px 26px;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
/* A torn paper edge at the bottom: a row of small triangles cut out of the mask. */
.vn-receipts{display:grid}
.vn-receipt{grid-area:1/1;visibility:hidden;padding:34px 26px 34px;background:#fbfaf7;color:#1d2228;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.vn-receipt-head{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:18px;border-bottom:1px dashed #cfd3d8;text-align:center}
.vn-receipt-head img{width:auto;height:22px}
.vn-receipt-head b{font-size:16px;font-weight:750;letter-spacing:-.01em}
.vn-receipt-head span{margin-top:-6px;font-size:12.5px;font-weight:500;color:#6b7280}
.vn-receipt.is-on{visibility:visible}
.vn-receipt ol{padding:8px 0}
.vn-receipt li{display:flex;align-items:baseline;gap:14px;padding:10px 0}
.vn-receipt li span{flex:1;min-width:0}
.vn-receipt li b{display:block;font-size:14.5px;font-weight:650;line-height:1.3}
.vn-receipt li small{display:block;margin-top:3px;font-size:12px;font-style:italic;color:#7a828c}
.vn-receipt li em{font-style:normal;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.vn-receipt-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:2px solid #1d2228;font-size:15px;font-weight:700}
.vn-receipt-total b{font-size:26px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vn-receipt-foot{margin-top:14px;font-size:12.5px;color:#7a828c;text-align:center}
/* venues.js adds is-ready (waiting in the till) and is-live (printing). It prints from the top, so the total comes last;
   steps make it feed like a real printer. A newly picked venue prints its receipt the same way. */
.vn-till.is-ready .vn-receipt{clip-path:inset(0 0 100% 0);transform:translateY(-28px)}
.vn-till.is-live .vn-receipt.is-on{animation:vn-print 3.4s steps(22,end) .2s forwards}
.vn-till.is-live .vn-receipt.is-on .vn-receipt-total b{animation:vn-total .6s 3.7s both}
@keyframes vn-print{to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes vn-total{0%{color:#1d2228}40%{color:var(--vn-indigo)}100%{color:#1d2228}}

/* ============ DIGITAL TWIN ============ */
/* A live model of the venue that the AI assistant answers from: a flat Lycia airport drawn for this page and the mall page's
   Lycia Park Mall. Lycia Box pins show how busy each area is, and the route leads to the quiet spot the assistant suggests. */
.vn-twin{background:var(--vn-sky);padding:120px 0;overflow:hidden}
.vn-twin-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end}
.vn-twin-top .lx-lede{margin-top:0;color:#3b4652}
.vn-twin-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:48px}
.vn-twin-tabs{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:#fff;border:1px solid var(--vn-line)}
.vn-twin-tabs button{padding:9px 16px;border:0;border-radius:10px;background:none;color:var(--vn-muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .2s,background-color .2s}
.vn-twin-tabs button:hover{color:var(--vn-ink)}
.vn-twin-tabs [aria-selected=true]{background:var(--vn-stage);color:#fff}
.vn-twin-tabs [aria-selected=true]:hover{color:#fff}
.vn-crowd-key{display:flex;gap:18px;font-size:13px;font-weight:500;color:var(--vn-muted)}
.vn-crowd-key li{display:flex;align-items:center;gap:7px}
.vn-crowd-key li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.vn .is-busy{--c:var(--vn-busy)}
.vn .is-mid{--c:var(--vn-indigo)}
.vn .is-quiet{--c:#7fb0e6}
.vn-twin-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;margin-top:16px}
.vn-twin-views{display:grid;min-width:0}
.vn-twin-view{position:relative;grid-area:1/1;min-width:0;visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.vn-twin-view.is-on{visibility:visible;opacity:1;transition:opacity .35s}
.vn-twin-art{position:relative;aspect-ratio:1200/820;overflow:hidden;border-radius:22px;background:#e8eef3;box-shadow:0 20px 50px -24px rgba(15,20,24,.25)}
.vn-twin-art.is-mall{background:#eef1f4}
.vn-mall-plan,.vn-airport-plan{display:block;width:100%;height:100%}
/* The airport: the airports page's λ-shaped terminal from straight above, on its blue-grey slab. */
.vn-twin-art.is-airport{background:linear-gradient(180deg,#eef5f7,#c9d9e0)}
.vn-airport-plan text{font-family:inherit}
.vn-airport-plan [data-flow-path]{fill:none;stroke:none}
.vn-airport-plan .airport-showcase-route{animation:vn-march 40s linear infinite}
@keyframes vn-march{to{stroke-dashoffset:-1000}}
/* Passengers walking the departure routes; arrivals walk the other way, in a lighter blue. */
.vn-pax{fill:#5b7fd6;stroke:#fff;stroke-width:1.5}
.vn-pax.is-arriving{fill:#8fb8e6}
/* Crowd level per store: tinted by Lycia Box, with a warm haze where it is busy. */
.vn-mall-plan .mall_map_store.is-busy .mall_map_storeOutline{fill:#fde9cf;stroke:#efb468}
.vn-mall-plan .mall_map_store.is-mid .mall_map_storeOutline{fill:#e5e6fd;stroke:#a5a8f6}
.vn-mall-plan .mall_map_store.is-quiet .mall_map_storeOutline{fill:#e4effb;stroke:#9fc3ea}
.vn-mall-plan .mall_map_store.is-goal .mall_map_storeOutline{stroke:var(--vn-indigo);stroke-width:4}
.vn-heat{fill:url(#vn-heat-busy);animation:vn-heat 5s ease-in-out infinite alternate}
.vn-heat.is-mid{fill:url(#vn-heat-mid);animation-delay:-2s}
.vn-heat.is-air{fill:url(#vn-heat-busy-air)}
@keyframes vn-heat{from{opacity:.7}to{opacity:1}}
/* Lycia Box pins: a small box in its crowd colour, pinging as it reports. */
.vn-pin rect{fill:var(--c);stroke:#fff;stroke-width:3}
.vn-pin-ring{fill:none;stroke:var(--c);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:vn-ping 3.2s ease-out var(--d,0s) infinite}
@keyframes vn-ping{0%{opacity:.8;transform:scale(.5)}70%,100%{opacity:0;transform:scale(1.6)}}
.vn-route{fill:none;stroke:var(--vn-indigo);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6 9}
.vn-you circle{fill:var(--vn-indigo)}
.vn-you circle + circle{stroke:#fff;stroke-width:4}
.vn-you-ring{opacity:.2;transform-box:fill-box;transform-origin:center;animation:vn-you 2s ease-out infinite}
@keyframes vn-you{from{transform:scale(.6);opacity:.35}to{transform:scale(1.6);opacity:0}}
.vn-twin-say{position:absolute;left:18px;bottom:18px;display:flex;align-items:flex-start;gap:10px;max-width:min(480px,calc(100% - 36px));padding:12px 16px;border-radius:16px;background:var(--vn-stage);color:#fff;font-size:14px;line-height:1.45;box-shadow:0 18px 40px -12px rgba(15,20,24,.5)}
.vn-twin-say img{flex:none;width:22px;height:22px}
.vn-twin-say.is-top{top:120px;bottom:auto;max-width:290px}
/* venues.js: once the twin scrolls into view, the route draws and then the assistant says where to go. */
.vn-twin-stage.is-ready .vn-route{stroke-dasharray:100;stroke-dashoffset:100}
.vn-twin-stage.is-live .vn-twin-view.is-on .vn-route{animation:vn-route 1.6s .5s cubic-bezier(.4,0,.2,1) forwards}
.vn-twin-stage.is-ready .vn-twin-say{opacity:0}
.vn-twin-stage.is-live .vn-twin-view.is-on .vn-twin-say{animation:vn-say .5s 2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes vn-route{to{stroke-dashoffset:0}}
@keyframes vn-say{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Lycia Box: the sensor box that keeps the twin live. */
.vn-boxcard{display:flex;flex-direction:column;justify-content:center;padding:24px 22px;border-radius:22px;background:#fff;box-shadow:0 20px 50px -24px rgba(15,20,24,.25)}
.vn-device-art{position:relative;display:grid;place-items:center;height:104px}
.vn-device-box{position:relative;z-index:1;display:grid;place-items:center;width:70px;height:70px;border-radius:20px;background:linear-gradient(160deg,#fdfdfe,#e6ebf1);box-shadow:0 14px 26px -10px rgba(15,20,24,.35),inset 0 -3px 0 rgba(15,20,24,.06),inset 0 1px 0 #fff}
.vn-device-box img{width:32px;height:32px}
.vn-device-box b{position:absolute;right:10px;bottom:10px;width:6px;height:6px;border-radius:50%;background:var(--vn-indigo);animation:vn-led 2s ease-in-out infinite}
/* Two rings widen out from the box, like the lock on the homepage: it is listening. */
.vn-device-wave{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:1px solid rgba(99,102,241,.3);animation:vn-wave 3s ease-out infinite}
.vn-device-wave + .vn-device-wave{animation-delay:1.5s}
@keyframes vn-wave{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
@keyframes vn-led{50%{opacity:.25}}
.vn-boxcard h3{margin-top:10px;font-size:18px;font-weight:750;letter-spacing:-.015em}
.vn-boxcard > p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--vn-muted)}
.vn-senses{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.vn-senses li{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--vn-sky);font-size:12.5px;font-weight:600;color:#3b4652}
.vn-senses svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vn-boxflow{display:flex;align-items:center;gap:20px;margin-top:18px;list-style:none;font-size:12px;font-weight:650;color:var(--vn-ink)}
.vn-boxflow li{position:relative;padding:5px 8px;border-radius:8px;border:1px solid var(--vn-line);white-space:nowrap}
.vn-boxflow li + li::before{content:"";position:absolute;left:-14px;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.6px solid var(--vn-indigo);border-right:1.6px solid var(--vn-indigo);transform:rotate(45deg)}
.vn-twin-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px;padding-top:28px;border-top:1px solid #d5dde6}
.vn-twin-points h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.vn-twin-points p{font-size:14.5px;line-height:1.6;color:var(--vn-muted);margin-top:8px}

/* ============ HERO VOICE ============ */
/* The airport guest talks instead of typing: the assistant's face, a live waveform, and the chat it picked up from. */
.vn-call{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:16px;background:rgba(255,255,255,.06)}
.vn-call-face{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:46% 22%;box-shadow:0 0 0 3px rgba(156,196,240,.25);animation:vn-halo 2.4s ease-in-out infinite}
@keyframes vn-halo{50%{box-shadow:0 0 0 6px rgba(156,196,240,.12)}}
.vn-call-who b{display:block;font-size:13.5px;font-weight:650}
.vn-call-who span{display:block;margin-top:2px;font-size:12px;color:rgba(255,255,255,.5)}
.vn-wave{display:flex;align-items:center;gap:3px;height:30px}
.vn-wave i{width:3px;height:var(--h);border-radius:2px;background:var(--vn-blue);opacity:.85;animation:vn-talk 1.1s ease-in-out var(--d) infinite alternate}
@keyframes vn-talk{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* ============ ACCESS ============ */
/* The same question from a guest and from the front office, then a handoff when a person is needed. */
.vn-roles{background:#fff}
.vn-roles-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:72px;align-items:center}
.vn-roles-chips{margin-top:28px}
.vn-roles-card{padding:28px;border-radius:24px;background:var(--vn-stage);color:#fff;box-shadow:0 40px 90px -30px rgba(15,20,24,.4)}
.vn-roles-q{font-size:19px;font-weight:700;letter-spacing:-.01em;text-align:center}
.vn-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.vn-answer{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.vn-answer p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.85)}
.vn-who{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.62)}
.vn-who img{width:16px;height:16px}
.vn-who b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2a3542;font-size:9.5px;font-weight:700;color:#fff}
.vn-redact{display:grid;gap:6px}
.vn-redact i{height:9px;border-radius:5px;background:rgba(255,255,255,.12)}
.vn-redact i + i{width:62%}
.vn-file{align-self:flex-start;margin-top:auto;padding:5px 10px;border-radius:8px;background:rgba(156,196,240,.14);font-size:12px;font-weight:600;color:var(--vn-blue)}
.vn-handoff{display:grid;gap:8px;margin-top:12px;padding:16px;border-radius:16px;border:1px dashed rgba(255,255,255,.18)}
.vn-handoff-guest{font-size:14px;font-weight:600}
.vn-handoff-guest span{display:block;margin-bottom:3px;font-size:12px;font-weight:500;color:rgba(255,255,255,.5)}
.vn-handoff-staff{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.72)}
.vn-handoff-staff img{flex:none;width:18px;height:18px;margin-top:1px}

/* ============ VENUE TYPES ============ */
.vn-types{background:var(--lx-paper)}
.vn-types-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.vn-types-top p{font-size:15px;color:var(--vn-muted);white-space:nowrap}
.vn-types-top a{color:var(--vn-ink);font-weight:700;text-underline-offset:4px}
.vn-type-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:48px}
.vn-type-list > li > a{display:flex;flex-direction:column;height:100%;padding:22px 20px 20px;border-radius:18px;background:#fff;border:1px solid var(--vn-line);color:var(--vn-ink);text-decoration:none;transition:border-color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.vn-type-list > li > a:hover{border-color:#0f1418;transform:translateY(-2px)}
.vn-type-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--vn-sky)}
.vn-type-ico svg{width:20px;height:20px;fill:none;stroke:var(--vn-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vn-type-list h3{margin-top:18px;font-size:18px;font-weight:750;letter-spacing:-.015em}
.vn-type-list ul{margin-top:10px;display:grid;gap:6px}
.vn-type-list ul li{font-size:14px;line-height:1.4;color:var(--vn-muted)}
.vn-type-go{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:20px;font-size:13px;font-weight:650}

/* ============ CTA ============ */
/* The homepage's warm closing, with hello in some of the languages Lycia AI speaks. */
.vn-hellos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:620px;margin:34px auto 0}
.vn-hellos li{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid #e1d8cb;font-size:14px;font-weight:600;color:#6b5c4a}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .vn-hero-grid{gap:48px}
  .vn-sell-grid{gap:56px}
  .vn-type-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .vn-hero{padding:128px 0 72px}
  .vn-hero-grid,.vn-sell-grid,.vn-twin-top,.vn-roles-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .vn-twin-top{gap:20px}
  .vn-twin-stage{grid-template-columns:minmax(0,1fr)}
  .vn-boxcard{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;align-items:start}
  .vn-device-art{grid-row:span 4;height:96px}
  .vn-twin-points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vn-type-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vn-types-top{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:719px){
  .vn-hero{padding:116px 0 56px}
  .vn-hero-lede{font-size:16px;line-height:1.55}
  .vn-chips li:nth-child(n+4){display:none}
  .vn-tabs button{flex:1 1 auto;font-size:12.5px;padding:9px 4px}
  .vn-msg{font-size:14px}
  .vn-sell,.vn-twin{padding:80px 0}
  .vn-till-slot{left:-8px;right:-8px}
  .vn-receipt{padding:30px 18px}
  .vn-twin-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .vn-twin-art{aspect-ratio:auto}
  .vn-airport-plan{height:auto}
  .vn-twin-art.is-mall{aspect-ratio:1130/1290}
  .vn-twin-say,.vn-twin-say.is-top{position:static;max-width:none;margin-top:10px;font-size:13.5px}
  .vn-boxcard{display:flex}
  .vn-device-art{height:96px}
  .vn-twin-points{grid-template-columns:minmax(0,1fr);gap:20px}
  .vn-boxflow{flex-wrap:wrap}
  .vn-answers{grid-template-columns:minmax(0,1fr)}
  .vn-roles-card{padding:20px}
  .vn-type-list{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .vn *,.vn *::before,.vn *::after{animation:none!important;transition:none!important}
}