/* Flâne, the website: for hotels first (the home page, the product, pricing, the demonstration hotel), and for
   travellers behind a quieter door (both cities, Paris, Beirut).
   The cities at night: a deep blue ground, gold for what matters, cream for what you hold (the listen panels, the price,
   the room card), and paper for the reading. The arch frames every picture, and the apps' real screens sit in phones. */

@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --night: #0b1626; --night-2: #111f35; --night-3: #182a47; --sea: #060e1a; --land: #1a2c4a;
  --gold: #d9b56b; --gold-2: #ecd39a; --gold-deep: #9e7a34;
  --cream: #f4ecdf; --paper: #f5efe4; --paper-2: #e9dfcd; --card: #fffaf2;
  --ink: #1b1a17; --ink-2: #57514a; --ink-3: #857d72;
  --line: rgb(27 26 23 / .12); --line-night: rgb(244 236 223 / .14);
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --arabic: 'Geeza Pro', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --wrap: 1180px; --gutter: clamp(18px, 5vw, 44px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
[lang='ar'] { font-family: var(--arabic); letter-spacing: 0; text-transform: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.night { background: var(--night); color: var(--cream); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* type */
.eyebrow { margin: 0; font: 650 12px/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }
.night .eyebrow { color: var(--gold); }
.display { margin: 16px 0 0; font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 360; font-size: clamp(42px, 10.5vw, 84px); line-height: .98; letter-spacing: -.022em; text-wrap: balance; }
.display.tight { font-size: clamp(40px, 9.4vw, 70px); }
.display em, .h2 em { font-style: italic; font-weight: 380; color: var(--gold); }
.paper .h2 em { color: var(--gold-deep); }
.h2 { margin: 12px 0 0; font-family: var(--serif); font-variation-settings: 'opsz' 60; font-weight: 380; font-size: clamp(32px, 7vw, 56px); line-height: 1.03; letter-spacing: -.018em; text-wrap: balance; }
.h3 { margin: 0; font-family: var(--serif); font-variation-settings: 'opsz' 30; font-weight: 450; font-size: 22px; line-height: 1.18; letter-spacing: -.005em; }
.lede { margin: 20px 0 0; max-width: 33em; font-family: var(--serif); font-variation-settings: 'opsz' 18; font-size: clamp(18.5px, 2.5vw, 21.5px); line-height: 1.5; color: rgb(244 236 223 / .82); text-wrap: pretty; }
.sub { margin: 16px 0 0; max-width: 38em; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.night .sub { color: rgb(244 236 223 / .7); }
.sec { padding-block: clamp(72px, 11vw, 132px); }
.sec-head { max-width: 760px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .sub { margin-inline: auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; font: 650 16px/1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-gold { background: var(--gold); color: #1c1506; box-shadow: 0 10px 28px -12px rgb(217 181 107 / .7); }
.btn-gold:hover { background: var(--gold-2); }
.btn-ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgb(244 236 223 / .34); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-2); }
.btn-ink { background: var(--night); color: var(--cream); }
.btn-ink:hover { background: var(--night-3); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--gold-deep); }
.btn-sm { min-height: 40px; padding: 0 17px; font-size: 14.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* the triple arch, the mark of the room card */
.crest { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.crest .thin { stroke-width: .8; opacity: .65; }
.crest .dot { fill: currentColor; stroke: none; }

/* nav */
.nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px; padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) 10px; background: rgb(11 22 38 / .84); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); color: var(--cream); border-bottom: 1px solid var(--line-night); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--serif); font-variation-settings: 'opsz' 30; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; }
.brand em { font-style: italic; color: var(--gold); }
.brand .crest { width: 40px; height: 19px; color: var(--gold); }
.nav-links { display: none; gap: 28px; margin-left: auto; font-size: 15px; }
.nav-links a { text-decoration: none; color: rgb(244 236 223 / .78); transition: color .2s; }
.nav-links a:hover { color: var(--gold-2); }
.nav > .btn { margin-left: auto; }
@media (min-width: 880px) { .nav-links { display: flex; } .nav > .btn { margin-left: 6px; } }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(34px, 7vw, 84px) clamp(64px, 10vw, 120px); }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(52% 46% at 82% 34%, rgb(217 181 107 / .13), transparent 72%),
  radial-gradient(40% 40% at 6% 96%, rgb(46 82 150 / .28), transparent 72%); }
.stars { position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image:
  radial-gradient(1.2px 1.2px at 12% 18%, #f4ecdf, transparent), radial-gradient(1px 1px at 28% 8%, #f4ecdf, transparent),
  radial-gradient(1.4px 1.4px at 46% 22%, #ecd39a, transparent), radial-gradient(1px 1px at 63% 6%, #f4ecdf, transparent),
  radial-gradient(1.2px 1.2px at 71% 28%, #f4ecdf, transparent), radial-gradient(1px 1px at 88% 12%, #ecd39a, transparent),
  radial-gradient(1px 1px at 94% 40%, #f4ecdf, transparent), radial-gradient(1.3px 1.3px at 7% 44%, #ecd39a, transparent),
  radial-gradient(1px 1px at 38% 38%, #f4ecdf, transparent), radial-gradient(1px 1px at 55% 50%, #f4ecdf, transparent); }
.hero-grid { position: relative; display: grid; gap: clamp(40px, 7vw, 64px); align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 34px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--line-night); font-size: 14.5px; line-height: 1.3; color: rgb(244 236 223 / .66); }
.hero-facts li { display: flex; align-items: baseline; gap: 7px; }
.hero-facts b { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 400; font-size: 27px; line-height: 1; color: var(--gold-2); }
.hero-art { position: relative; justify-self: center; width: min(100%, 440px); padding-bottom: 8px; }
.arch-window { position: relative; aspect-ratio: 2 / 3; border-radius: 999px 999px 18px 18px; overflow: hidden; background: var(--night-2);
  box-shadow: 0 0 0 1px rgb(217 181 107 / .55), 0 0 0 11px var(--night), 0 0 0 12px rgb(217 181 107 / .3), 0 50px 100px -30px rgb(0 0 0 / .85); }
.arch-window img { width: 100%; height: 100%; object-fit: cover; }
.arch-window::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(11 22 38 / .55)); }

/* the listen panel: the cream arch of the room card, holding Maya and Karim */
.listen { position: relative; z-index: 2; width: min(92%, 370px); margin: -150px auto 0; padding: 50px 24px 22px; text-align: center; color: var(--ink); background: var(--cream); border-radius: 999px 999px 24px 24px;
  box-shadow: 0 0 0 5px var(--night), 0 0 0 6.5px rgb(217 181 107 / .7), 0 34px 70px -24px rgb(0 0 0 / .75); }
.listen .crest { width: 54px; height: 26px; margin: 0 auto; color: var(--gold-deep); }
.listen-who { margin-top: 10px; font: 700 11.5px/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }
.listen-line { min-height: 7.6em; margin: 8px 0 0; font-family: var(--serif); font-variation-settings: 'opsz' 18; font-style: italic; font-size: 16px; line-height: 1.45; color: var(--ink); display: flex; align-items: center; justify-content: center; text-wrap: pretty; }
.listen-play { display: grid; place-items: center; width: 64px; height: 64px; margin: 14px auto 0; border: 0; border-radius: 50%; background: var(--night); color: var(--gold); cursor: pointer; box-shadow: 0 0 0 7px rgb(217 181 107 / .2); transition: transform .15s ease, box-shadow .2s; }
.listen-play:hover { box-shadow: 0 0 0 9px rgb(217 181 107 / .28); }
.listen-play svg { width: 24px; height: 24px; }
.listen.playing .listen-play { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 12px rgb(217 181 107 / .12); } }
.listen-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.listen-dots i { width: 22px; height: 3px; border-radius: 3px; background: var(--paper-2); transition: background .3s; }
.listen-dots i.on { background: var(--gold-deep); }
.listen-where { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* the map of the walks */
.map-sec { background: linear-gradient(180deg, var(--night) 0%, #09121f 100%); }
.map-grid { display: grid; gap: 22px; margin-top: 40px; }
@media (min-width: 1000px) { .map-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 30px; } }
.map { position: relative; margin: 0; overflow: hidden; border-radius: 24px; background: var(--sea); box-shadow: inset 0 0 0 1px var(--line-night), 0 40px 90px -40px rgb(0 0 0 / .9); }
.map svg { display: block; width: 100%; height: auto; }
.map .sea { fill: var(--sea); }
.map .land { fill: var(--land); }
.map .coast { fill: none; stroke: rgb(217 181 107 / .5); stroke-width: 1.3; stroke-linejoin: round; }
.map .waves { fill: none; stroke: rgb(217 181 107 / .09); stroke-width: 1; }
.map .place { fill: rgb(244 236 223 / .38); font: 650 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.map .sea-name { fill: rgb(217 181 107 / .4); font: italic 400 22px var(--serif); letter-spacing: .01em; }
.map .route { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .72; cursor: pointer; transition: opacity .3s, stroke-width .3s; }
.map .route-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
.map .pin circle { fill: var(--night); stroke: var(--gold); stroke-width: 1.6; }
.map .pin text { fill: var(--gold-2); font: 700 11.5px var(--sans); text-anchor: middle; dominant-baseline: central; }
.map[data-active] .route { opacity: .16; }
.map[data-active] .pin { opacity: .35; }
.map .route.on { opacity: 1; stroke-width: 5.5; filter: drop-shadow(0 0 7px rgb(217 181 107 / .7)); }
.map .pin.on { opacity: 1; }
.map .pin.on circle { fill: var(--gold); }
.map .pin.on text { fill: var(--night); }
.js-motion .map .route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .map.drawn .route { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.55, 0, .2, 1), opacity .3s, stroke-width .3s; }
.map-credit { position: absolute; right: 12px; bottom: 9px; font-size: 10.5px; color: rgb(244 236 223 / .4); }
.walk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.walk-list a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 12px; border-radius: 14px; text-decoration: none; transition: background .2s; }
.walk-list a:hover, .walk-list a.on { background: rgb(217 181 107 / .1); }
.walk-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 12.5px var(--sans); color: var(--gold-2); box-shadow: inset 0 0 0 1.5px var(--gold); }
.walk-list a.on .walk-n { background: var(--gold); color: var(--night); }
.walk-t { display: block; font-family: var(--serif); font-variation-settings: 'opsz' 24; font-size: 18px; line-height: 1.2; }
.walk-a { display: block; margin-top: 2px; font-size: 13px; color: rgb(244 236 223 / .52); }
.walk-m { font-size: 13px; line-height: 1.35; text-align: right; color: rgb(244 236 223 / .6); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* cards on a rail */
.paper { background: var(--paper); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(76vw, 300px); gap: 20px; margin: 38px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--paper-2) transparent; }
.card { display: flex; flex-direction: column; scroll-snap-align: start; text-decoration: none; color: inherit; }
.card-pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 16px 16px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--line); }
.card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-pic img { transform: scale(1.045); }
.card-badge { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgb(11 22 38 / .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--gold-2); font: 650 11px/1 var(--sans); letter-spacing: .04em; white-space: nowrap; }
.card-badge svg { width: 13px; height: 13px; }
.card .eyebrow { margin-top: 16px; font-size: 11px; }
.card .h3 { margin-top: 7px; }
.card-desc { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin-top: 12px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.card-ar { font-size: 15px; color: var(--gold-deep); margin-left: 6px; }

/* how it works */
.steps { display: grid; gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: step; padding: 24px 22px 26px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--night); color: var(--gold); font: 700 15px var(--sans); }
.steps .h3 { margin-top: 16px; font-size: 21px; }
.steps p { margin: 9px 0 0; font-size: 15.5px; line-height: 1.52; color: var(--ink-2); }
.steps .when { display: block; margin-top: 16px; font: 700 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }

/* the film */
.film { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(100px, 17vw, 190px); }
.film-bg { position: absolute; inset: 0; z-index: -1; }
.film-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.35) contrast(1.08) brightness(.5); }
.film-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 22 38 / .94) 0%, rgb(11 22 38 / .7) 50%, rgb(11 22 38 / .35) 100%), linear-gradient(0deg, rgb(11 22 38 / .6), transparent 40%); }
.film .sec-head { max-width: 620px; }
.film-length { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14px; color: rgb(244 236 223 / .7); }
.film-length i { width: 42px; height: 1px; background: var(--gold); }
.film-credit { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: rgb(244 236 223 / .45); }

/* more to read */
.tiles { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 820px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 26px 24px; overflow: hidden; border-radius: 22px; text-decoration: none; color: var(--cream); background: var(--night); isolation: isolate; }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 22 38 / .15), rgb(11 22 38 / .88) 75%); }
.tile:hover img { transform: scale(1.05); opacity: .65; }
.tile .h3 { margin-top: auto; font-size: 25px; }
.tile p { margin: 8px 0 0; font-size: 15px; color: rgb(244 236 223 / .78); }
.tile .eyebrow { color: var(--gold); }

/* price */
.offer { position: relative; overflow: hidden; text-align: center; }
.offer .stars { opacity: .35; }
.price-arch { position: relative; max-width: 560px; margin: 44px auto 0; padding: 70px 28px 34px; border-radius: 999px 999px 28px 28px; background: var(--cream); color: var(--ink); box-shadow: 0 0 0 6px var(--night), 0 0 0 7.5px rgb(217 181 107 / .7), 0 40px 90px -30px rgb(0 0 0 / .8); }
.price-arch .crest { width: 60px; height: 28px; margin: 0 auto; color: var(--gold-deep); }
.price-big { margin: 14px 0 0; font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 360; font-size: clamp(72px, 18vw, 112px); line-height: .9; letter-spacing: -.03em; color: var(--night); }
.price-big small { display: block; margin-top: 10px; font: 600 14px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-3); }
.price-arch ul { display: grid; gap: 10px; max-width: 380px; margin: 26px auto 0; padding: 0; list-style: none; text-align: left; font-size: 15.5px; }
.price-arch li, .plan li { position: relative; padding-left: 28px; }
.price-arch li::before, .plan li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 13px; height: 7px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }
.price-arch .btn { margin-top: 28px; }
.hotel-note { max-width: 520px; margin: 34px auto 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: rgb(244 236 223 / .82); }
.hotel-note a { color: var(--gold-2); text-underline-offset: 3px; }

/* questions */
.faq { max-width: 780px; margin: 34px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 4px; cursor: pointer; list-style: none; font-family: var(--serif); font-variation-settings: 'opsz' 24; font-size: 20.5px; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { margin: -6px 4px 22px; max-width: 42em; color: var(--ink-2); font-size: 16.5px; }

/* foot */
.foot { padding-block: 64px calc(44px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-night); }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 26px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 15px; }
.foot-links a { text-decoration: none; color: rgb(244 236 223 / .75); }
.foot-links a:hover { color: var(--gold-2); }
.credits { margin-top: 34px; font-size: 12.5px; line-height: 1.6; color: rgb(244 236 223 / .5); }
.credits summary { cursor: pointer; color: rgb(244 236 223 / .7); }
.credits p { margin: 10px 0 0; }
.credits a { color: inherit; text-underline-offset: 2px; }
.foot-small { margin-top: 22px; font-size: 12.5px; color: rgb(244 236 223 / .45); }

/* hotels: the phone and the room card */
.stage { position: relative; justify-self: center; width: min(100%, 470px); height: clamp(430px, 112vw, 560px); }
.phone { position: absolute; right: 0; top: 0; width: clamp(200px, 56vw, 270px); aspect-ratio: 9 / 19; padding: 9px; border-radius: 40px; background: #070b12; box-shadow: 0 0 0 1.5px rgb(217 181 107 / .5), 0 50px 90px -30px rgb(0 0 0 / .9); }
.phone-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 32px; background: var(--paper); color: var(--ink); }
.phone-notch { position: absolute; z-index: 3; top: 7px; left: 50%; width: 30%; height: 21px; border-radius: 12px; background: #070b12; transform: translateX(-50%); }
.ph-hero { position: relative; height: 40%; flex: none; }
.ph-hero img { width: 100%; height: 100%; object-fit: cover; }
.ph-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(11 22 38 / .85)); }
.ph-hero div { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 11px; color: #fff; }
.ph-hero small { display: block; font: 700 7.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); }
.ph-hero b { display: block; margin-top: 3px; font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 4.4vw, 19px); line-height: 1.05; }
.ph-rows { display: grid; gap: 6px; padding: 10px 9px; }
.ph-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: clamp(8.5px, 2.4vw, 10.5px); line-height: 1.2; }
.ph-row svg { width: 14px; height: 14px; flex: none; color: var(--gold-deep); }
.ph-row span { flex: 1; min-width: 0; }
.ph-row em { font-style: normal; color: var(--ink-3); white-space: nowrap; }
.ph-tabs { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr; align-items: end; margin-top: auto; padding: 5px 5px 10px; background: var(--card); border-top: 1px solid var(--line); font-size: clamp(6.5px, 1.9vw, 8px); text-align: center; color: var(--ink-3); }
.ph-tabs span { display: grid; justify-items: center; gap: 2px; }
.ph-tabs svg { width: 14px; height: 14px; }
.ph-tabs .on { color: var(--ink); font-weight: 700; }
.ph-bell { display: grid; place-items: center; width: 36px; height: 36px; margin: -16px auto 1px; border-radius: 50%; background: linear-gradient(180deg, #e6c37a, #b98f3f); color: #fff; box-shadow: 0 6px 14px -5px rgb(158 122 52 / .9), 0 0 0 3px var(--card); }
.ph-bell svg { width: 18px; height: 18px; }
.roomcard { position: absolute; left: 0; bottom: 0; z-index: 2; width: clamp(150px, 40vw, 205px); aspect-ratio: 5 / 7; overflow: hidden; border-radius: 10px; color: var(--cream); text-align: center; background: var(--night) center / cover; box-shadow: 0 34px 60px -24px rgb(0 0 0 / .85), 0 0 0 1px rgb(217 181 107 / .35); transform: rotate(-5deg); }
.roomcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 22 38 / .15), rgb(11 22 38 / .55) 45%, rgb(11 22 38 / .2)); }
.rc-in { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 12px 10px 0; }
.rc-in .crest { width: 30px; height: 14px; color: var(--gold); }
.rc-name { margin-top: 5px; font: 700 6.5px var(--sans); letter-spacing: .3em; color: var(--gold-2); }
.rc-title { margin: auto 0 0; font-family: var(--serif); font-size: clamp(14px, 3.9vw, 18px); line-height: 1.02; }
.rc-title em { color: var(--gold); }
.rc-arch { width: 70%; margin-top: 9px; padding: 9px 8px 8px; border-radius: 999px 999px 0 0; background: var(--cream); color: var(--ink); box-shadow: 0 0 0 2px rgb(217 181 107 / .8); }
.rc-arch svg { width: 100%; height: auto; }
.rc-arch small { display: block; margin-top: 4px; font: 700 5px var(--sans); letter-spacing: .16em; }

/* hotels: what you get */
.features { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 740px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { padding: 26px 24px 28px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.feature .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px 999px 10px 10px; background: var(--night); color: var(--gold); }
.feature .ico svg { width: 22px; height: 22px; }
.feature .h3 { margin-top: 18px; }
.feature p { margin: 9px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* hotels: the concierge */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 14px; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-night); }
.chip i { width: 9px; height: 9px; border-radius: 50%; }
.concierge { position: relative; padding: 14px; border-radius: 26px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-night), 0 40px 90px -40px rgb(0 0 0 / .9); }
.concierge .map { border-radius: 16px; box-shadow: none; }
.cg-card { position: relative; margin: -46px 14px 0; padding: 16px 16px 14px; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .7); }
.cg-card .eyebrow { font-size: 10.5px; }
.cg-card .h3 { margin-top: 5px; font-size: 20px; }
.cg-card p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.cg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.cg-btns span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border-radius: 12px; font-size: 13.5px; font-weight: 650; }
.cg-btns span:first-child { box-shadow: inset 0 0 0 1px var(--line); }
.cg-btns span:last-child { background: var(--night); color: var(--gold-2); }
.cg-btns svg { width: 15px; height: 15px; }
.example { position: absolute; top: 24px; left: 24px; z-index: 2; padding: 5px 9px; border-radius: 8px; background: rgb(11 22 38 / .7); color: rgb(244 236 223 / .7); font: 700 10px var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* hotels: plans */
.plans { display: grid; gap: 20px; max-width: 940px; margin: 44px auto 0; text-align: left; }
@media (min-width: 820px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.plan { position: relative; padding: 34px 28px 30px; border-radius: 28px; background: var(--night-2); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-night); }
.plan.best { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 1.5px var(--gold), 0 40px 80px -36px rgb(0 0 0 / .8); }
.plan-tag { position: absolute; top: -13px; left: 28px; padding: 7px 12px; border-radius: 999px; background: var(--gold); color: #1c1506; font: 750 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.plan-name { font: 700 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.plan.best .plan-name { color: var(--gold-deep); }
.plan-price { margin: 14px 0 0; font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 380; font-size: 58px; line-height: .95; letter-spacing: -.02em; }
.plan-price small { font: 600 16px var(--sans); letter-spacing: 0; opacity: .65; }
.plan-sub { margin: 10px 0 0; font-size: 14.5px; opacity: .72; }
.plan ul { display: grid; gap: 11px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.45; }
.plan:not(.best) li::before { border-color: var(--gold); }
.plan .btn { width: 100%; margin-top: 26px; }
.plan-foot { max-width: 760px; margin: 26px auto 0; font-size: 15px; color: rgb(244 236 223 / .7); }
.guarantee { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; max-width: 900px; margin: 34px auto 0; padding: 20px 24px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-night); font-size: 15px; color: rgb(244 236 223 / .82); }
.guarantee span { display: inline-flex; align-items: center; gap: 9px; }
.guarantee svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

/* reveal, only where motion is welcome and a script is there to finish it */
.js-motion .rise { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js-motion .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- the whole site ---------- */
.nav-links a[aria-current] { color: var(--gold-2); }
.menu { position: static; }
.menu summary { display: grid; place-content: center; gap: 5px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; list-style: none; box-shadow: inset 0 0 0 1.5px rgb(244 236 223 / .3); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary i { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: var(--cream); transition: transform .25s ease; }
.menu[open] summary i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu[open] summary i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 6px var(--gutter) 20px; background: rgb(11 22 38 / .98); border-bottom: 1px solid var(--line-night); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7); }
.menu nav a { padding: 15px 2px; border-bottom: 1px solid var(--line-night); font-family: var(--serif); font-variation-settings: 'opsz' 30; font-size: 24px; text-decoration: none; color: var(--cream); }
.menu nav { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.menu nav .menu-mail { border-bottom: 0; font: 600 15px var(--sans); color: rgb(244 236 223 / .7); }
.menu-label { margin: 18px 0 2px; font: 700 11px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.menu nav a { padding: 12px 2px; font-size: 21px; }
.menu nav a[aria-current] { color: var(--gold); }
@media (min-width: 880px) { .menu { display: none; } }
@media (max-width: 479px) { .nav { gap: 10px; } .brand em { display: none; } .nav > .btn { padding: 0 15px; } }
.cta-row.center { justify-content: center; }
.foot-top > div:first-child { max-width: 300px; }
.foot-line { margin: 14px 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: rgb(244 236 223 / .6); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 24px; flex: 1 1 520px; min-width: 0; max-width: 740px; }
.foot-cols div { display: grid; gap: 10px; align-content: start; }
.foot-cols .eyebrow { margin-bottom: 4px; }
.foot-cols a { text-decoration: none; color: rgb(244 236 223 / .75); font-size: 15px; }
.foot-cols a:hover { color: var(--gold-2); }

/* the apps' real screens, in a phone */
.device { position: relative; aspect-ratio: 1000 / 2104; padding: 2.6%; border-radius: 12% / 5.7%; background: linear-gradient(150deg, #1b2434, #05080d 55%); box-shadow: 0 0 0 1px rgb(217 181 107 / .42), inset 0 0 0 1px rgb(255 255 255 / .07), 0 44px 80px -34px rgb(0 0 0 / .8); }
.device img { width: 100%; height: 100%; object-fit: cover; border-radius: 10.2% / 4.8%; background: #0d1522; }

/* the home page: two cities in two arches */
@media (min-width: 940px) { .hero-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.duo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3.4vw, 30px); justify-self: center; width: min(100%, 540px); }
.duo > a { display: block; text-decoration: none; color: var(--cream); }
.duo > a:first-child { margin-top: clamp(30px, 7vw, 64px); }
.duo .arch-window { box-shadow: 0 0 0 1px rgb(217 181 107 / .55), 0 0 0 8px var(--night), 0 0 0 9px rgb(217 181 107 / .3), 0 40px 80px -30px rgb(0 0 0 / .85); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.duo > a:hover .arch-window { transform: translateY(-6px); }
.duo-label { display: block; margin-top: 24px; text-align: center; font-family: var(--serif); font-variation-settings: 'opsz' 40; font-size: clamp(24px, 3.6vw, 32px); line-height: 1; }
.duo-label small { display: block; margin-top: 9px; font: 650 10.5px/1.35 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.cities { display: grid; gap: 26px; margin-top: 44px; }
@media (min-width: 900px) { .cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } }
.city { display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: var(--night); color: var(--cream); box-shadow: 0 50px 90px -50px rgb(11 22 38 / .75); }
.city-pic { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.city-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.city:hover .city-pic img { transform: scale(1.04); }
.city-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, var(--night)); }
.city-body { position: relative; display: flex; flex-direction: column; flex: 1; margin-top: -66px; padding: 0 clamp(22px, 4vw, 34px) clamp(26px, 4vw, 34px); }
.city-name { margin: 0; font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 360; font-size: clamp(48px, 8vw, 68px); line-height: 1; letter-spacing: -.02em; }
.city-name a { text-decoration: none; }
.city-name [lang='ar'] { margin-left: 6px; font-size: .44em; color: var(--gold); vertical-align: middle; }
.city-kicker { margin: 12px 0 0; font-family: var(--serif); font-variation-settings: 'opsz' 24; font-style: italic; font-size: 20px; line-height: 1.3; color: var(--gold-2); }
.city-body > p:not(.city-kicker) { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: rgb(244 236 223 / .76); }
.city-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.city-facts li { padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-night); font-size: 13.5px; line-height: 1.2; color: rgb(244 236 223 / .82); }
.city .cta-row { margin-top: auto; padding-top: 26px; }
.listen-sec { position: relative; overflow: hidden; }
.listen-sec .stars { opacity: .4; }
.listen-duo { position: relative; display: grid; gap: 56px 34px; max-width: 900px; margin: 54px auto 0; }
@media (min-width: 820px) { .listen-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.listen-city { margin: 0 0 22px; text-align: center; font-family: var(--serif); font-variation-settings: 'opsz' 40; font-size: 28px; line-height: 1; }
.listen.solo { width: min(100%, 390px); margin: 0 auto; }
.band { position: relative; overflow: hidden; }
.band-pic { margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 0 0 1px rgb(217 181 107 / .35), 0 40px 90px -40px rgb(0 0 0 / .9); }
.paper .band-pic { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgb(11 22 38 / .5); }
.band-pic img { width: 100%; height: auto; }

/* Paris: the living map, the film's chapters, the buildings, then and now */
.video-frame { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: var(--sea); box-shadow: 0 0 0 1px rgb(217 181 107 / .35), 0 40px 90px -40px rgb(0 0 0 / .9); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-frame figcaption { position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 8px; background: rgb(6 14 26 / .74); font-size: 12px; color: rgb(244 236 223 / .78); }
.chapters { max-width: 540px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: ch; border-top: 1px solid var(--line-night); }
.chapters li { counter-increment: ch; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-night); }
.chapters li::before { content: counter(ch); font: italic 400 19px/1 var(--serif); color: var(--gold); }
.chapters b { font-family: var(--serif); font-variation-settings: 'opsz' 24; font-weight: 400; font-size: 19px; line-height: 1.25; }
.chapters span { font-size: 13px; color: rgb(244 236 223 / .6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.feat { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .feat { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; } .feat.flip > :first-child { order: 2; } }
.feat .device { width: min(70vw, 300px); margin-inline: auto; }
.feat .sub + .sub { margin-top: 14px; }
.ticks { display: grid; gap: 12px; max-width: 36em; margin: 26px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.night .ticks li { color: rgb(244 236 223 / .78); }
.ticks li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 13px; height: 7px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }
.night .ticks li::before { border-color: var(--gold); }
.compare { position: relative; margin: 40px 0 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 22px; background: var(--night); box-shadow: 0 40px 80px -40px rgb(11 22 38 / .6); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .then { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); filter: sepia(.2) contrast(1.05); }
.compare .bar { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 12px rgb(0 0 0 / .5); pointer-events: none; }
.compare .knob { position: absolute; top: 50%; left: var(--pos, 50%); display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--gold); color: var(--night); box-shadow: 0 10px 24px rgb(0 0 0 / .45); pointer-events: none; }
.compare .knob svg { width: 22px; height: 22px; }
.compare .tag { position: absolute; top: 14px; padding: 6px 10px; border-radius: 8px; background: rgb(11 22 38 / .74); color: var(--cream); font: 700 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.compare .tag.l { left: 14px; }
.compare .tag.r { right: 14px; }
.compare input { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.compare:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
.plans.three { max-width: 1120px; }
@media (min-width: 820px) { .plans.three { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
@media (min-width: 980px) { .plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1120px; } }
.launch { display: inline-flex; align-items: center; gap: 12px; margin: 28px auto 0; padding: 12px 20px; border-radius: 18px; background: rgb(217 181 107 / .12); box-shadow: inset 0 0 0 1px rgb(217 181 107 / .55); color: var(--gold-2); font-size: 15.5px; line-height: 1.4; text-align: left; }
.launch svg { width: 18px; height: 18px; flex: none; }

/* the maps: the Seine, the walks' numbers set aside, the map held in view beside a long list */
.map .river path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map .river .bank { stroke: rgb(217 181 107 / .42); stroke-width: 17; }
.map .river .bank.arm { stroke-width: 10.5; }
.map .river .water { stroke: var(--sea); stroke-width: 14.5; }
.map .river .water.arm { stroke-width: 8; }
.map .pin .lead { fill: none; stroke: rgb(217 181 107 / .6); stroke-width: 1; }
.map .pin circle.start { fill: var(--gold); stroke: none; }
@media (min-width: 1000px) { .map-grid .map { position: sticky; top: 86px; } }
.walk-free { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: rgb(217 181 107 / .16); color: var(--gold-2); font: 700 10px/1.3 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px; }

/* hotels: the demonstration hotel's screens and its room card */
.stage.real { height: auto; width: min(100%, 460px); display: flex; justify-content: flex-end; padding: 0 0 40px; }
.stage.real .device { width: clamp(200px, 56vw, 264px); }
.card-real { position: absolute; left: -1%; bottom: 4px; z-index: 2; width: clamp(126px, 33vw, 172px); height: auto; border-radius: 8px; box-shadow: 0 34px 60px -24px rgb(0 0 0 / .85), 0 0 0 1px rgb(217 181 107 / .45); transform: rotate(-6deg); }
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: min(64vw, 270px); gap: 22px; margin: 40px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--paper-2) transparent; }
@media (min-width: 900px) { .shots { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-inline: 0; padding: 30px 0 10px; overflow: visible; } .shots .shot:nth-child(2) { transform: translateY(-26px); } }
.shot { margin: 0; scroll-snap-align: center; }
.shot .device { width: 100%; max-width: 270px; margin-inline: auto; }
.shot figcaption { max-width: 300px; margin: 22px auto 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.shot figcaption b { display: block; margin-bottom: 5px; font-family: var(--serif); font-variation-settings: 'opsz' 24; font-weight: 450; font-size: 21px; line-height: 1.2; color: var(--ink); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 26px); width: min(100%, 560px); margin-inline: auto; padding-bottom: 44px; }
.pair .device:last-child { transform: translateY(44px); }

/* the page that is not there */
.lost { min-height: 72vh; display: grid; align-items: center; text-align: center; }
.lost .wrap { display: grid; justify-items: center; }
.lost-crest { width: 92px; height: 43px; margin-bottom: 8px; color: var(--gold); }
.lost .lede { margin-inline: auto; }
.lost .cta-row { justify-content: center; }

/* ---------- the hotel side ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-links { align-items: center; }
.nav-links a.quiet { font-size: 14px; color: rgb(244 236 223 / .55); }
/* the panel hangs from the bar itself, aligned to its right edge, so it never runs off the screen */
.dd { position: static; }
.dd-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: rgb(244 236 223 / .78); font: inherit; font-size: 15px; cursor: pointer; }
.dd-btn:hover, .dd.open .dd-btn { color: var(--gold-2); }
.dd-btn svg { width: 15px; height: 15px; transition: transform .2s; }
.dd.open .dd-btn svg, .dd:hover .dd-btn svg { transform: rotate(180deg); }
.dd-panel { position: absolute; z-index: 70; top: calc(100% - 4px); right: var(--gutter); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 6px 22px; width: 680px; padding: 18px; border-radius: 22px; background: rgb(11 22 38 / .985); box-shadow: 0 0 0 1px var(--line-night), 0 40px 80px -30px rgb(0 0 0 / .85); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.dd:hover .dd-panel, .dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; }
.dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
.dd-col .eyebrow { margin: 6px 10px 8px; font-size: 11px; }
.dd-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 10px; border-radius: 14px; text-decoration: none; color: var(--cream); }
.dd-item:hover, .dd-item[aria-current] { background: rgb(217 181 107 / .09); }
.dd-item .ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px 999px 9px 9px; background: rgb(217 181 107 / .12); color: var(--gold); }
.dd-item .ico svg { width: 18px; height: 18px; }
.dd-item b { display: block; font-family: var(--serif); font-variation-settings: 'opsz' 24; font-weight: 450; font-size: 17px; line-height: 1.2; }
.dd-item small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: rgb(244 236 223 / .58); }
.dd-made > a:not(.dd-demo) { display: block; padding: 9px 10px; border-radius: 12px; text-decoration: none; font-size: 15px; color: rgb(244 236 223 / .82); }
.dd-made > a:not(.dd-demo):hover { background: rgb(217 181 107 / .09); color: var(--gold-2); }
.dd-demo { display: block; margin-top: 12px; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, rgb(217 181 107 / .2), rgb(217 181 107 / .06)); box-shadow: inset 0 0 0 1px rgb(217 181 107 / .35); text-decoration: none; }
.dd-demo b { display: block; font-family: var(--serif); font-weight: 450; font-size: 17px; color: var(--gold-2); }
.dd-demo small { display: block; margin-top: 3px; font-size: 13px; color: rgb(244 236 223 / .65); }
.foot-cta { margin-top: 20px; }

/* a part of the product, told in rows of screen and text */
.frows { display: grid; gap: clamp(56px, 9vw, 110px); }
.frow { display: grid; gap: 34px; align-items: center; scroll-margin-top: 90px; }
@media (min-width: 900px) { .frow { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 76px; } .frow:nth-child(even) .frow-media { order: 2; } }
.frow-media .device { width: min(66vw, 280px); margin-inline: auto; }
.frow-media .phones { width: min(100%, 460px); margin-inline: auto; padding-bottom: 0; }
.frow-media .phones .device { width: clamp(150px, 40vw, 230px); }
.h2.h2s { font-size: clamp(28px, 5.2vw, 42px); line-height: 1.08; }
.frow-copy .sub { max-width: 34em; }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 650; font-size: 15.5px; color: var(--gold-deep); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.night .more { color: var(--gold); }
.more svg { width: 17px; height: 17px; }
.uses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.uses a { padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--ink); text-decoration: none; }
.uses a:hover { box-shadow: inset 0 0 0 1.5px var(--gold-deep); }
.phones { position: relative; display: flex; justify-content: center; align-items: flex-start; justify-self: center; width: min(100%, 480px); padding-bottom: 40px; }
.phones .device { width: clamp(158px, 42vw, 238px); flex: none; }
.phones .device + .device { margin: 64px 0 0 -46px; }
.hero-card { justify-self: center; width: min(100%, 580px); }
.hero-qr { justify-self: center; width: min(100%, 330px); }
.card-solo { display: block; width: min(62vw, 260px); height: auto; margin-inline: auto; border-radius: 10px; box-shadow: 0 34px 60px -26px rgb(11 22 38 / .7), 0 0 0 1px rgb(217 181 107 / .45); transform: rotate(-3deg); }
.stage-browser { position: relative; justify-self: center; width: min(100%, 560px); padding-bottom: 46px; }
.stage-browser > .device { position: absolute; right: -2%; bottom: 0; width: clamp(118px, 30vw, 168px); }
.browser { margin: 0; overflow: hidden; border-radius: 14px; background: #0d1522; box-shadow: 0 0 0 1px rgb(217 181 107 / .4), 0 44px 80px -34px rgb(0 0 0 / .8); }
.paper .browser { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgb(11 22 38 / .55); }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #161f2e; border-bottom: 1px solid rgb(244 236 223 / .08); }
.browser-bar i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: rgb(244 236 223 / .2); }
.browser-bar span { flex: 1; min-width: 0; margin-left: 10px; padding: 0 10px; border-radius: 6px; background: rgb(244 236 223 / .07); font-size: 11px; line-height: 20px; color: rgb(244 236 223 / .5); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser img { display: block; width: 100%; height: auto; }
.frow-media .browser { width: min(100%, 520px); margin-inline: auto; }
.qr-arch { width: min(100%, 300px); margin: 0 auto; padding: 46px 30px 26px; border-radius: 999px 999px 24px 24px; background: var(--cream); color: var(--ink); text-align: center; box-shadow: 0 0 0 5px var(--night), 0 0 0 6.5px rgb(217 181 107 / .7), 0 34px 70px -24px rgb(0 0 0 / .6); }
.qr-arch .crest { width: 54px; height: 26px; margin: 0 auto 16px; color: var(--gold-deep); }
.qr-arch svg.qr { display: block; width: 100%; height: auto; }
.qr-arch small { display: block; margin-top: 14px; font: 700 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.mail { width: min(100%, 440px); margin-inline: auto; padding: 22px 22px 18px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -36px rgb(11 22 38 / .5); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.mail p { margin: 0 0 12px; }
.mail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 650; color: var(--ink); }
.mail .example { position: static; background: var(--paper-2); color: var(--ink-3); }
.mail-line { padding: 12px 14px; border-radius: 12px; background: rgb(217 181 107 / .16); box-shadow: inset 0 0 0 1px rgb(158 122 52 / .35); font-family: var(--serif); font-style: italic; font-size: 16.5px; color: var(--ink); overflow-wrap: anywhere; }

/* a stay, from the booking to the last morning */
.journey { display: grid; gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.journey li { position: relative; padding: 24px 22px 26px; border-radius: 22px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-night); }
.journey .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px 999px 10px 10px; background: var(--gold); color: var(--night); }
.journey .ico svg { width: 21px; height: 21px; }
.journey .when { margin: 18px 0 0; font: 700 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.journey .h3 { margin-top: 8px; font-size: 21px; }
.journey p:not(.when) { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: rgb(244 236 223 / .74); }

/* the guide in numbers, and everything included */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; margin: 42px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stats li { padding-top: 16px; border-top: 1px solid var(--line-night); }
.stats b { display: block; font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 360; font-size: clamp(42px, 6vw, 58px); line-height: 1; letter-spacing: -.02em; color: var(--gold-2); }
.stats span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.35; color: rgb(244 236 223 / .72); }
.fgrid { display: grid; gap: 12px; margin-top: 40px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fcard { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: box-shadow .2s, transform .2s; }
.fcard:hover { box-shadow: inset 0 0 0 1.5px var(--gold-deep); transform: translateY(-2px); }
.fcard .ico, .pcard .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px 999px 9px 9px; background: var(--night); color: var(--gold); }
.fcard .ico svg, .pcard .ico svg { width: 19px; height: 19px; }
.fcard b { display: block; font-family: var(--serif); font-variation-settings: 'opsz' 24; font-weight: 450; font-size: 17.5px; line-height: 1.25; }
.fcard small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.pgrid { display: grid; gap: 14px; margin-top: 34px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pcard { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: box-shadow .2s, transform .2s; }
.pcard:hover { box-shadow: inset 0 0 0 1.5px var(--gold-deep); transform: translateY(-2px); }
.pcard .ico { margin-bottom: 8px; }
.pcard b { font-family: var(--serif); font-variation-settings: 'opsz' 30; font-weight: 450; font-size: 21px; line-height: 1.2; }
.pcard small { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pcard .more { margin-top: auto; padding-top: 14px; font-size: 14.5px; }
.more-product { padding-top: 0; }
.cta-band { position: relative; overflow: hidden; }
.cta-band .stars { opacity: .45; }
.band-crest { width: 72px; height: 34px; margin: 0 auto 16px; color: var(--gold); }
.cta-band .sec-head { position: relative; }

/* pricing: the plans compared, and the cost of each stay */
.pricing-hero { text-align: center; }
.pricing-hero .display { margin-inline: auto; max-width: 15em; }
.center-lede { margin-inline: auto; }
.ptable-wrap { max-width: 940px; margin: 44px auto 0; overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 15.5px; text-align: left; }
.ptable th, .ptable td { padding: 15px 14px; border-bottom: 1px solid var(--line-night); vertical-align: middle; }
.ptable thead th { font: 700 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ptable thead th small { display: block; margin-top: 6px; font: 400 16px var(--serif); letter-spacing: 0; text-transform: none; color: var(--cream); }
.ptable tbody th { font-weight: 400; color: rgb(244 236 223 / .88); }
.ptable td { width: 25%; text-align: center; color: rgb(244 236 223 / .8); font-size: 14.5px; }
.ptable thead th:not(:first-child) { text-align: center; }
.ptable .yes { color: var(--gold); }
.ptable .yes svg { width: 20px; height: 20px; }
.ptable .no { color: rgb(244 236 223 / .3); font-size: 22px; }
@media (max-width: 599px) { .ptable { font-size: 14px; } .ptable th, .ptable td { padding: 12px 6px; } .ptable td { width: 27%; font-size: 13px; } .ptable thead th { font-size: 10.5px; letter-spacing: .14em; } .ptable thead th small { font-size: 14px; } }
.plan-foot a { color: var(--gold-2); }
.calc { display: grid; gap: 22px; margin-top: 40px; padding: clamp(22px, 4vw, 36px); border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; } }
.calc-in { display: grid; gap: 22px; align-content: start; }
.calc label { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: baseline; font-size: 15px; color: var(--ink-2); }
.calc label b { font-family: var(--serif); font-weight: 450; font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc input[type='range'] { grid-column: 1 / -1; width: 100%; accent-color: var(--gold-deep); }
.calc-seg { display: inline-flex; justify-self: start; padding: 4px; border-radius: 999px; background: var(--paper-2); }
.calc-seg button { padding: 9px 18px; border: 0; border-radius: 999px; background: none; font-weight: 650; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.calc-seg button[aria-pressed='true'] { background: var(--night); color: var(--cream); }
.calc-out { display: grid; gap: 16px; align-content: start; padding: 26px 24px; border-radius: 20px; background: var(--night); color: var(--cream); }
.calc-out div { padding-bottom: 14px; border-bottom: 1px solid var(--line-night); }
.calc-out div:last-child { padding-bottom: 0; border-bottom: 0; }
.calc-out b { display: block; font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 360; font-size: 46px; line-height: 1; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.calc-out span { display: block; margin-top: 6px; font-size: 14.5px; color: rgb(244 236 223 / .72); }
.calc-note { grid-column: 1 / -1; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* the demonstration hotel, how it goes live, and booking a visit */
.try { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: t; max-width: 560px; }
.try li { counter-increment: t; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.night .try li { color: rgb(244 236 223 / .84); }
.try li::before { content: counter(t); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gold-deep); color: var(--gold-deep); font: 700 13px var(--sans); }
.night .try li::before { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-2); }
.visit-card { justify-self: center; width: min(100%, 460px); padding: 30px 28px; border-radius: 26px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-night), 0 40px 80px -40px rgb(0 0 0 / .8); }
.visit-card .try { margin-top: 18px; }
.visit-mail { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-night); font-family: var(--serif); font-size: 20px; color: var(--gold-2); }
.cols2 { display: grid; gap: 18px; margin-top: 26px; }
@media (min-width: 860px) { .cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.col-card { padding: 28px 26px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.col-card .ticks { margin-top: 18px; }
.night .shot figcaption { color: rgb(244 236 223 / .68); }
.night .shot figcaption b { color: var(--cream); }
.shots.rail-shots { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(60vw, 230px); gap: 26px; margin: 40px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) 26px; overflow-x: auto; scrollbar-color: var(--night-3) transparent; }
.shots.rail-shots .shot { transform: none; }
@media (min-width: 1080px) { .features.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the product pages, made to read at a glance ---------- */
/* a screen on a golden arch, with a few labels pointing at what matters */
.annot { position: relative; display: grid; justify-items: center; justify-self: center; width: min(100%, 560px); margin: 0; padding: 30px 0 12px; }
.annot-arch { position: absolute; top: 0; bottom: 0; left: 50%; width: min(80%, 370px); transform: translateX(-50%); border-radius: 999px 999px 30px 30px; background: radial-gradient(120% 70% at 50% 0%, rgb(217 181 107 / .24), rgb(217 181 107 / .05) 72%); box-shadow: inset 0 0 0 1px rgb(217 181 107 / .25); }
.annot > .device { position: relative; width: clamp(210px, 58vw, 276px); }
.callouts { display: contents; }
.callout { position: absolute; top: var(--y); z-index: 3; display: inline-flex; align-items: center; gap: 9px; max-width: 190px; padding: 9px 14px 9px 12px; border-radius: 999px; background: var(--cream); color: var(--ink); font: 650 13px/1.25 var(--sans); box-shadow: 0 16px 34px -14px rgb(0 0 0 / .75), 0 0 0 1px rgb(217 181 107 / .5); transform: translateY(-50%); }
.callout::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-deep); box-shadow: 0 0 0 4px rgb(217 181 107 / .35); }
.callout.l { right: calc(50% + 104px); }
.callout.r { left: calc(50% + 104px); }
@media (max-width: 759px) {
  .annot { padding-bottom: 0; }
  .callouts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; position: relative; z-index: 3; }
  .callout { position: static; transform: none; max-width: none; }
}
/* a screen on a softer arch, for the rows on paper */
.arch-panel { position: relative; display: grid; justify-items: center; padding-top: 36px; }
.arch-panel::before { content: ''; position: absolute; top: 0; bottom: 34px; left: 50%; width: min(88%, 390px); transform: translateX(-50%); border-radius: 999px 999px 30px 30px; background: linear-gradient(180deg, rgb(217 181 107 / .26), rgb(217 181 107 / .06)); box-shadow: inset 0 0 0 1px rgb(158 122 52 / .16); }
.arch-panel > * { position: relative; }
.frow-media .arch-panel .device { width: min(64vw, 290px); }
.frow-media .arch-panel .phones { padding-bottom: 34px; }
.frow-media .arch-panel .phones .device { width: clamp(140px, 40vw, 236px); }
.frow-media .arch-panel .mail, .frow-media .arch-panel .chat, .frow-media .arch-panel .card-solo { margin-bottom: 44px; margin-top: 30px; }
.lead { margin: 16px 0 0; max-width: 31em; font-family: var(--serif); font-variation-settings: 'opsz' 18; font-size: clamp(19px, 2.1vw, 21px); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.night .lead { color: var(--cream); }
.frow-copy .ticks { margin-top: 22px; }
.frow-copy .ticks li { font-size: 16.5px; }
.frows { gap: clamp(64px, 10vw, 128px); margin-top: clamp(40px, 6vw, 64px); }
/* what it does for the hotel, in four */
.bgrid { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 760px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bcard { position: relative; padding: 30px 24px 28px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -40px rgb(11 22 38 / .5); }
.bcard::before { content: ''; position: absolute; top: 0; left: 24px; width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.bnum { font: italic 400 16px/1 var(--serif); color: var(--gold-deep); }
.bcard h3 { margin: 16px 0 0; font-family: var(--serif); font-variation-settings: 'opsz' 36; font-weight: 420; font-size: clamp(23px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.bcard p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
/* before and after */
.ba-sec { position: relative; overflow: hidden; }
.ba-sec .stars { opacity: .4; }
.ba { position: relative; display: grid; gap: 18px; max-width: 1000px; margin: 42px auto 0; }
@media (min-width: 820px) { .ba { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; } }
.ba-col { padding: 30px 28px 32px; border-radius: 26px; }
.ba-col.without { background: rgb(244 236 223 / .035); box-shadow: inset 0 0 0 1px var(--line-night); }
.ba-col.with { background: var(--cream); color: var(--ink); box-shadow: 0 0 0 1.5px var(--gold), 0 40px 80px -36px rgb(0 0 0 / .8); }
.ba-label { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 12px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.ba-label .crest { width: 38px; height: 18px; color: var(--gold-deep); }
.without .ba-label { color: rgb(244 236 223 / .5); }
.with .ba-label { color: var(--gold-deep); }
.ba ul { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.ba li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.45; }
.without li { color: rgb(244 236 223 / .66); }
.without li::before { content: ''; position: absolute; left: 3px; top: 12px; width: 14px; height: 1.5px; border-radius: 2px; background: rgb(244 236 223 / .38); }
.with li { font-weight: 500; }
.with li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 13px; height: 7px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }
/* the tour: the guest's side, screen by screen */
.tour-tabs { display: flex; gap: 8px; margin: 30px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 10px; overflow-x: auto; scrollbar-width: none; }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 600 14.5px var(--sans); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.tour-tabs button span { font: italic 400 14px var(--serif); color: var(--gold-deep); }
.tour-tabs button:hover { box-shadow: inset 0 0 0 1.5px var(--gold-deep); }
.tour-tabs button[aria-selected='true'] { background: var(--night); color: var(--cream); box-shadow: none; }
.tour-tabs button[aria-selected='true'] span { color: var(--gold); }
.tour-body { display: grid; gap: 34px; align-items: center; margin-top: 24px; }
@media (min-width: 900px) { .tour-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } .tour-copy { min-height: 330px; } }
.tour-media { touch-action: pan-y; }
.tour-device { display: grid; width: min(66vw, 300px); }
.tour-device img { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease; }
.tour-device img.on { opacity: 1; }
.tour-panel[hidden] { display: none; }
.tour-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 30px; }
.tour-nav button { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--night); color: var(--gold); cursor: pointer; transition: transform .15s; }
.tour-nav button:active { transform: scale(.95); }
.tour-nav button svg { width: 20px; height: 20px; }
.tour-note { margin-left: 8px; font-size: 13.5px; color: var(--ink-3); }
/* a message sent to us, and a note that Beirut opens soon */
.chat { width: min(100%, 400px); margin-inline: auto; padding: 18px 18px 22px; border-radius: 22px; background: var(--night); box-shadow: 0 30px 60px -30px rgb(11 22 38 / .6); }
.chat-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-night); font-weight: 650; font-size: 14.5px; color: var(--cream); }
.chat .example { position: static; }
.bubble { max-width: 84%; margin: 12px 0 0; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.bubble.out { margin-left: auto; background: var(--gold); color: #1c1506; border-bottom-right-radius: 5px; }
.bubble.in { background: var(--night-3); color: var(--cream); border-bottom-left-radius: 5px; }
.soon { padding-block: clamp(48px, 7vw, 80px); }
.soon-card { display: grid; gap: 22px; align-items: start; padding: clamp(24px, 4vw, 40px); border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgb(11 22 38 / .5); }
@media (min-width: 760px) { .soon-card { grid-template-columns: 90px minmax(0, 1fr); } }
.soon-card .crest { width: 84px; height: 40px; color: var(--gold-deep); }
.prices-paper .plan.best { background: var(--card); box-shadow: 0 0 0 1.5px var(--gold-deep), 0 40px 80px -40px rgb(11 22 38 / .45); }

/* what Flâne earns: the calculator's groups and its total, the earnings on the home page, and the price in words */
.calc-group { margin: 6px 0 -6px; font: 700 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.calc-group ~ .calc-group { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.calc-out .calc-total b { font-size: clamp(48px, 6vw, 60px); }
.calc-out i { font-style: normal; color: var(--gold-2); white-space: nowrap; }
.plan-price.words { font-size: clamp(32px, 4vw, 40px); line-height: 1.05; }
.price-or { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }
.earn-sec .sub { margin-inline: auto; }
.stats.earn { max-width: 900px; margin-inline: auto; text-align: center; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) { .stats.earn { grid-template-columns: minmax(0, 1fr); } }
.paper .stats li { border-top-color: var(--line); }
.paper .stats b { color: var(--gold-deep); }
.paper .stats span { color: var(--ink-2); }

/* a page of plain paragraphs, such as the privacy notice */
.legal { max-width: 46rem; }
.legal .h2s { margin-top: 44px; }
.legal .h2s:first-child { margin-top: 0; }
.legal p { margin: 14px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.legal a { color: inherit; text-underline-offset: 3px; }
.legal .legal-date { margin-top: 36px; font-size: 14.5px; }