/* Mercury website, motion prototype. DRAFT, September 30, 2026.
   Layout concept: one dark page; the artboards at 1440 and 390 px, joined by
   a fluid range (1024 to 1440 scales type with clamp; below 1024 is the phone layout).
   Single dark theme by design: every color is set explicitly, so the page reads
   the same on a light or dark host. */

@property --fill { syntax: '<angle>'; inherits: true; initial-value: 246deg; }
@property --lean { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

/* Display serif: Editorial Today Regular, self hosted from fonts/ (added October 1, 2026).
   Replaces the Instrument Serif stand in on this preview so the pairing can be judged in a real browser.
   License: Visinex holds a commercial license through Envato (confirmed October 1, 2026); context/brand-and-voice.md section 2 still lists it as OPEN until Matthew accepts it. */
@font-face {
  font-family: 'Editorial Today';
  src: url('fonts/EditorialToday-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* color */
  --ground: #0E0E0E;
  --ground-deep: #0B0C10;
  --navy: #1A2130;
  --navy-lift: #232B3D;
  --ink: #FFFFFF;
  --text: #E4E4E4;
  --muted: #A9B2C0;
  --dim: #6F7888;
  --soft: #E3E8EF;
  --hair: #1F242E;
  --line: #2A303C;
  --line-up: #3A4252;
  --bezel: #07080B;
  --accent: #9CC3EC;          /* clickable things only */
  --ios-blue: #0A84FF;        /* Apple Messages, inside the phone only */
  /* type */
  --serif: 'Editorial Today', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* motion tokens (spec section 2) */
  --m-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --m-move: cubic-bezier(0.65, 0, 0.35, 1);
  --m-exit: cubic-bezier(0.4, 0, 1, 1);
  --t-quick: 160ms;
  --t-base: 320ms;
  --t-settle: 700ms;
  --t-slow: 900ms;
  /* layout */
  --gutter: 16px;
  --max: 1440px;
  background: #0E0E0E;
  color: #FFFFFF;
}
@media (min-width: 1024px) {
  :root { --gutter: clamp(40px, 4.444vw, 64px); }
}

html { background: #0E0E0E; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #0E0E0E;
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; }
.page { overflow-x: clip; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
section[id] { scroll-margin-top: 24px; }
@media (min-width: 1024px) { section[id] { scroll-margin-top: 96px; } }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { box-sizing: border-box; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 1023.98px) {
  .wrap { max-width: calc(680px + 2 * var(--gutter)); }
  .d-only { display: none !important; }
}
@media (min-width: 1024px) { .m-only { display: none !important; } }

/* ---------- type ---------- */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.03em; }
.hmask {
  overflow: hidden;
  padding: 0.14em 0.08em 0.22em;
  margin: -0.14em -0.08em -0.22em;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.hmask > * { display: block; margin: 0; font: inherit; letter-spacing: inherit; text-wrap: balance; }

/* One type scale for the whole page (Visinex, October 6, 2026). Before this, every section had its own title size
   (64 to 140 px at 1440) and its own paragraph size (16 to 22 px), and on a laptop several sections no longer fit
   the window. Now:
   - h1: the hero title, the only one on the page.
   - h2: every section title, one size.
   - h3: titles inside a section (the hotel and doors panels, the tier names, the serif lines under a section title).
   - lede: the paragraph under a section title. body: text inside cards and panels. small: notes and fine print.
   On desktop the display sizes follow the window's width or its height, whichever is smaller, so on a short laptop
   window a title steps down instead of pushing its section past the bottom of the screen. */
:root {
  --fs-h1: 60px;
  --fs-h2: 44px;
  --fs-h3: 32px;
  --lh-h1: 0.96;
  --lh-h2: 1.02;
  --lh-h3: 1.06;
  --fs-lede: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --lh-text: 1.6;
}
@media (min-width: 1024px) {
  :root {
    --fs-h1: clamp(64px, min(6.667vw, 11.5vh), 104px);
    --fs-h2: clamp(46px, min(4.444vw, 7.8vh), 68px);
    --fs-h3: clamp(30px, min(2.639vw, 4.6vh), 40px);
    --fs-lede: clamp(18px, 1.389vw, 20px);
    --fs-body: 16px;
    --fs-small: 14px;
  }
}
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.lede { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #E4E4E4; font-weight: 300; max-width: 62ch; }
.lede--muted { color: #A9B2C0; }

/* Section rhythm on desktop: the same padding above and below every section, and the same gap between a section's
   title block and its content. Both shrink with the window's height, so a section fits a laptop screen. */
@media (min-width: 1024px) {
  :root {
    --sec-pad: clamp(72px, 12vh, 120px);
    --sec-gap: clamp(36px, 6vh, 64px);
  }
}

/* ---------- buttons and controls ---------- */
/* Download the App: a square frosted glass button with a north east arrow (after Visinex's site).
   Hover or keyboard focus: a white fill rises from the bottom, the label turns dark as it passes,
   and the arrow nudges 2px toward the upper right. Nothing in the button changes size or position.
   The button sits on its own compositing layer at all times (translateZ) so Safari never swaps
   layers or text rendering at the moment of hover, which is what made the label jiggle sideways. */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-sizing: border-box;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.btn__fill { position: absolute; inset: 0; z-index: -1; background: #FFFFFF; transform: translate3d(0, 101%, 0); transition: transform 600ms var(--m-enter); will-change: transform; }
.btn__text { position: relative; display: inline-flex; align-items: center; gap: 10px; transition: color 400ms var(--m-enter); }
/* the App Store mark before the label; it takes the label colour, so it inverts with the hover fill */
.btn__apple { flex: none; width: 1.05em; height: 1.05em; margin-top: -0.12em; color: currentColor; }
.btn__arrow { position: relative; flex: none; width: 12px; height: 12px; color: currentColor; transition: transform 400ms var(--m-enter), color 400ms var(--m-enter); }
.btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; color: #0E0E0E; }
.btn:focus-visible .btn__fill { transform: translate3d(0, 0, 0); }
.btn:focus-visible .btn__arrow { transform: translate3d(2px, -2px, 0); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: #0E0E0E; }
  .btn:hover .btn__fill { transform: translate3d(0, 0, 0); }
  .btn:hover .btn__arrow { transform: translate3d(2px, -2px, 0); }
}
.btn:active { color: #0E0E0E; }
.btn:active .btn__fill { transform: translate3d(0, 0, 0); transition-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  .btn__fill, .btn__arrow, .btn__text { transition: none !important; }
  .btn__fill { transform: none; opacity: 0; }
  .btn:hover .btn__fill, .btn:focus-visible .btn__fill, .btn:active .btn__fill { opacity: 1; }
  .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: none; }
}
.btn--sm { height: 44px; padding: 0 16px; gap: 14px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 24px; font-size: 16px; min-width: 300px; }
.btn--bar { height: 48px; padding: 0 18px; gap: 16px; font-size: 15px; }
@media (min-width: 1024px) {
  .btn--sm { padding: 0 20px; gap: 18px; font-size: 15px; }
  .btn--lg { height: 58px; min-width: 333px; font-size: 17px; }
}

/* the green pulse beside "accepting members by application" (after Visinex's site) */
.pulse { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -4px 8px -4px 0; vertical-align: middle; }
.pulse::before, .pulse::after { content: ""; position: absolute; border-radius: 50%; background: #7BFF00; opacity: 0.2; }
.pulse::before { inset: 0; }
.pulse::after { inset: 4.5px; }
.pulse span { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #7BFF00; box-shadow: 0 0 8px #7BFF00; }
@media (prefers-reduced-motion: no-preference) {
  .pulse::before { animation: m-ping 2.2s var(--m-enter) infinite; }
}
@keyframes m-ping { 0% { transform: scale(0.6); opacity: 0.45; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

.ctl {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 6px;
  min-width: 44px;
  min-height: 44px;
  font: 500 15px/1 var(--sans);
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(156, 195, 236, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--t-quick) linear;
}
@media (hover: hover) and (pointer: fine) { .ctl:hover { text-decoration-color: var(--accent); } }

/* ---------- header ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0E0E0E;
  border-bottom: 1px solid #1F242E;
  opacity: 0;
  transition: opacity 200ms linear;
}
.site-header.is-solid::before { opacity: 1; }
.header-inner {
  position: relative;
  box-sizing: border-box;
  max-width: var(--max);
  height: 68px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo { display: block; }
.header-logo img { display: block; height: 22px; width: auto; }
.header-nav { display: flex; align-items: center; gap: 16px; font-size: 15px; color: #E4E4E4; }
.nav-link { position: relative; padding: 6px 0; color: #E4E4E4; text-decoration: none; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-quick) var(--m-enter);
}
.nav-link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { color: #FFFFFF; }
  .nav-link:hover::after { transform: scaleX(1); }
}
@media (min-width: 1024px) {
  html.js .site-header { position: fixed; }
  .header-inner { height: 96px; }
  .header-logo img { height: 30px; }
  .header-nav { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before, .nav-link::after { transition: none; }
}

/* ---------- phone frames (shared) ----------
   Every app screen is drawn at true iPhone size, 393 by 852 points (1 pt = 1 px at scale 1),
   inside a device of 419 by 878: a 9 pt black glass border and a 4 pt titanium band, with
   side buttons, a glass sheen and layered shadows. .fit reserves the scaled footprint. */
.fit { --s: 1; --pw: 419px; --ph: 878px; position: relative; width: calc(var(--pw) * var(--s)); height: calc(var(--ph) * var(--s)); flex: none; }
.fit > .phone { width: var(--pw); height: var(--ph); transform: scale(var(--s)); transform-origin: 0 0; }
.fit--hero { --s: 0.78; }
.fit--profile { --s: 0.716; }
.fit--trips { --s: 0.8115; }
.fit--msg { --s: 0.716; }
.fit--mini { --s: 0.5012; }
@media (min-width: 1024px) { .fit--profile, .fit--msg { --s: 0.8115; } }
/* laptop windows: the hero and Mercury Plus phones step down with the window's height, so each fits the screen
   under the header (Visinex, October 6, 2026; the pinned Trips phone has its own steps in its section) */
@media (min-width: 1024px) and (max-height: 900px) { .fit--hero, .fit--msg { --s: 0.7; } }
@media (min-width: 1024px) and (max-height: 820px) { .fit--hero, .fit--msg { --s: 0.62; } }
@media (min-width: 1024px) and (max-height: 740px) { .fit--hero, .fit--msg { --s: 0.56; } }

.phone {
  position: relative;
  box-sizing: border-box;
  padding: 9px;
  border: 4px solid transparent;
  border-radius: 68px;
  background:
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(145deg, #E3E8EF 0%, #A9B2C0 4%, #6F7888 10%, #2A303C 24%, #3A4252 46%, #2A303C 64%, #6F7888 84%, #A9B2C0 94%, #E3E8EF 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 6px 12px -2px rgba(0, 0, 0, 0.35),
    0 30px 60px -10px rgba(0, 0, 0, 0.55),
    0 80px 140px -30px rgba(0, 0, 0, 0.65);
}
/* the band's polished outer chamfer, a light catch on top and a darker lower lip */
.phone::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 68px;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.5), inset 0 1.5px 1px -0.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 1px -0.5px rgba(0, 0, 0, 0.55);
}
/* side buttons, 3 pt proud of the band: action, volume up, volume down; the side button on the right */
.phone::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -7px;
  right: -7px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #2A303C, #A9B2C0 45%, #6F7888) left 0 top 150px / 4px 32px no-repeat,
    linear-gradient(90deg, #2A303C, #A9B2C0 45%, #6F7888) left 0 top 210px / 4px 62px no-repeat,
    linear-gradient(90deg, #2A303C, #A9B2C0 45%, #6F7888) left 0 top 286px / 4px 62px no-repeat,
    linear-gradient(270deg, #2A303C, #A9B2C0 45%, #6F7888) right 0 top 226px / 4px 100px no-repeat;
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 55px;
  overflow: hidden;
  background: #0E0E0E;
  color: #FFFFFF;
  font-family: var(--sans);
  line-height: 1.3;
  isolation: isolate;
}
/* the glass: a soft diagonal reflection across the whole screen */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 20%, rgba(255, 255, 255, 0) 36%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* depth: a tilted phone shows its band's thickness as a stack of hard edges on the side that
   turns toward the viewer. --ry and --rx are the pose in degrees. The pose is static: no pointer
   or scroll tilt (motion-spec 3.2, phone-screens-spec section 5). */
.fit--tilt, .fit--lean {
  --tilt: 1;
  --px: 0;
  --py: 0;
  --ry: calc(var(--tilt) * (var(--px) * 4 - 11));
  --rx: calc(var(--tilt) * (var(--py) * 3 + 4));
  transform: rotateY(calc(var(--ry) * 1deg)) rotateX(calc(var(--rx) * 1deg)) rotateZ(calc(var(--tilt) * 1deg));
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.fit--tilt > .phone, .fit--lean > .phone {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    calc(var(--ry) * -0.13px) calc(var(--rx) * 0.13px) 0 #6F7888,
    calc(var(--ry) * -0.26px) calc(var(--rx) * 0.26px) 0 #3A4252,
    calc(var(--ry) * -0.39px) calc(var(--rx) * 0.39px) 0 #2A303C,
    calc(var(--ry) * -0.52px) calc(var(--rx) * 0.52px) 0 #232B3D,
    calc(var(--ry) * -0.65px) calc(var(--rx) * 0.65px) 0 #1A2130,
    calc(var(--ry) * -0.78px) calc(var(--rx) * 0.78px) 0 #0B0C10,
    calc(var(--ry) * -1px) calc(var(--rx) * 1px + 2px) 3px rgba(0, 0, 0, 0.45),
    calc(var(--ry) * -2px) calc(var(--rx) * 2px + 26px) 60px -10px rgba(0, 0, 0, 0.55),
    calc(var(--ry) * -3px) calc(var(--rx) * 3px + 70px) 140px -30px rgba(0, 0, 0, 0.65);
}
.fit--tilt .screen::after, .fit--lean .screen::after {
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 22%, rgba(255, 255, 255, 0) 38%) calc(var(--px) * -18px - 24px) calc(var(--py) * -18px - 24px) / 112% 112% no-repeat;
}

.fit--lean { --tilt: 0; }
@media (min-width: 1024px) { .fit--lean { --tilt: 0.5; } }

/* iOS status bar, true size: 54 pt, the Dynamic Island 126 by 37 */
.ios-sb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ios);
  color: #FFFFFF;
  pointer-events: none;
}
.ios-time { width: calc(50% - 63px); text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; padding-top: 4px; }
.ios-island { position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 18.5px; background: #000; }
.ios-icons { width: calc(50% - 63px); display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; }
.ios-icons svg { display: block; width: 18px; height: 12px; fill: currentColor; }
.ios-icons svg.bat { width: 27px; height: 13px; }
.home-ind { position: absolute; left: 50%; bottom: 8px; z-index: 9; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #FFFFFF; }

/* app tab bar: Explore, Trips, Profile. A floating navy capsule; the selected tab sits on a flat
   highlight (no border, no glow) */
.tabbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 30px;
  z-index: 6;
  box-sizing: border-box;
  height: 64px;
  padding: 0 6px;
  border-radius: 32px;
  background: rgba(26, 33, 48, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 30px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  display: flex;
  align-items: center;
}
.tab {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: 500 11px/13px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(169, 178, 192, 0.8);
}
.tab svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.tab.is-on { color: #FFFFFF; }
.tab.is-on::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 96px; height: 52px; margin: -26px 0 0 -48px; border-radius: 26px; background: rgba(255, 255, 255, 0.07); }
.tab-fade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 122px; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, rgba(14, 14, 14, 0.6) 100%); pointer-events: none; }

/* chrome fill for serif place names, airport codes and the member's name */
.chrome {
  display: inline-block;
  padding: 0 0.04em 0.12em;
  margin: 0 -0.04em -0.12em;
  background: linear-gradient(180deg, #FFFFFF 0%, #E3E8EF 45%, #A9B2C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* trip masthead (5.01): photo, round buttons, eyebrow, city, meta */
.mast { position: relative; height: 300px; }
.mast > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
.mast-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0.45) 0%, rgba(14, 14, 14, 0) 22%, rgba(14, 14, 14, 0.12) 48%, rgba(14, 14, 14, 0.72) 80%, #0E0E0E 100%); }
.round-btn { position: absolute; top: 62px; z-index: 2; box-sizing: border-box; width: 38px; height: 38px; border-radius: 50%; background: rgba(14, 14, 14, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.round-btn svg { width: 16px; height: 16px; }
.round-btn--l svg { width: 8px; height: 14px; margin-left: -2px; }
.round-btn--l { left: 20px; }
.round-btn--r { right: 20px; }
.mast-text { position: absolute; left: 20px; right: 20px; bottom: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mast-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #E3E8EF; }
.mast-city { font-size: 60px; line-height: 0.95; letter-spacing: -0.02em; }
.mast-meta { margin-top: 2px; font-size: 15px; color: #E4E4E4; }
.app-chips { display: flex; gap: 8px; padding: 14px 0 0 20px; overflow: hidden; white-space: nowrap; }
.achip { flex: none; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 15px; font-weight: 500; color: #FFFFFF; }
.achip--white { background: #FFFFFF; border-color: #FFFFFF; color: #0E0E0E; }
.achip svg { width: 15px; height: 15px; }
.dayline { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; line-height: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: #A9B2C0; white-space: nowrap; }
.dayline::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }

/* the kept Trips card (live ReservationCard anatomy) in Visinex type and surfaces.
   Status is a colored word in the time's slot: On request and change states show collapsed;
   Confirmed shows only when the card is open. */
.rc { position: relative; box-sizing: border-box; min-width: 0; padding: 16px; border-radius: 20px; background: #151921; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rc-head { display: flex; align-items: center; gap: 6px; height: 20px; min-width: 0; }
.rc-ico { flex: none; width: 14px; height: 14px; color: #A9B2C0; }
.rc-cat { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #A9B2C0; white-space: nowrap; }
.rc-time, .rc-status { margin-left: auto; white-space: nowrap; }
.rc-time { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.rc-time.swap { text-align: right; }
.rc-status { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.rc-status--ok { color: #9AED80; }
.rc-status--req { color: #E9A23B; }
.rc-status--chg { color: #F2938C; }
.rc-chev { flex: none; width: 16px; height: 16px; margin-left: 8px; color: #6F7888; }
.rc-cat + .rc-chev { margin-left: auto; }
.rc.is-open .rc-chev { transform: rotate(180deg); }
.rc-title { margin-top: 2px; font-family: var(--serif); font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: #FFFFFF; }
.rc.is-open .rc-title { font-size: 24px; }
.rc-line { font-size: 14px; line-height: 20px; color: #A9B2C0; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-line > span { overflow: hidden; text-overflow: ellipsis; }
.rc-line b { font-weight: 500; color: #FFFFFF; }
.rc-line .arw { color: #6F7888; }
.rc-note { font-size: 13px; line-height: 18px; color: #A9B2C0; }
.rc-line .is-late, .rc-line .is-late b, .rc-note .is-late { color: #E9A23B; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: #9AED80; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: m-live 2.4s ease-in-out infinite; } }
@keyframes m-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rc--photo { padding-top: 0; }
.rc-photo { position: relative; display: block; height: 160px; margin: 0 -16px 6px; border-radius: 19px 19px 0 0; overflow: hidden; }
.rc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-photo i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 25, 33, 0) 40%, #151921 100%); }
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 4px; }
.route-end { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.route-end--r { align-items: flex-end; text-align: right; }
.route-code { font-size: 34px; line-height: 1; letter-spacing: -0.01em; }
.route-time { font-size: 15px; font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.route-sub { font-size: 12px; color: #A9B2C0; }
.route-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #A9B2C0; }
.route-mid i { display: block; width: 64px; height: 1px; background: rgba(255, 255, 255, 0.2); }
.rc-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.rc-k { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #A9B2C0; white-space: nowrap; }
.rc-v { font-size: 14px; font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.rc-act { display: flex; align-items: center; justify-content: space-between; height: 44px; margin: 4px 0 -12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; color: #9CC3EC; }
.rc-act span { position: relative; top: -2px; font-size: 22px; line-height: 1; }

/* ---------- hero ---------- */
/* phones: the hero is one screen tall (svh: with the browser bars shown), so the copy and the note never sit under the toolbar */
.hero { position: relative; height: 844px; height: 100svh; min-height: 600px; max-height: 844px; overflow-x: clip; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
/* the header turns solid once this strip, the top 170 px of the hero, leaves it (motion.js) */
.hero-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 170px; pointer-events: none; }
/* phone layout: the photo fills the top of the hero, framed so the guest and the Eiffel Tower both show */
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 64%; max-width: none; object-fit: cover; object-position: 86% 30%; display: block; transform-origin: 50% 40%; }
/* the hero film is a montage with no single subject, so it sits centred */
.hero-film { object-position: 50% 50%; background: #0E0E0E; }
/* never show the browser's own play glyph over the film (iOS shows one when it holds autoplay back) */
.hero-film::-webkit-media-controls, .hero-film::-webkit-media-controls-start-playback-button, .hero-film::-webkit-media-controls-overlay-play-button,
.tile-film::-webkit-media-controls, .tile-film::-webkit-media-controls-start-playback-button, .tile-film::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0.5) 0%, rgba(14, 14, 14, 0.12) 14%, rgba(14, 14, 14, 0.3) 32%, rgba(14, 14, 14, 0.82) 50%, #0E0E0E 63%); }
.hero-fade { display: none; }
.hero-exit { position: absolute; inset: 0; background: #0E0E0E; opacity: 0; }
.hero-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-sub { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #E4E4E4; font-weight: 300; }
.hero-cta { display: flex; flex-direction: column; gap: 20px; }
.hero-cta .btn { width: 100%; }
.hero-note { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: #A9B2C0; text-align: center; }

@media (min-width: 1024px) {
  /* one window tall (it was a fixed 900 px, taller than a laptop window); copy and phone sit centered under the header */
  .hero { height: 100vh; min-height: 640px; max-height: 1000px; }
  /* wider than the viewport, anchored left: the guest stands between the copy and the phone,
     and the Eiffel Tower clears the phone's right edge */
  .hero-img { width: 118%; height: 100%; object-position: 50% 24%; }
  .hero-film { width: 100%; object-position: 50% 50%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(14, 14, 14, 0.55) 0px, rgba(14, 14, 14, 0) 190px),
      linear-gradient(90deg, rgba(14, 14, 14, 0.9) 0%, rgba(14, 14, 14, 0.74) 28%, rgba(14, 14, 14, 0.4) 50%, rgba(14, 14, 14, 0.1) 72%, rgba(14, 14, 14, 0.06) 100%);
  }
  .hero-fade { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 0%, rgba(14, 14, 14, 0.7) 55%, #0E0E0E 100%); }
  .hero-inner { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; padding-top: calc(96px + clamp(16px, 4vh, 48px)); padding-bottom: clamp(32px, 6vh, 64px); }
  .hero-copy { gap: clamp(24px, 3.6vh, 32px); max-width: 760px; }
  .hero-sub { max-width: 600px; }
  .hero-cta { gap: clamp(24px, 3.6vh, 32px); align-items: flex-start; }
  .hero-cta .btn { width: auto; }
  .hero-note { line-height: 1.6; text-align: left; }
  /* the hero phone stands in a static 3D pose */
  .hero-phone { position: relative; z-index: 0; perspective: 2200px; }
  .hero-phone::after { content: ""; position: absolute; left: 14%; right: 4%; bottom: -30px; z-index: -1; height: 44px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); filter: blur(16px); pointer-events: none; }
}

/* Trip overview (5.01, Visinex p.11 layout) inside the hero phone */
/* the mast sits a little shorter here (about a third of the screen, as on 5.01) so the car card's title
   clears the tab bar under the open flight card */
.screen--overview .mast { height: 268px; }
.o-list { padding: 12px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.o-list .rc + .dayline { margin-top: 2px; }

/* hero intro, on load (spec 3.2). CSS so it runs with no script and never flashes */
@keyframes m-rise-mask { from { transform: translateY(100%); } to { transform: none; } }
@keyframes m-fade-rise { from { opacity: 0; transform: translateY(var(--rise, 12px)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .intro-h { animation: m-rise-mask 900ms var(--m-enter) 150ms both; }
  .intro-sub { animation: m-fade-rise 900ms var(--m-enter) 450ms both; }
  .intro-cta { animation: m-fade-rise 900ms var(--m-enter) 650ms both; }
  .intro-phone { --rise: 24px; animation: m-fade-rise 900ms var(--m-enter) 500ms both; }
  .intro-card1 { animation: m-fade-rise 700ms var(--m-enter) 1100ms both; }
  .intro-card2 { animation: m-fade-rise 700ms var(--m-enter) 1250ms both; }
}

/* ---------- meet mercury ---------- */
.meet { padding-top: 72px; }
.meet .wrap { display: flex; flex-direction: column; gap: 22px; }
.meet-head { display: flex; flex-direction: column; gap: 22px; }
.meet-title { display: flex; flex-direction: column; gap: 22px; }
.meet-cols { display: flex; flex-direction: column; border-top: 1px solid #2A303C; }
.meet-col { padding: 18px 0; border-bottom: 1px solid #2A303C; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.col-label { font-size: 12px; letter-spacing: 0.18em; color: #A9B2C0; }
.col-text { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #E4E4E4; font-weight: 300; }
.meet-photo { position: relative; margin: 0; height: 360px; border-radius: 20px; overflow: hidden; isolation: isolate; }
.meet-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini { position: absolute; left: 50%; bottom: 0; width: 210px; height: 190px; margin-left: -105px; }
@media (min-width: 1024px) {
  .meet { padding: var(--sec-pad) 0; }
  .meet .wrap { gap: var(--sec-gap); }
  .meet-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; }
  .meet-title { gap: 24px; }
  .meet-head .lede { align-self: end; }
  .meet-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .meet-col { padding: 0; border-bottom: 0; gap: 20px; }
  .col-label { font-size: 13px; }
}

/* Explore (6.01) and Request a stay (6.06) mini screens: only the top 366 pt shows, rising out of the photo.
   Positions follow Visinex's frames in iPhone points (about ±5 pt, read from the Figma capture). */
.explore { position: absolute; top: 68px; left: 20px; right: 0; display: flex; flex-direction: column; }
.explore-eb { font: 500 11px/14px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #6F7888; }
.explore-title { margin-top: 2px; font-size: 36px; line-height: 40px; padding-right: 20px; white-space: nowrap; }
/* the ask field, focused (Visinex input token: fill #141518, 1 pt #516A7D with a #303C46 inner edge, caret #9ED8FF).
   A full pill; with two lines it grows to 72 and keeps its round ends. The typed text is 17 pt (Visinex uses 14),
   the size of the Ask phone's message bubble, so it still reads at the mini's half scale. */
.ask { position: relative; margin: 26px 20px 0 0; box-sizing: border-box; min-height: 50px; padding: 13px 63px 13px 38px; border-radius: 25px; background: #141518; border: 1px solid #516A7D; box-shadow: inset 0 0 0 1px #303C46; overflow: hidden; }
.ask-star { position: absolute; left: 16px; top: 18px; width: 13px; height: 13px; fill: #E3E8EF; }
.ask-text { display: block; font-size: 17px; line-height: 22px; color: #FFFFFF; letter-spacing: -0.005em; }
/* Visinex's caret is 1.2 pt; 2 pt here so it survives the half scale */
.ask-caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; border-radius: 1px; background: #9ED8FF; }
.ask-send { position: absolute; right: 8px; bottom: 7px; width: 34px; height: 34px; border-radius: 50%; background: #2D2D31; color: #A9B2C0; display: flex; align-items: center; justify-content: center; transition: background-color 200ms var(--m-enter), color 200ms var(--m-enter); }
.ask-send svg { width: 16px; height: 16px; }
.ask.is-ready .ask-send { background: #FFFFFF; color: #0E0E0E; }
@keyframes m-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* six blinks after the send arrow lights, then steady (WCAG 2.2.2); typing restarts the count */
  .ask-caret { animation: m-caret 1s step-end 6; }
  .ask.is-typing .ask-caret { animation: none; }
}
.explore-chips { margin-top: 18px; display: flex; gap: 8px; overflow: hidden; white-space: nowrap; }
.xchip { flex: none; display: inline-flex; align-items: center; box-sizing: border-box; height: 36px; padding: 0 15px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; color: #E4E4E4; }
.xchip.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #0E0E0E; }
.explore-h { margin-top: 30px; display: flex; align-items: baseline; justify-content: space-between; padding-right: 20px; }
.explore-h .serif { font-size: 24px; line-height: 1; }
.explore-all { font-size: 13px; color: #9CC3EC; }
.explore-cards { margin-top: 12px; display: flex; gap: 12px; overflow: hidden; }
.dcard { position: relative; flex: none; width: 230px; height: 300px; border-radius: 20px; overflow: hidden; }
.dcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dcard i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 38%, rgba(14, 14, 14, 0.85) 100%); }
.dcard-t { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dcard-eb { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #E3E8EF; }
.dcard-city { font-size: 30px; line-height: 1; }
.dcard-line { font-size: 13px; color: #E4E4E4; }

/* Request a stay: Visinex draws the sheet from about y 300; here it starts at 112 (all spacing inside kept)
   so the dates and guests show in the mini */
.screen--stay { background: #0B0C10; }
.stay-photo { position: absolute; top: 0; left: 0; right: 0; height: 150px; overflow: hidden; }
.stay-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.stay-photo i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0.3) 45%, rgba(8, 10, 14, 0.5) 100%); }
.stay-btn { top: 57px; }
.stay-btn--back { left: 16px; }
.stay-btn--share { left: 288px; }
.stay-btn--save { left: 336px; }
.sheet { position: absolute; top: 112px; left: 0; right: 0; bottom: 0; z-index: 3; box-sizing: border-box; padding: 35px 20px 0; border-radius: 30px 30px 0 0; background: #141518; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06), 0 -12px 30px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; align-items: stretch; }
.sheet-grab { position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #3A4252; }
.sheet-eb { font: 500 11px/12px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #A9B2C0; }
.sheet-title { margin-top: 9px; font-size: 35px; line-height: 34px; }
.stay-dates { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stay-field { box-sizing: border-box; height: 64px; padding: 14px 14px 0 15px; border-radius: 16px; background: #202126; border: 1px solid transparent; display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.stay-field.is-focus { border-color: #516A7D; box-shadow: inset 0 0 0 1px #303C46; }
.stay-k { font: 500 11px/13px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A3; }
.stay-v { font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: #FFFFFF; }
.stay-guests { position: relative; margin-top: 18px; box-sizing: border-box; height: 64px; padding: 0 17px 0 12px; border-radius: 16px; background: #202126; display: flex; align-items: center; gap: 8px; }
.stay-gico { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #E4E4E4; display: flex; align-items: center; justify-content: center; }
.stay-gico svg { width: 17px; height: 17px; }
.stay-gtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stay-glabel { font-size: 15px; line-height: 20px; color: #FFFFFF; }
.stay-gsub { font-size: 12px; line-height: 16px; color: #8A93A3; white-space: nowrap; }
.stepper { flex: none; display: flex; align-items: center; }
.step { width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); color: #A9B2C0; display: flex; align-items: center; justify-content: center; }
.step--plus { border-color: transparent; background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.step svg { width: 14px; height: 14px; }
.step-n { width: 38px; text-align: center; font-size: 16px; color: #FFFFFF; }
.sheet-label { margin-top: 23px; font: 500 11px/13px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A3; }
.sheet-chips { margin-top: 10px; display: flex; gap: 9px; }
.sheet-cta { position: absolute; left: 20px; right: 20px; top: 445px; height: 52px; border-radius: 16px; background: #FFFFFF; color: #0E0E0E; font: 600 16px/52px var(--sans); text-align: center; }

/* ---------- tell us once ---------- */
.once { padding-top: 88px; }
.once-grid { display: flex; flex-direction: column; gap: 36px; }
.once-copy { display: flex; flex-direction: column; gap: 20px; }
.once-sub { margin: 0; font-size: 22px; line-height: 1.4; color: #FFFFFF; }
.once-body { margin: 0; font-size: 16px; line-height: 1.6; color: #E4E4E4; font-weight: 300; max-width: 62ch; }
.once-phone { display: flex; justify-content: center; perspective: 2400px; }
@media (min-width: 1024px) {
  .once { box-sizing: border-box; min-height: 1000px; padding: 80px 0; display: flex; align-items: center; border-top: 1px solid #1F242E; }
  .once-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; align-items: center; }
  .once-copy { gap: 28px; }
  .once-sub { font-size: 26px; }
  .once-body { font-size: 20px; max-width: 520px; }
}

/* Profile screen (7.02): the member's name is the title; preferences sit in grouped cards */
.profile { position: absolute; top: 64px; left: 20px; right: 20px; bottom: 112px; display: flex; flex-direction: column; gap: 12px; }
.profile-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 6px; }
.profile-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #A9B2C0; }
.profile-title { font-size: 34px; line-height: 1.05; }
.pgroup { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-radius: 20px; background: #151921; border: 1px solid rgba(255, 255, 255, 0.08); }
.pgroup-label { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #A9B2C0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; box-sizing: border-box; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; line-height: 1; color: #FFFFFF; cursor: default; }
.chip-lit { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: #232B3D; }
.chip-ring { position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 0 0 1px #E4E4E4; pointer-events: none; }
.chip-t { position: relative; }
.chip--alert { background: #E4E4E4; border-color: #E4E4E4; color: #0E0E0E; }
.chip:focus-visible { outline-offset: 2px; }
.applied { margin-top: auto; padding: 14px 16px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-direction: column; gap: 8px; }
.applied-text { font-size: 15px; line-height: 1.45; color: #E4E4E4; }
.ulink { position: relative; display: inline-block; }
.ul { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #E4E4E4; transform-origin: 0 50%; }

/* ---------- trips chapter ---------- */
.chapter { position: relative; isolation: isolate; }
.chapter-ground { display: none; }
.chapter-grid { display: flex; flex-direction: column; }
.beat--1 .beat-inner { display: flex; flex-direction: column; gap: 22px; padding: 80px 0 72px; }
/* the second beat now has its own heading (Matthew, October 1, 2026), spaced like the first */
.beat--2 .beat-inner { display: flex; flex-direction: column; gap: 28px; }
.beat--3 { position: relative; z-index: 1; }
.beat--3::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; z-index: -1; background: #1A2130; }
.changes { display: flex; flex-direction: column; gap: 32px; padding: 72px 0; }
.changes-copy { display: flex; flex-direction: column; gap: 22px; }
.changes-cards { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.ccard { padding: 18px 20px; border-radius: 22px; background: #0E0E0E; display: flex; flex-direction: column; gap: 6px; }
.ccard-top { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; row-gap: 2px; }
.ccard-eyebrow { font-size: 12px; color: #A9B2C0; letter-spacing: 0.08em; text-transform: uppercase; }
.ccard-status { font-size: 12px; color: #FFFFFF; }
.ccard-title { font-size: 20px; font-weight: 500; }
.ccard-line { font-size: 15px; color: #E4E4E4; }
.ccard-link { display: block; width: 1px; height: 28px; margin-left: 40px; background: #6F7888; }
/* the push sits in the page here, not over a phone screen */
.changes-cards .ios-banner--inline { position: relative; left: auto; right: auto; top: auto; z-index: auto; font-family: var(--ios); text-align: left; }

/* Live Activity (Figma "Four moments", 579:872): 361 px wide in the design, fluid here */
.la { position: relative; box-sizing: border-box; padding: 16px 16px 18px; border-radius: 24px; background: #121418; border: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF; font-family: var(--sans); text-align: left; }
.la-top { display: flex; align-items: center; gap: 8px; min-height: 25px; }
.la-mark { flex: none; display: block; width: 14px; height: 14px; }
.la-flight { flex: 1; min-width: 0; font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: #A9B2C0; white-space: nowrap; }
.la-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 9px; border-radius: 99px; background: rgba(242, 113, 107, 0.12); border: 1px solid rgba(242, 113, 107, 0.3); font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: #F2716B; white-space: nowrap; }
.la-badge img { display: block; width: 5px; height: 5px; }
.la-title { display: block; margin-top: 5px; font-size: 32px; line-height: 1.05; background-image: linear-gradient(176.85deg, #FFFFFF 10.99%, #A9B2C0 32.835%, #FFFFFF 51.56%, #E3E8EF 65.604%, #6F7888 89.01%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.la-sub { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: #A9B2C0; }

/* beat 3 on the pinned phone: the lock screen, hidden until motion.js shows it */
.lock { position: absolute; inset: 0; z-index: 30; opacity: 0; visibility: hidden; font-family: var(--ios); }
.lock-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: blur(3px) saturate(0.9); }
.lock-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0.62) 0%, rgba(8, 10, 14, 0.38) 45%, rgba(8, 10, 14, 0.82) 100%); }
.lock .ios-sb { z-index: 1; }
.lock-clock { position: absolute; top: 172px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, 0.92); }
.lock-date { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.lock-time { font-size: 104px; font-weight: 400; line-height: 1; letter-spacing: -0.03em; }
.lock-push { z-index: 2; }
.lock-la { position: absolute; left: 16px; right: 16px; bottom: 40px; }

.swap { display: grid; min-width: 0; }
.swap > * { grid-area: 1 / 1; min-width: 0; }
.sw-b { opacity: 0; }
.is-b .sw-a { opacity: 0; }
.is-b .sw-b { opacity: 1; }

/* Paris panel (Mobile-1) */
.paris-panel { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px 16px; border-radius: 28px; background: #0B0C10; border: 1px solid #2A303C; }
.pp-city { font-size: 40px; line-height: 1; align-self: flex-start; }
.pp-dates { margin-bottom: 4px; font-size: 14px; color: #E4E4E4; }
.pp-rc { padding: 14px 16px; }
.pp-rc .rc-title { font-size: 21px; }
.pp-dinner { padding: 14px 16px; border-radius: 20px; background: #151921; border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 8px; }
.pp-dinner-h { font-size: 21px; line-height: 1.1; }
.pp-reserve { font-size: 13px; font-weight: 500; }

@media (min-width: 1024px) {
  .chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr auto; column-gap: 96px; }
  .chapter-phone { grid-column: 1; grid-row: 1 / span 4; display: flex; justify-content: center; align-items: center; padding: var(--sec-pad) 0; }
  .beat--1 { grid-column: 2; grid-row: 2; }
  .beat--1 .beat-inner { padding: 0 0 28px; gap: 28px; }
  .beat--2 { grid-column: 2; grid-row: 3; }
  .beat--3 { grid-column: 1 / -1; grid-row: 5; }
  .changes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; align-items: center; box-sizing: border-box; padding: var(--sec-pad) 0; }
  .changes-copy { gap: 24px; }
  .changes-body { max-width: 520px; }
  .changes-cards { width: min(520px, 100%); gap: 16px; }
  .ccard { padding: 22px 24px; }

  /* pinned chapter: added by script only when motion is allowed (spec 3.5) */
  /* the sticky phone ends where its column ends, so the navy ground carries on below it: without this the phone's
     bottom edge sat on the next section (Matthew, September 30, 2026: "the phone drops down too far ... needs padding") */
  .chapter.is-pinned { padding-bottom: clamp(96px, 10vw, 160px); }
  .chapter.is-pinned .chapter-ground { display: block; position: absolute; inset: 0; z-index: -1; background: #1A2130; opacity: 0; }
  .chapter.is-pinned .chapter-grid { grid-template-rows: auto auto auto; }
  .chapter.is-pinned .chapter-phone { grid-row: 1 / span 3; display: block; align-self: stretch; padding: 0; }
  .chapter.is-pinned .chapter-sticky { --sh: 712px; position: sticky; top: max(104px, calc(50vh + 48px - var(--sh) / 2)); display: flex; justify-content: center; }
  /* start the phone level with "All your travel reservations": the first beat centers its text in 85vh, so the phone
     starts half the difference lower and both arrive together (Matthew, October 1, 2026: "the phone arriving way too soon") */
  .chapter.is-pinned .chapter-sticky { margin-top: max(0px, calc((85vh - var(--sh)) / 2)); }
  .chapter.is-pinned .beat { grid-column: 2; display: flex; align-items: center; min-height: 85vh; }
  .chapter.is-pinned .beat--1 { grid-row: 1; }
  .chapter.is-pinned .beat--2 { grid-row: 2; }
  .chapter.is-pinned .beat--3 { grid-row: 3; }
  .chapter.is-pinned .beat--3::before { display: none; }
  .chapter.is-pinned .beat-inner { padding: 0; }
  .chapter.is-pinned .changes { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .chapter.is-pinned .changes-cards { display: none; }
  .chapter.is-pinned .trip-scroll { overflow: hidden; }
}
/* short desktop windows: the pinned phone scales so it clears the fixed header */
@media (min-width: 1024px) and (max-height: 867px) {
  .chapter.is-pinned .chapter-sticky { --sh: 650px; }
  .chapter.is-pinned .fit--trips { --s: 0.74; }
}
@media (min-width: 1024px) and (max-height: 762px) {
  .chapter.is-pinned .chapter-sticky { --sh: 575px; }
  .chapter.is-pinned .fit--trips { --s: 0.655; }
}

/* Trip overview screen (5.01) in the pinned phone: masthead, chips, day dividers, the kept cards, a thin rail */
.ios-sb--over::before { content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 14, 0.7), rgba(14, 14, 14, 0)); }
.trip-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: inherit; }
.trip-scroll::-webkit-scrollbar { display: none; }
.trip-scroll:focus-visible { outline-offset: -3px; }
.trip-move { padding-bottom: 136px; }
/* behind the status bar once the list has scrolled under it (beat 2) */
.sb-scrim { position: absolute; left: 0; right: 0; top: 0; z-index: 8; height: 92px; background: linear-gradient(180deg, #0E0E0E 0%, rgba(14, 14, 14, 0.94) 58%, rgba(14, 14, 14, 0) 100%); opacity: 0; pointer-events: none; }
.trip-list { position: relative; padding: 22px 20px 0 36px; display: flex; flex-direction: column; gap: 12px; }
.trip-list .rc + .dayline { margin-top: 8px; }
.tc .swap > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-node { position: absolute; left: -20px; top: 26px; width: 7px; height: 7px; border-radius: 50%; background: #A9B2C0; box-shadow: 0 0 0 3px #0E0E0E; }
.rc--photo > .rail-node { top: 192px; }
.rail-seg { position: absolute; left: -17px; top: 30px; width: 1px; height: var(--seg, calc(100% + 40px)); background: #3A4252; transform-origin: 50% 0; z-index: -1; }
.dinner { margin: 24px 20px 0 36px; padding: 16px; border-radius: 20px; background: #151921; border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; }
.dinner-h { font-size: 22px; line-height: 1.1; }
.dinner .dinner-text { font-size: 14px; color: #A9B2C0; }
.dinner .dphoto { height: 110px; border-radius: 14px; }
.dinner .dphoto span { left: 12px; bottom: 10px; font-size: 13px; }
.dinner .reserve { height: 44px; padding: 0 16px; border-radius: 22px; font-size: 15px; }
.dinner .reserve-tier { font-size: 12px; }
.dinner-text { font-size: 13px; color: #E4E4E4; }
.dinner-photos { display: flex; gap: 8px; }
.dphoto { position: relative; flex: 1 1 0; height: 92px; border-radius: 12px; overflow: hidden; }
.dphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dphoto i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 40%, rgba(14, 14, 14, 0.85) 100%); }
.dphoto span { position: absolute; left: 10px; bottom: 8px; font-size: 12px; font-weight: 500; color: #FFFFFF; }
.reserve { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; color: #0E0E0E; font-size: 12.5px; font-weight: 500; }
.reserve-tier { font-size: 10.5px; color: #6F7888; }

/* ---------- discover, hotels, doors ---------- */
.discover { padding: 88px 0 0; }
.discover-head { display: flex; flex-direction: column; gap: 22px; }
.discover-copy { display: flex; flex-direction: column; gap: 18px; }
.tiles { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { position: relative; height: 220px; border-radius: 18px; overflow: hidden; isolation: isolate; }
.tile-img { position: absolute; inset: 0; }
.tile-img img, .tile-img video, .door > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.door > img { position: absolute; inset: 0; }
.scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 25%, rgba(14, 14, 14, 0.55) 55%, rgba(14, 14, 14, 0.95) 100%); }
.tile-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.tile-name { font-size: 15px; font-weight: 500; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.tile-sub { font-size: 12px; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.panels { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.hotel-panel { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; padding: 300px 22px 24px; border-radius: 22px; }
.hotel-img { position: absolute; inset: 0; z-index: -2; }
.hotel-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; } /* the marble bath photo: keeps the doorway and the window above the heading */
.hotel-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 22%, rgba(14, 14, 14, 0.92) 52%); }
.hotel-copy { display: flex; flex-direction: column; gap: 14px; }
.hotel-copy p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-text); color: #E4E4E4; }
.hotel-copy p.hotel-close { color: #FFFFFF; }
.doors-panel { box-sizing: border-box; padding: 24px 20px; border-radius: 22px; border: 1px solid #2A303C; display: flex; flex-direction: column; gap: 18px; }
.doors-text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-text); color: #E4E4E4; }
.doors { display: flex; flex-direction: column; gap: 10px; }
.door { position: relative; height: 180px; border-radius: 18px; overflow: hidden; isolation: isolate; }
.scrim--light { background: linear-gradient(180deg, rgba(14, 14, 14, 0) 25%, rgba(14, 14, 14, 0.42) 55%, rgba(14, 14, 14, 0.75) 100%); }
.scrim--deep { background: linear-gradient(180deg, rgba(14, 14, 14, 0) 25%, rgba(14, 14, 14, 0.22) 55%, rgba(14, 14, 14, 0.8) 100%); transition: opacity 240ms var(--m-enter); }
@media (hover: hover) and (pointer: fine) { .door:hover .scrim--deep { opacity: 0; } }
.door.is-lit .scrim--deep { opacity: 0; }

@media (min-width: 1024px) {
  .discover { padding: var(--sec-pad) 0; }
  .discover-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; align-items: end; }
  /* the title, the two paragraphs and the row of tiles fit a laptop window together; then the two panels fit
     one on their own (Visinex, October 6, 2026) */
  .tiles { margin-top: var(--sec-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tile { height: clamp(280px, calc(100vh - 420px), 380px); border-radius: 20px; }
  .tile-cap { left: 20px; right: 20px; bottom: 18px; gap: 4px; }
  .tile-name { font-size: 18px; }
  .tile-sub { font-size: 13px; }
  .panels { margin-top: var(--sec-gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .hotel-panel { height: clamp(460px, calc(100vh - 170px), 520px); padding: 0; border-radius: 24px; }
  .hotel-scrim { background: linear-gradient(180deg, rgba(14, 14, 14, 0) 35%, rgba(14, 14, 14, 0.92) 100%); }
  .hotel-copy { position: absolute; left: 36px; right: 36px; bottom: 32px; }
  .doors-panel { height: clamp(460px, calc(100vh - 170px), 520px); padding: 36px; border-radius: 24px; gap: 24px; }
  .doors { margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .door { height: 200px; border-radius: 20px; }
  .door .tile-cap { left: 16px; right: 12px; bottom: 16px; }
  .door .tile-name { font-size: clamp(15px, 1.25vw, 18px); }
  .door .tile-sub { font-size: clamp(12px, 0.9vw, 13px); }
}

/* ---------- mercury plus ---------- */
.plus { padding-top: 72px; }
.plus-grid { display: flex; flex-direction: column; gap: 40px; }
.plus-copy { display: flex; flex-direction: column; gap: 20px; }
/* Circle's line under its heading reads at the size of Plus's (Visinex, October 9, 2026) */
.plus-line, .circle-line { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.circle-line { text-wrap: balance; }
.price-row { display: flex; align-items: baseline; gap: 18px; padding-top: 12px; border-top: 1px solid #2A303C; }
/* in Circle the price sits under the benefits list, whose last item already draws the hairline (Matthew, September 30, 2026) */
.benefits + .price-row { border-top: 0; padding-top: 0; }
.price { font-size: 56px; line-height: 1; }
.price-note { font-size: var(--fs-body); color: #A9B2C0; }
.small-muted { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: #A9B2C0; }
.callout { padding: 18px 20px; border-radius: 16px; background: #1A2130; display: flex; flex-direction: column; gap: 6px; }
.callout--m { padding: 16px; font-size: var(--fs-small); line-height: 1.5; color: #E4E4E4; }
.callout-title { font-size: var(--fs-body); font-weight: 500; }
.callout-body { font-size: var(--fs-small); line-height: 1.5; color: #A9B2C0; }
.plus-phone { display: flex; flex-direction: column; align-items: center; gap: 12px; perspective: 2400px; }
.phone-controls { min-height: 44px; display: flex; justify-content: center; }
@media (min-width: 1024px) {
  .plus { padding: var(--sec-pad) 0; border-top: 1px solid #1F242E; }
  .plus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; align-items: center; }
  .plus-copy { gap: clamp(18px, 3vh, 26px); }
  .price { font-size: clamp(44px, 6.4vh, 56px); }
  .plus-phone { gap: 16px; }
}

/* Apple Messages, dark mode, at true iPhone size (Apple's app: iOS styling and blue on purpose) */
.screen--msg { background: #000000; font-family: var(--ios); }
.msg-head {
  position: relative;
  z-index: 2;
  padding: 58px 16px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: rgba(28, 28, 30, 0.94);
  border-bottom: 0.5px solid rgba(84, 84, 88, 0.65);
}
.msg-back { color: var(--ios-blue); width: 30px; padding-top: 18px; }
.msg-back svg { display: block; width: 12px; height: 21px; }
.msg-contact { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.msg-avatar { width: 54px; height: 54px; border-radius: 50%; background: #0E0E0E; border: 0.5px solid #2C2C2E; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.msg-avatar img { width: 32px; height: 32px; display: block; }
.msg-name { font-size: 12px; color: #FFFFFF; letter-spacing: 0.01em; }
.msg-video { color: var(--ios-blue); width: 30px; padding-top: 20px; display: flex; justify-content: flex-end; }
.msg-video svg { display: block; width: 26px; height: 17px; }
.msg-thread { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.msg-stamp { margin: 0 0 6px; align-self: center; text-align: center; font-size: 12px; line-height: 1.3; color: #8E8E93; }
.msg-stamp b { font-weight: 600; }
.bub { position: relative; max-width: 268px; box-sizing: border-box; padding: 8px 14px 9px; border-radius: 19px; font-size: 17px; line-height: 1.29; letter-spacing: -0.02em; color: #FFFFFF; }
.bub--out { align-self: flex-end; margin-right: 6px; background: var(--ios-blue); }
.bub--in { align-self: flex-start; margin-left: 6px; background: #262628; }
.bub--out::before, .bub--out::after, .bub--in::before, .bub--in::after { content: ""; position: absolute; bottom: 0; height: 19px; }
.bub--out::before { right: -8px; width: 19px; background: var(--ios-blue); border-bottom-left-radius: 16px 15px; }
.bub--out::after { right: -10px; width: 10px; background: #000000; border-bottom-left-radius: 10px; }
.bub--in::before { left: -8px; width: 19px; background: #262628; border-bottom-right-radius: 16px 15px; }
.bub--in::after { left: -10px; width: 10px; background: #000000; border-bottom-right-radius: 10px; }
.slot { position: relative; display: flex; flex-direction: column; }
.typing { position: absolute; left: 6px; top: 0; height: 38px; padding: 0 14px; box-sizing: border-box; border-radius: 19px; background: #262628; display: flex; align-items: center; gap: 5px; opacity: 0; }
.typing::before { content: ""; position: absolute; left: -2px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #262628; }
.typing::after { content: ""; position: absolute; left: -8px; bottom: -7px; width: 6px; height: 6px; border-radius: 50%; background: #262628; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; opacity: 0.4; }
.is-playing .typing i { animation: m-typing 1.2s ease-in-out infinite; }
.is-playing .typing i:nth-child(2) { animation-delay: 0.15s; }
.is-playing .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes m-typing { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
.msg-input { position: absolute; left: 0; right: 0; bottom: 34px; padding: 0 12px; display: flex; align-items: center; gap: 10px; }
.msg-plus { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #2C2C2E; color: #AEAEB2; display: flex; align-items: center; justify-content: center; }
.msg-plus svg { width: 16px; height: 16px; }
.msg-field { flex: 1; height: 36px; box-sizing: border-box; border-radius: 18px; border: 1px solid #3A3A3C; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 15px; font-size: 17px; color: #6C6C70; }
.msg-field svg { width: 20px; height: 20px; color: #6C6C70; }

/* iOS notification banner (dark material) */
.ios-banner {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 54px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px 13px 13px;
  border-radius: 24px;
  background: rgba(44, 44, 46, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--ios);
}
.ios-banner-icon { flex: none; width: 38px; height: 38px; box-sizing: border-box; border-radius: 9px; background: #0E0E0E; border: 0.5px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; }
.ios-banner-icon img { width: 24px; height: 24px; display: block; }
.ios-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ios-banner-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ios-banner-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; }
.ios-banner-time { flex: none; font-size: 13px; color: rgba(235, 235, 245, 0.6); }
.ios-banner-text { font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; color: #FFFFFF; }

/* ---------- mercury circle ---------- */
.circle { padding-top: 88px; }
.circle-grid { display: flex; flex-direction: column; gap: 20px; }
.circle-copy { display: flex; flex-direction: column; gap: 20px; }
.circle-lede { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #E4E4E4; font-weight: 300; }
.circle-meter { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 16px; }
.meter-note { font-size: var(--fs-small); color: #A9B2C0; text-align: center; }
@media (min-width: 1024px) {
  .circle { padding: var(--sec-pad) 0; background: #0B0C10; }
  /* the copy column is the longer one, so it takes more of the width, and the benefits sit in two columns:
     the whole section fits a laptop window (Visinex, October 6, 2026) */
  .circle-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: clamp(48px, 5vw, 96px); align-items: center; }
  /* a grid so the price and its "Or complimentary" line share one row; everything else spans both columns */
  .circle-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; row-gap: clamp(12px, 1.9vh, 24px); }
  .circle-copy > * { grid-column: 1 / -1; }
  .circle-copy > .price-row { grid-column: 1; }
  .circle-copy > .small-muted { grid-column: 2; align-self: center; max-width: 420px; }
  .circle-more { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #A9B2C0; font-weight: 300; }
  .benefits { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2A303C; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .benefits li { padding: clamp(8px, 1.3vh, 12px) 0; border-bottom: 1px solid #2A303C; font-size: var(--fs-body); line-height: 1.45; color: #E4E4E4; }
  .circle-meter { gap: clamp(18px, 3vh, 28px); margin-top: 0; }
  .meter-title { font-size: var(--fs-h3); line-height: var(--lh-h3); color: #E4E4E4; }
}
/* short laptop windows: a little more width for the copy and the benefits at the small size */
@media (min-width: 1024px) and (max-height: 740px) {
  .circle-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .benefits li { font-size: var(--fs-small); }
}

/* the ring: track, metal masked by --fill, sheen, glint, core */
.ring { --fill: 246deg; --lean: 0deg; --core-inset: 22px; --core-bg: #0E0E0E; position: relative; flex: none; width: 300px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; isolation: isolate; }
.ring > div { position: absolute; inset: 0; border-radius: 50%; }
.ring-track { background: conic-gradient(from 246deg, #3A4458 0deg, #333C4E 114deg, #333C4E 360deg); }
.ring-metal {
  background: conic-gradient(from 0deg, #3B6FA8 0deg, #CFE3F7 55deg, #4F86C2 110deg, #E8F1FB 165deg, #2E5E93 210deg, #9CC3EC 246deg, #9CC3EC 360deg);
  -webkit-mask: conic-gradient(#000 calc(var(--fill) - 0.5deg), transparent var(--fill));
  mask: conic-gradient(#000 calc(var(--fill) - 0.5deg), transparent var(--fill));
}
.ring-sheen { overflow: hidden; -webkit-mask: conic-gradient(#000 var(--fill), transparent 0deg); mask: conic-gradient(#000 var(--fill), transparent 0deg); }
.ring > .ring-sheen > .ring-sheen-band { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: conic-gradient(from -26deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.6) 26deg, rgba(255, 255, 255, 0) 52deg, rgba(255, 255, 255, 0) 360deg); }
.ring-glint { background: conic-gradient(from calc(var(--fill) + var(--lean) - 6deg), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0.9) 5deg, rgba(255, 255, 255, 0) 6deg, rgba(255, 255, 255, 0) 360deg); }
.ring > .ring-core { inset: var(--core-inset); background: var(--core-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.ring-mark { width: 44px; height: 44px; opacity: 0.9; }
.ring-label { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ring-eyebrow { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #A9B2C0; }
.ring-num { font-size: 44px; line-height: 1; }
.ring-of { font-size: 12px; color: #A9B2C0; padding-inline: 12px; }
@media (min-width: 1024px) {
  .ring--circle { width: clamp(320px, min(34.72vw, 100vh - 330px), 500px); --core-inset: 34px; --core-bg: #0B0C10; box-shadow: 0 0 0 1px #2A303C; }
  .ring--circle .ring-eyebrow { font-size: 12px; }
  .ring--circle .ring-num { font-size: 64px; }
  .ring--circle .ring-of { font-size: 15px; }
}

/* ---------- tiers ---------- */
.tiers-sec { padding-top: 88px; }
.tiers-note { margin: 16px 0 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #E4E4E4; font-weight: 300; }
@media (min-width: 1024px) { .tiers-note { margin-top: 20px; } }
.tier-label { font-size: 12px; letter-spacing: 0.18em; color: #A9B2C0; }
.tiers-m { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.mtier { position: relative; isolation: isolate; overflow: hidden; padding: 24px 20px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; }
.mtier--free { border: 1px solid #2A303C; }
.mtier--plus { background: #1A2130; }
.mtier--circle { border: 1px solid #CFE3F7; color: #0B1626; }
.mtier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mtier-name { font-size: 34px; line-height: 1.1; }
.mtier-price { font-size: 15px; flex: none; }
.mtier-text { font-size: 15px; line-height: 1.5; color: #E4E4E4; }
.mtier--circle .tier-label, .mtier-earn { color: #1A2130; }
.mtier--circle .mtier-text { color: #0B1626; }
.mtier-earn { font-size: 13px; line-height: 1.5; }
.liquid {
  position: absolute;
  left: 0;
  top: -80%;
  z-index: -1;
  width: 260%;
  height: 260%;
  pointer-events: none;
  background: linear-gradient(118deg, #4F7FB8 0%, #9CC3EC 14%, #E8F1FB 22%, #7FA9DA 34%, #3B6FA8 48%, #B9D5F2 60%, #F2F7FD 66%, #6E9BD0 78%, #2E5E93 100%);
}
@media (min-width: 1024px) {
  .tiers-sec { padding: var(--sec-pad) 0; }
  .tiers { margin-top: var(--sec-gap); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .tier { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; padding: clamp(24px, 3.6vh, 36px) clamp(24px, 2.2vw, 32px); border-radius: 24px; display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 18px); }
  .tier--free { border: 1px solid #2A303C; }
  .tier--plus { background: #1A2130; }
  .tier--circle { border: 1px solid #CFE3F7; box-shadow: 0 30px 80px rgba(59, 111, 168, 0.35); color: #0B1626; }
  .tier-label { font-size: 13px; }
  .tier--circle .tier-label { color: #1A2130; }
  .tier-name { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .tier-price { font-size: var(--fs-body); font-weight: 500; }
  .tier-desc { margin: 0; font-size: var(--fs-body); line-height: var(--lh-text); color: #E4E4E4; }
  .tier--circle .tier-desc { color: #0B1626; }
  .tier-list { list-style: none; margin: 0; padding: clamp(12px, 1.8vh, 18px) 0 0; border-top: 1px solid #2A303C; display: flex; flex-direction: column; gap: clamp(6px, 1vh, 12px); font-size: var(--fs-small); line-height: 1.45; color: #E4E4E4; }
  .tier--plus .tier-list { border-top-color: #3A4252; }
  .tier--circle .tier-list { border-top-color: rgba(11, 22, 38, 0.25); color: #0B1626; }
  .tier-hair { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid #3A4252; opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--m-enter); }
  .tier-light { position: absolute; left: 0; top: 0; z-index: -1; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)); opacity: 0; pointer-events: none; }
  .footnote { margin: clamp(20px, 3vh, 40px) 0 0; font-size: var(--fs-small); color: #6F7888; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .tier--free:hover .tier-hair { opacity: 1; }
}
/* laptop windows: Circle lists eight benefits since the copy of October 5, 2026, so the cards sit a little tighter
   and the row still fits under the title */
@media (min-width: 1024px) and (max-height: 860px) {
  .tiers { margin-top: clamp(28px, 4vh, 48px); }
  .tier { padding-block: 22px; gap: 10px; }
  .tier-list { padding-top: 12px; gap: 5px; line-height: 1.4; }
}

/* ---------- unlock ---------- */
.unlock { padding-top: 88px; }
.unlock-grid { display: flex; flex-direction: column; gap: 32px; }
.unlock-copy { display: flex; flex-direction: column; gap: 22px; }
/* The Circle progress widget from the app's Profile tab (Matthew, October 11, 2026), drawn at the app's own
   proportions: CircleProgressCard in the iOS design build is 353 pt wide (393 less the 20 pt page inset each side),
   so the card is laid out at 353 px and zoomed. App tokens: surface #15171B, hairline white 8%, text #A9B2C0 and
   #6F7888, track white 12%, radius 18, the silver of Theme.swift. The bar fills and the amount counts up in view
   (motion.js); without motion it shows the finished state. */
.unlock-art { position: relative; display: flex; justify-content: center; }
.unlock-art::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 120%; aspect-ratio: 1.4; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 127, 184, 0.22), rgba(79, 127, 184, 0)); pointer-events: none; }
.cw {
  --cw-silver: linear-gradient(175deg, #FFFFFF 11%, #A9B2C0 33%, #FFFFFF 52%, #E3E8EF 66%, #6F7888 89%);
  position: relative; isolation: isolate; box-sizing: border-box; width: 353px; max-width: 100%; zoom: 1;
  padding: 16px 16px 14px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(260px circle at 0 0, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)), #15171B;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  color: #FFFFFF; font-family: "Geist", system-ui, sans-serif; text-align: left;
}
.cw::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.cw-head { display: flex; align-items: center; gap: 8px; }
.cw-mark { flex: none; width: 14px; height: 14px; background: var(--cw-silver); -webkit-mask: url("img/965c6706d2018a1cb65d61c8eb0b0a03.png") center / contain no-repeat; mask: url("img/965c6706d2018a1cb65d61c8eb0b0a03.png") center / contain no-repeat; }
.cw-eb { flex: 1; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #A9B2C0; }
.cw-pct { font-size: 12px; font-variant-numeric: tabular-nums; color: #A9B2C0; }
.cw-amount { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.cw-num { font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; background: var(--cw-silver); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cw-of { font-size: 14px; letter-spacing: -0.01em; color: #A9B2C0; }
.cw-bar { --p: 0; position: relative; margin-top: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.cw-fill { position: absolute; left: 0; top: 0; bottom: 0; width: max(6px, calc(var(--p) * 100%)); border-radius: inherit; background: linear-gradient(100deg, #FFFFFF 11%, #A9B2C0 33%, #FFFFFF 52%, #E3E8EF 66%, #6F7888 89%); }
.cw-dot { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 12px rgba(255, 255, 255, 0.7); }
.cw-scale { margin-top: 8px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 500; color: #6F7888; }
.cw-to-go { color: #A9B2C0; }
.cw-rule { display: block; height: 1px; margin-top: 16px; background: rgba(255, 255, 255, 0.08); }
.cw-last + .cw-rule { margin-top: 12px; }
.cw-last { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.cw-ico { flex: none; width: 16px; height: 16px; color: #A9B2C0; }
.cw-last-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cw-last-t > span { font-size: 12px; line-height: 1.4; color: #6F7888; }
.cw-last-t > b { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-last-a { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.cw-foot { margin: 12px 0 0; display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: #A9B2C0; }
.cw-foot > span { flex: 1; }
.cw-arr { flex: none; width: 14px; height: 14px; margin-top: 2px; color: #6F7888; }
@media (min-width: 1024px) {
  .unlock { padding: var(--sec-pad) 0; border-top: 1px solid #1F242E; }
  .unlock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 96px; align-items: center; }
  .unlock-copy { gap: 26px; }
  .unlock-copy .lede { max-width: 520px; }
  /* 353 px zoomed to about 440 px on a laptop and 550 px on a large screen (zoom takes a number, so it steps) */
  .cw { max-width: none; zoom: 1.25; }
}
@media (min-width: 1440px) and (min-height: 860px) { .cw { zoom: 1.4; } }
@media (min-width: 1800px) and (min-height: 1000px) { .cw { zoom: 1.55; } }

/* ---------- testimonials ---------- */
.quotes { padding: 88px 0 72px; }
.quotes-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.qcard { box-sizing: border-box; padding: 20px 20px 18px; border-radius: 20px; border: 1px solid #2A303C; background: #0E0E0E; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.qcard--navy { background: #1A2130; border-color: #1A2130; }
.qtext { margin: 0; font-size: 22px; line-height: 1.16; }
.qwho { display: flex; align-items: center; gap: 12px; }
.qdisc { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #2A303C; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 12px; letter-spacing: 0.04em; color: #A9B2C0; }
.qcard--navy .qdisc { background: #2A3346; }
.qdisc--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qname { font-size: 14px; font-weight: 500; }
.qrole { font-size: 12px; color: #A9B2C0; }
@media (min-width: 640px) {
  .quotes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .quotes { padding: var(--sec-pad) 0; border-top: 1px solid #1F242E; }
  .quotes-grid { margin-top: var(--sec-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .qcard { min-height: clamp(200px, 30vh, 260px); padding: 30px 28px 26px; border-radius: 24px; gap: 28px; }
  /* the two rows fit a laptop window under the heading: the quote size follows the width or the height */
  .qtext { font-size: clamp(22px, min(1.94vw, 3.3vh), 30px); }
  .qdisc { width: 44px; height: 44px; font-size: 13px; }
  .qname { font-size: 15px; }
  .qrole { font-size: 13px; }
}
/* The cards answer the pointer (Visinex, October 9, 2026): a soft white light, 360 px across, follows it, the hairline
   brightens where it is nearest and the portrait leans in. White only: the accent stays on clickable things (spec rule 5).
   motion.js moves the light (--qx, --qy), lifts and tilts the card and drifts the columns; without it the light sits
   at the top. On touch a tap lights the card for a moment (.is-lit). */
.qcard { position: relative; isolation: isolate; transition: border-color var(--t-base) var(--m-enter); }
.qcard::before, .qcard::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--t-base) var(--m-enter); }
.qcard::before { inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--qx, 50%) var(--qy, 0%), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%); }
.qcard::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(240px circle at var(--qx, 50%) var(--qy, 0%), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.qdisc { transition: background-color var(--t-base) var(--m-enter), color var(--t-base) var(--m-enter); }
.qdisc--photo img { transition: transform var(--t-settle) var(--m-enter); }
.qcard.is-lit::before, .qcard.is-lit::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .qcard:hover { border-color: #3A4252; }
  .qcard:hover::before, .qcard:hover::after { opacity: 1; }
  .qcard:hover .qdisc { background: #3A4252; color: #FFFFFF; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .qcard:hover .qdisc--photo img { transform: scale(1.08); }
}

/* ---------- close ---------- */
/* One 4:3 wrapper holds the photo and the projected screen, so the screen stays
   registered at every width. Phone: the phone in the photo sits above the copy.
   Desktop: the wrapper is 1.5 times the content width, anchored left, so the lit
   screen sits to the right of the headline instead of under it. */
.close { --cw: max(982px, 110vw); position: relative; margin-top: 88px; overflow: hidden; }
.close-photo { position: absolute; left: calc(50% - 0.46 * var(--cw)); top: calc(230px - 0.38625 * var(--cw)); width: var(--cw); aspect-ratio: 4 / 3; }
.close-photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.close-stage { position: absolute; left: 0; top: 0; width: 920px; height: 690px; transform: scale(var(--k, 1)); transform-origin: 0 0; pointer-events: none; }
.close-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border-radius: 54px;
  background: #0E0E0E;
  color: #FFFFFF;
  font-family: var(--sans);
  line-height: 1.3;
  opacity: 0;
  transform-origin: 0 0;
  transform: matrix3d(0.361323728, -0.163965792, 0, 0.0000489274, 0.197049241, 0.360986082, 0, -0.0000060670, 0, 0, 1, 0, 273.85, 235.025, 0, 1);
}
.close-photo.is-registered .close-screen { opacity: 1; }
.close-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0.55) 0px, rgba(14, 14, 14, 0) 110px, rgba(14, 14, 14, 0.12) 300px, #0E0E0E 470px, #0E0E0E 100%); }
.close-inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding-top: 440px; padding-bottom: 56px; }
.close-body { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #E4E4E4; font-weight: 300; }
.close-cta { width: 100%; }
@media (min-width: 1024px) {
  /* never taller than the window (Visinex, October 6, 2026); the photo stays centered, so a shorter section trims it top and bottom */
  .close { --h: clamp(640px, min(70.83vw, 100vh), 1020px); height: var(--h); margin-top: 0; }
  .close-photo { left: max(0px, calc((100% - var(--max)) / 2)); top: 50%; width: calc(1.5 * min(100%, var(--max))); translate: 0 -50%; }
  .close-shade { background: linear-gradient(90deg, rgba(14, 14, 14, 0.95) 0%, rgba(14, 14, 14, 0.7) 38%, rgba(14, 14, 14, 0.15) 62%, rgba(14, 14, 14, 0.1) 100%); }
  /* wider than the 1440 column, the photo starts inside the window and left a black strip (Matthew, September 30, 2026:
     "the background image is cutting off too soon on the left"). A mirrored copy continues the dark fabric to the left
     edge; the seam sits under the darkest part of the shade, and the copy's hand and phone fall far outside the window. */
  .close-photo::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100%; background: url("img/10e17c305435f435d93155e371a28997.jpg") center / cover no-repeat; transform: scaleX(-1); pointer-events: none; }
  .close-inner { height: 100%; justify-content: center; align-items: flex-start; gap: 32px; padding: 0 var(--gutter); }
  .close-inner > * { max-width: min(700px, 46vw); }
  .close-cta { width: auto; }
}

/* 4.02 Trips, drawn at iPhone points (390 by 844) and projected onto the photo */
.cs-sb { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; font-family: var(--ios); }
.cs-time { width: calc(50% - 63px); text-align: center; font-size: 17px; font-weight: 600; padding-top: 4px; }
.cs-island { position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; }
.cs-icons { width: calc(50% - 63px); display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; }
.cs-icons svg { width: 18px; height: 12px; fill: #FFFFFF; }
.cs-icons svg.bat { width: 27px; height: 13px; }
.cs-title { position: absolute; left: 24px; top: 84px; font-size: 52px; line-height: 1; }
.cs-seg { position: absolute; left: 24px; top: 154px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #1A2130; font-size: 14px; }
.cs-seg span { padding: 8px 16px; border-radius: 999px; color: #A9B2C0; }
.cs-seg span.is-on { background: #0E0E0E; color: #FFFFFF; }
.cs-card { position: absolute; left: 20px; right: 20px; overflow: hidden; border-radius: 26px; }
.cs-card--first { top: 214px; height: 300px; }
.cs-card--second { top: 530px; height: 176px; }
.cs-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card--second img { object-position: 78% 72%; }
/* the Japan card is shorter than Paris and its sky is bright, so its fade starts higher and goes deeper,
   keeping "March 14 to 22" legible (Matthew, September 30, 2026) */
.cs-card--photo.cs-card--second i { background: linear-gradient(180deg, rgba(14, 14, 14, 0) 15%, rgba(14, 14, 14, 0.5) 45%, rgba(14, 14, 14, 0.88) 100%); }
.cs-card--photo i { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0.05) 30%, rgba(14, 14, 14, 0.85) 100%); }
.cs-card-text { position: absolute; left: 22px; bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cs-eb { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF; }
.cs-city { font-size: 46px; line-height: 1; }
.cs-dates { font-size: 15px; color: #E4E4E4; }
.cs-tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(26, 33, 48, 0.96); }
.cs-home { position: absolute; left: 50%; bottom: 9px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #FFFFFF; }
.cs-glass { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%), rgba(0, 0, 0, 0.16); pointer-events: none; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid #1F242E; }
.footer-inner { padding-block: 40px; display: flex; flex-direction: column; gap: 24px; }
.footer-top { display: flex; flex-direction: column; gap: 24px; }
.footer-logo { display: block; height: 22px; width: auto; align-self: flex-start; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; font-size: 14px; }
.footer-nav a { color: #E4E4E4; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-nav a:hover { color: #FFFFFF; } }
.footer-legal { display: flex; flex-direction: column; gap: 24px; font-size: 12px; line-height: 1.6; color: #A9B2C0; }
@media (max-width: 1023.98px) {
  .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1024px) {
  /* one legal line left (the Seller of Travel line went on October 6), so the footer sizes to its content */
  .footer-inner { padding-block: 56px; gap: 40px; }
  .footer-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-logo { height: 28px; }
  .footer-nav { display: flex; gap: 36px; font-size: 15px; }
  .footer-legal { gap: 10px; font-size: 13px; }
}

/* ---------- phone download bar ---------- */
.dlbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  box-sizing: border-box;
  max-width: 520px;
  height: 64px;
  margin-inline: auto;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: rgba(26, 33, 48, 0.92);
  border: 1px solid #3A4252;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity var(--t-base) var(--m-exit), transform var(--t-base) var(--m-exit), visibility 0s linear var(--t-base);
}
.dlbar > img { width: 26px; height: 26px; display: block; }
.dlbar.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-base) var(--m-enter), transform var(--t-base) var(--m-enter), visibility 0s; }
@media (prefers-reduced-motion: reduce) {
  .dlbar, .dlbar.is-shown { transform: none; transition: opacity var(--t-quick) linear, visibility 0s linear var(--t-quick); }
  .dlbar.is-shown { transition: opacity var(--t-quick) linear, visibility 0s; }
}
@media (min-width: 1024px) { .dlbar { display: none; } }

/* ---------- 3.4 Tell us once: Visinex's section (mercury-site-eight.vercel.app), copied as is ----------
   Their values: section top padding clamp(120px, 14vw, 214px); heading clamp(44px, 5vw, 75px) at 1.12;
   body 16/24 at 80% white; "Profile" in the serif at 24; chips 12 by 16 padding, 64 radius, 15% white hairline,
   15 px blur, on = white with ink text; locked = slate tint with the lock; "+ Add" at half opacity. */
.tellonce { padding-top: clamp(120px, 14vw, 214px); }
/* Visinex spaces sections from the top only; here the next section (Trips) opens with its phone at its very top,
   so the same space goes below the chips too, or the phone sits right under them (Matthew, September 30, 2026).
   Desktop now takes the page's section padding, which follows the window's height (Visinex, October 6, 2026). */
@media (min-width: 1024px) { .tellonce { padding-block: var(--sec-pad); } }
.tellonce-wrap { display: grid; justify-items: center; grid-template-columns: minmax(0, 1fr); }
/* Matthew, September 30, 2026: Tell us once needs "a distinct look ... otherwise it gets lost in the black"; he chose
   B, a soft photograph: the Forestis Tower Suite, blurred and darkened under a navy veil, fading to black at both edges */
.tellonce { position: relative; isolation: isolate; overflow: hidden; }
.tellonce::before {
  content: ""; position: absolute; inset: -24px; z-index: -2;
  background: url("img/forestis-dolomites-tower-suite.jpg") center 40% / cover no-repeat;
  filter: blur(6px) saturate(0.85) brightness(0.55);
}
.tellonce::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0E0E0E 0%, rgba(14, 18, 26, 0.6) 22%, rgba(14, 18, 26, 0.72) 70%, #0E0E0E 100%);
}

.to-head { display: grid; gap: 24px; width: min(727px, 100%); justify-items: center; text-align: center; }
.to-head .t-h2 { max-width: 480px; }
.to-body { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-text); color: #E4E4E4; font-weight: 300; }
/* the privacy line under the body (copy of October 5, 2026): muted, and tucked closer to the body than the grid gap */
.to-body.to-note { margin-top: -8px; color: #A9B2C0; }
.to-label { margin: 81px 0 0; font-size: 24px; line-height: 24px; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .to-label { margin-top: var(--sec-gap); } }
.to-chips { display: grid; gap: 20px; margin-top: 32px; width: min(760px, 100%); }
.to-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.to-chip {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; margin: 0;
  padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 64px; background: none;
  color: #FFFFFF; font: inherit; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; white-space: nowrap; cursor: pointer;
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  transition: background 350ms, color 350ms, border-color 350ms, translate 350ms var(--m-enter), scale 350ms var(--m-enter);
}
.to-chip.is-on { background: #FFFFFF; color: #0E0E0E; border-color: rgba(0, 0, 0, 0.15); }
.to-chip--locked { background: rgba(111, 120, 136, 0.2); border-color: transparent; cursor: default; }
.to-lock { flex: none; width: 12px; height: 12px; fill: currentColor; }
.to-chip--add { opacity: 0.5; }
.to-chip:active { scale: 0.96; }
.to-chip--locked:active { scale: none; }
.to-chip:focus-visible, .to-add input:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.to-add { display: inline-flex; position: relative; margin: 0; }
.to-add input {
  display: none; width: 190px; box-sizing: border-box; padding: 12px 16px; border-radius: 64px;
  border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); color: #FFFFFF;
  font: inherit; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; outline: none;
}
.to-add.is-open .to-chip--add { display: none; }
.to-add.is-open input { display: block; }
.to-chip.is-new { animation: to-pop 600ms var(--m-enter); }
@keyframes to-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .to-chip:hover { border-color: rgba(255, 255, 255, 0.45); translate: 0 -2px; }
  .to-chip.is-on:hover { border-color: rgba(0, 0, 0, 0.15); }
  .to-chip--locked:hover { border-color: transparent; translate: none; }
  .to-chip--add:hover { opacity: 1; }
}
@media (max-width: 600px) {
  .to-chip, .to-add input { padding: 9px 13px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-chip { transition: none; }
  .to-chip:hover, .to-chip:active { translate: none; scale: none; }
  .to-chip.is-new { animation: none; }
}

/* ---------- 3.3 Meet Mercury: a push notification on each photo (Matthew, September 30, 2026) ----------
   The banner is the measured iOS 26 replica (mercury-hq product/films/arranged/ios-notification-spec.md): iOS points
   written as CSS px, so at this width it is the real size: 15/18 text, 13 time, 38 icon, 24 radius, clear glass with a
   specular rim. A light lock screen dimming at the top of each photo keeps the white text legible on bright skies. */
.meet { --spring: linear(0, 0.0152, 0.0549, 0.1117, 0.1794, 0.2533, 0.3296, 0.4055, 0.4788, 0.5482, 0.6127, 0.6716, 0.7248, 0.7721, 0.8137, 0.8499, 0.881, 0.9075, 0.9298, 0.9484, 0.9636, 0.9759, 0.9857, 0.9934, 0.9993, 1.0037, 1.0068, 1.0089, 1.0102, 1.0109, 1.0111, 1.0109, 1.0105, 1.0098, 1.0091, 1.0082, 1.0074, 1.0066, 1.0057, 1.005, 1.0043, 1.0036, 1.003, 1.0025, 1.002, 1.0016, 1.0013, 1.001, 1); }
.nf-slot { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; }
.nf {
  position: relative; box-sizing: border-box; border-radius: 24px; padding: 11.4px 17px 13.5px 65px;
  background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(3px) saturate(1.25); backdrop-filter: blur(3px) saturate(1.25);
  box-shadow: 0 0 0 0.75px rgba(0, 0, 0, 0.14), 0 6px 18px rgba(0, 0, 0, 0.1);
  color: #FFFFFF; font: 400 15px/18px var(--ios); letter-spacing: normal; text-align: left; -webkit-font-smoothing: antialiased;
}
.nf::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.14) 35%, rgba(255, 255, 255, 0.14) 65%, rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nf-icon { position: absolute; left: 14.5px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 8.5px; background: #0B0B0C url("img/mercury-app-icon.png") center / cover no-repeat; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16); }
/* the text from Mercury keeps the same rounded square icon as the other two (Matthew, September 30, 2026: "it should be a square"),
   with the small Messages badge so it still reads as a text */
.nf-badge { position: absolute; right: -3.7px; bottom: -3.3px; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, #4AEC66 0%, #1ECD38 100%); }
.nf-badge svg { display: block; width: 16px; height: 16px; fill: #FFFFFF; }
.nf-row { display: flex; align-items: baseline; gap: 8px; }
.nf-title { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-time { flex: none; font-size: 13px; color: rgba(255, 255, 255, 0.55); mix-blend-mode: plus-lighter; }
.nf-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
/* motion (armed by motion.js only when motion is allowed): each banner waits above the photo's top edge, then slides
   down and settles on the replica's spring, one photo after another */
.meet-cols.is-armed .nf-slot { transform: translateY(calc(-100% - 30px)); }
.meet-cols.is-armed .mm-card.is-in .nf-slot { transform: none; transition: transform 700ms var(--spring); }


/* =====================================================================
   3.3 MEET MERCURY: the verb (option C, "the moment, not the phone") and the answer (a notification)
   No phone frames. Three taller photo cards; on each, the ONE piece of the app
   that tells the story, lifted out of the phone at reading size and built from
   the Visinex components (ask field 6.01, Request a stay 6.06, Apple Messages).
   Sizes at 1440: every word 14 px or larger, the member requests 19 px.
   The DISCOVER, BOOK and ASK labels are raised 1 px here to meet that floor.
   If this option is chosen, raise the global .col-label token instead (a separate
   change) and drop the two .meet overrides below. The section eyebrows were removed
   on October 9, 2026 (Visinex).
   The old .meet-photo / .mini / .explore / .ask / .sheet rules above are now
   unused by this section and can be deleted when this option is chosen.
   ===================================================================== */
.meet .col-label { font-size: 13px; }
.meet .col-text { text-wrap: pretty; }
.mm-card {
  container: mm / inline-size;
  position: relative;
  margin: 0 0 12px;
  height: 460px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: #1A2130;
}
/* a hairline keeps the rounded corners where a dark photo edge meets the dark page */
.mm-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); pointer-events: none; z-index: 2; }
.mm-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.mm-photo--forestis { object-position: 38% 50%; } /* both peak groups; no curtain and no window mullion on the edge */
.mm-photo--dinner { object-position: 58% 50%; }
.mm-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 14, 14, 0) 34%, rgba(14, 14, 14, 0.48) 100%); pointer-events: none; }
.mm-ui { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; }

/* frosted glass, as the app's sheets and fields sit over photos */
.mm-ask, .mm-stay, .mm-contact {
  background: rgba(20, 21, 24, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

/* Discover: the Explore ask field (Visinex 6.01), focused, at 1.2 times its app size */
.mm-discover { gap: 12px; }
.mm-greet { font-size: 28px; line-height: 1.05; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 24px rgba(0, 0, 0, 0.55); }
.mm-ask { position: relative; display: block; box-sizing: border-box; min-height: 60px; padding: 15px 64px 15px 46px; border-radius: 30px; border: 1px solid #516A7D; box-shadow: inset 0 0 0 1px #303C46, 0 18px 40px rgba(0, 0, 0, 0.3); overflow: hidden; }
.mm-star { position: absolute; left: 19px; top: 21px; width: 16px; height: 16px; fill: #E3E8EF; }
.mm-ask-text { display: block; font-size: 19px; line-height: 26px; color: #FFFFFF; letter-spacing: -0.005em; }
.mm-ask-text::before { content: "\200B"; } /* holds the line height while the field is empty */
/* the caret is soft white, not blue: blue is for clickable things only */
.mm-caret { display: inline-block; width: 2px; height: 22px; margin-left: 1px; vertical-align: -5px; border-radius: 1px; background: #E3E8EF; }
.mm-send { position: absolute; right: 10px; bottom: 9px; width: 40px; height: 40px; border-radius: 50%; background: #2D2D31; color: #A9B2C0; display: flex; align-items: center; justify-content: center; }
.mm-send svg { width: 18px; height: 18px; }
.mm-ask.is-ready .mm-send { background: #FFFFFF; color: #0E0E0E; }
@media (prefers-reduced-motion: no-preference) {
  .mm-send { transition: background-color 200ms var(--m-enter), color 200ms var(--m-enter); }
  .mm-caret { animation: m-caret 1s step-end 6; }
  .mm-ask.is-typing .mm-caret { animation: none; }
}

/* Book: Request a stay (Visinex 6.06) as a compact frosted sheet, kept under 300 px tall
   so the Dolomites summits stay clear above it */
.mm-stay { box-sizing: border-box; padding: 12px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.mm-stay-eb { font: 500 14px/16px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #A9B2C0; }
.mm-stay-title { margin-top: 5px; font-size: 26px; line-height: 28px; color: #FFFFFF; }
.mm-dates { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mm-field { box-sizing: border-box; min-width: 0; padding: 9px 13px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid transparent; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.mm-field.is-focus { border-color: #516A7D; box-shadow: inset 0 0 0 1px #303C46; }
.mm-k { font-size: 14px; line-height: 18px; color: #A9B2C0; }
.mm-v { font-size: 17px; line-height: 22px; letter-spacing: -0.01em; color: #FFFFFF; }
/* Guests: one line, the label on the left and the value on the right */
.mm-guests { margin-top: 8px; padding: 10px 13px; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.mm-board { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 2px; }
.mm-chips { display: flex; gap: 8px; }
.mm-chip { flex: none; display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; padding: 0 15px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 15px; color: #E4E4E4; white-space: nowrap; }
.mm-chip.is-on { background: #FFFFFF; border-color: #FFFFFF; color: #0E0E0E; }
.mm-cta { margin-top: 10px; height: 44px; border-radius: 16px; background: #FFFFFF; color: #0E0E0E; font: 600 16px/44px var(--sans); text-align: center; }

/* Ask: the outgoing iMessage, large, with the Mercury contact line above it */
.mm-msg { align-items: flex-end; gap: 14px; font-family: var(--ios); }
.mm-contact { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.1); }
.mm-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #0E0E0E; border: 0.5px solid #2C2C2E; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mm-avatar img { width: 20px; height: 20px; display: block; }
.mm-name { font-size: 15px; font-weight: 600; line-height: 20px; color: #FFFFFF; letter-spacing: -0.01em; }
.mm-bub { position: relative; margin: 0 7px 0 0; max-width: min(360px, calc(100% - 7px)); box-sizing: border-box; padding: 10px 16px 11px; border-radius: 22px; background: var(--ios-blue); color: #FFFFFF; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; text-wrap: pretty; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35)); }
.mm-tail { position: absolute; right: -7px; bottom: 0; width: 30px; height: 22px; fill: var(--ios-blue); }
@media (max-width: 1023.98px) {
  /* phones: 18 px on a 290 px bubble breaks into four even lines */
  .mm-bub { font-size: 18px; max-width: min(290px, calc(100% - 7px)); }
}

@media (min-width: 1024px) {
  .meet .col-label { font-size: 14px; }
  /* the row of cards with their captions fits a laptop window on its own (Visinex, October 6, 2026) */
  .mm-card { margin: 0; height: clamp(420px, calc(100vh - 250px), 488px); }
  .mm-ui { left: 16px; right: 16px; bottom: 16px; }
  .mm-greet { font-size: 30px; }
}

/* narrow cards (desktop 1024 to about 1200): keep the dates and board on one line,
   and break the request into two even lines */
@container mm (max-width: 340px) {
  .mm-ui { left: 12px; right: 12px; bottom: 12px; }
  .mm-field { padding-inline: 11px; }
  .mm-v { font-size: 15px; }
  .mm-chip { padding: 0 12px; font-size: 14px; }
  .mm-ask { padding-right: 56px; }
  .mm-ask-text { font-size: 18px; text-wrap: balance; }
  .mm-bub { font-size: 18px; }
}
/* the answer: Discover's photo is Kyoto, framed on the pagoda; the scrim also dims the top of each photo a little,
   as the Lock Screen does behind a banner, so the notification's white text holds on a bright sky */
.mm-photo--japan { object-position: 82% 50%; }
.mm-scrim { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.1) 24%, rgba(14, 14, 14, 0) 38%, rgba(14, 14, 14, 0.48) 100%); }

/* Book, more air (Matthew, September 30, 2026: "the entire window looks cluttered and squeezed. let's remove board"):
   the Board row is gone, the sheet breathes, and the button is the chrome of the Mercury mark instead of flat white */
.mm-stay { padding: 18px 16px 16px; }
.mm-stay-title { margin-top: 6px; }
.mm-dates { margin-top: 16px; gap: 10px; }
.mm-guests { margin-top: 10px; }
.mm-cta {
  margin-top: 16px; height: 50px; border-radius: 25px; font: 600 16px/50px var(--sans); letter-spacing: -0.01em; color: #0E0E0E;
  background: linear-gradient(128deg, #F4F7FB 0%, #C9D6EA 26%, #FFFFFF 46%, #B4C3DA 70%, #E3EAF4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(59, 71, 96, 0.35), 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* ---------- October 11, 2026 (Matthew, "Website Top Priorities - Oct 11") ---------- */
/* Silver, after brand/logos/mercury-wordmark-shimmer.gif: the app's chrome (Theme.swift SilverGradient, 175°: white,
   #A9B2C0, white, #E3E8EF, #6F7888) with a soft light that crosses it every few seconds. .logo-silver masks it with
   the white wordmark; .silver clips it to type ("Mercury Circle"). */
:root {
  --silver-light: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 62%);
  --silver-base: linear-gradient(175deg, #FFFFFF 11%, #A9B2C0 33%, #FFFFFF 52%, #E3E8EF 66%, #6F7888 89%);
}
@keyframes silver-sweep {
  0% { background-position: 120% 0, 0 0; }
  55%, 100% { background-position: -20% 0, 0 0; }
}
.logo-silver, .silver {
  background-image: var(--silver-light), var(--silver-base);
  background-size: 260% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
}
.logo-silver {
  display: block;
  height: 22px;
  aspect-ratio: 1203 / 287;
  -webkit-mask: url("img/cb48fea2a4f140e086b733ee6907df03.png") center / contain no-repeat;
  mask: url("img/cb48fea2a4f140e086b733ee6907df03.png") center / contain no-repeat;
}
@media (min-width: 1024px) { .logo-silver { height: 30px; } }
.silver {
  display: inline-block;
  padding: 0 0.04em 0.12em;
  margin: 0 -0.04em -0.12em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .logo-silver { animation: silver-sweep 7s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite; }
  .silver { animation: silver-sweep 7s cubic-bezier(0.45, 0, 0.25, 1) 2.4s infinite; }
}

/* Plus card: the introductory access line closes the card */
.tier-note { margin: auto 0 0; padding-top: clamp(12px, 1.8vh, 18px); border-top: 1px solid #3A4252; font-size: var(--fs-small); line-height: 1.45; color: #A9B2C0; }
.mtier--plus .mtier-earn { color: #A9B2C0; }

/* Doors you didn't know about (Matthew, October 11, 2026: "feels too black and there is awkward space that's unused").
   A, the default: the panel takes the navy of the Plus card with the silver light from its top left, and the three
   doors grow to fill everything under the paragraph, so the photos carry the panel.
   B (?doors=b): the Louvre's Galerie d'Apollon, blurred and darkened, fills the panel behind the same tall doors.
   ?doors=0 shows the October 9 panel for comparison. */
@media (min-width: 1024px) {
  .doors-panel:not([data-doors-v="0"]) { position: relative; isolation: isolate; overflow: hidden; border-color: #2A3346; background: radial-gradient(520px circle at 0 0, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), #1A2130; }
  .doors-panel:not([data-doors-v="0"]) .doors { flex: 1; min-height: 0; margin-top: 4px; }
  .doors-panel:not([data-doors-v="0"]) .door { height: auto; min-height: 0; }
  .doors-panel[data-doors-v="b"] { background: #0E0E0E; border-color: #2A303C; }
  .doors-panel[data-doors-v="b"]::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: url("img/fccbc7405b1118d5e9ea6633921961a3.jpg") center / cover; filter: blur(28px) saturate(1.1); opacity: 0.55; }
  .doors-panel[data-doors-v="b"]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 14, 0.35) 0%, rgba(14, 14, 14, 0.75) 100%); }
}
@media (max-width: 1023px) {
  .doors-panel:not([data-doors-v="0"]) { border-color: #2A3346; background: radial-gradient(360px circle at 0 0, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), #1A2130; }
}

/* Hover films on the tiles (Matthew, October 11, 2026): the film fades in over the photo (motion.js adds .is-playing);
   tiles without a film drift in a little under the pointer instead */
.tile-img > .tile-hover { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--m-enter); }
.tile.is-playing .tile-hover { opacity: 1; }
.tile-img > img { transition: transform 6s cubic-bezier(0.2, 0.6, 0.2, 1); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile:not(.tile--film):hover .tile-img > img { transform: scale(1.06); }
}

/* Mercury Circle shows no price (client, October 15, 2026: "Price upon request"); the words sit on two lines in the ring */
.ring-num--words { font-size: 30px; line-height: 1.05; }
@media (min-width: 1024px) {
  .ring--circle .ring-num--words { font-size: clamp(34px, 4.6vh, 44px); }
}

/* Every hotel stay is elevated (Matthew, October 15, 2026: bubbles that show how Mercury elevates each stay, instead of the room photo).
   A, the default: the six benefits float as bubbles in the upper part of the panel, each on its own slow drift, and a white light
   moves from bubble to bubble (motion.js, .is-lit). The panel is the page's black with a silver light from its top right, so it
   answers the navy Doors panel beside it.
   B (?hotel=b): the bubbles sit inside a sample stay (Le Bristol Paris), lit as the booking would carry them; no drift.
   ?hotel=0 shows the October 14 photo. */
.perks-wrap, .hotel-note { display: none; }
.hotel-panel:not([data-hotel-v="0"]) { padding: 28px 22px 24px; border: 1px solid #2A303C; background: radial-gradient(420px circle at 100% 0, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)), #0E0E0E; display: flex; flex-direction: column; gap: 28px; }
/* a soft background (Visinex, October 15, 2026): the suite living room at night, blurred, dimmed, darkest under the copy */
.hotel-panel:not([data-hotel-v="0"]) .hotel-img { overflow: hidden; }
.hotel-soft { display: none; }
.hotel-panel:not([data-hotel-v="0"]) .hotel-img img:not(.hotel-soft) { display: none; }
.hotel-panel:not([data-hotel-v="0"]) .hotel-img .hotel-soft { display: block; object-position: 50% 62%; }
.hotel-panel:not([data-hotel-v="0"]) .hotel-img img { transform: scale(1.06); filter: blur(4px) saturate(0.9) brightness(1.05); opacity: 0.75; }
.hotel-panel:not([data-hotel-v="0"]) .hotel-scrim { background: radial-gradient(520px circle at 100% 0, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), linear-gradient(180deg, rgba(14, 14, 14, 0.35) 0%, rgba(14, 14, 14, 0.55) 45%, rgba(14, 14, 14, 0.92) 100%); }
.hotel-panel:not([data-hotel-v="0"]) .perks-wrap { display: flex; flex-direction: column; justify-content: center; }
.hotel-panel:not([data-hotel-v="0"]) .hotel-note { display: block; margin-top: -4px; font-size: var(--fs-small); line-height: 1.45; color: #A9B2C0; }
.perks-head { display: none; }
.perks { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; }
.perk { display: flex; }
.perk-b {
  display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; padding: 8px 13px 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 64px; background: rgba(255, 255, 255, 0.05);
  color: #FFFFFF; font-size: 13px; line-height: 20px; letter-spacing: -0.01em; white-space: nowrap;
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
  transition: background 600ms var(--m-enter), color 600ms var(--m-enter), border-color 600ms var(--m-enter), box-shadow 600ms var(--m-enter);
}
.perk-b svg { flex: none; width: 16px; height: 16px; color: #A9B2C0; transition: color 600ms var(--m-enter); }
.perk.is-lit .perk-b { background: #FFFFFF; border-color: #FFFFFF; color: #0E0E0E; box-shadow: 0 0 32px rgba(255, 255, 255, 0.18); }
.perk.is-lit .perk-b svg { color: #0E0E0E; }

/* A: centered rows of two, each bubble on its own slow drift */
@keyframes perk-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .hotel-panel:not([data-hotel-v]) .perk-b { animation: perk-drift 6s ease-in-out infinite; }
  .hotel-panel:not([data-hotel-v]) .perk:nth-child(2) .perk-b { animation-duration: 7s; animation-delay: -2.1s; }
  .hotel-panel:not([data-hotel-v]) .perk:nth-child(3) .perk-b { animation-duration: 6.5s; animation-delay: -4.2s; }
  .hotel-panel:not([data-hotel-v]) .perk:nth-child(4) .perk-b { animation-duration: 7.5s; animation-delay: -1.3s; }
  .hotel-panel:not([data-hotel-v]) .perk:nth-child(5) .perk-b { animation-duration: 6.2s; animation-delay: -3.4s; }
  .hotel-panel:not([data-hotel-v]) .perk:nth-child(6) .perk-b { animation-duration: 7.2s; animation-delay: -5s; }
}

/* B: a sample stay, the benefits lit as the booking carries them */
.hotel-panel[data-hotel-v="b"] .perks-wrap { padding: 20px; border: 1px solid #2A3346; border-radius: 18px; background: radial-gradient(360px circle at 0 0, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), #1A2130; gap: 16px; }
.hotel-panel[data-hotel-v="b"] .perks-head { display: flex; flex-direction: column; gap: 6px; }
.perks-eb { font-size: 12px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: #A9B2C0; }
.perks-name { font-size: 28px; line-height: 1.06; color: #FFFFFF; }
.hotel-panel[data-hotel-v="b"] .perks { margin: 0; justify-content: flex-start; max-width: none; gap: 8px; }

@media (min-width: 1024px) {
  .hotel-panel:not([data-hotel-v="0"]) { padding: 36px; gap: 24px; background: radial-gradient(520px circle at 100% 0, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)), #0E0E0E; }
  .hotel-panel:not([data-hotel-v="0"]) .perks-wrap { flex: 1; min-height: 0; }
  .hotel-panel:not([data-hotel-v="0"]) .hotel-copy { position: static; }
  .perks { max-width: 540px; gap: 14px 12px; }
  .perk-b { padding: 11px 18px 11px 14px; font-size: 15px; gap: 10px; }
  .perk-b svg { width: 18px; height: 18px; }
  .hotel-panel[data-hotel-v="b"] .perks-head { gap: 8px; }
}

/* ---------- Mercury Circle request ring (brief of October 15, 2026) ----------
   The ring's center reads "Anything, any hour" under the Circle mark, at the size "Price upon request" had, and stays still.
   Around it travel the eleven approved member requests as incoming message bubbles: a dark frosted fill a little lighter
   than the page, a hairline in the ring's light blue at low opacity (never solid blue: on Mercury blue means clickable),
   the benefit rows' sans, one to three lines. motion.js pops them in one by one at fixed spots around the ring (.is-pop:
   four spots on desktop, .at-1 to .at-4; two on phones). Without motion (reduced motion, or no script) four stand still
   around the ring, at the same four spots: texts 1, 4, 6 and 7. */
.ring--circle .ring-num--line { text-wrap: balance; }
.reqs { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.req { position: absolute; display: none; }
.req--s1, .req--s2, .req--s3, .req--s4 { display: block; }
.req-b {
  position: relative; display: block; box-sizing: border-box; width: max-content; max-width: 230px;
  padding: 8px 13px 9px; border-radius: 18px 18px 18px 4px;
  background: rgba(30, 36, 48, 0.82); border: 1px solid rgba(156, 195, 236, 0.26);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #E4E4E4; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: -0.005em; text-wrap: pretty;
}
.req-tail { position: absolute; left: -8px; bottom: -1px; width: 9px; height: 13px; overflow: visible; }
/* moving: a message pops in from its tail corner with a small overshoot, stays, then fades up and away */
.reqs.is-pop .req { display: block; opacity: 0; transform: translateY(-6px); transform-origin: 0 100%; transition: opacity 500ms var(--m-exit), transform 500ms var(--m-exit); }
.reqs.is-pop .req.is-on { opacity: 1; transform: none; transition: opacity 260ms ease-out, transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.reqs.is-pop .req:not(.is-on):not(.was-on) { transform: translateY(4px) scale(0.86); }
.reqs.is-pop.no-tr .req { transition: none; }

/* phones: the ring sits above the copy, smaller; the still four stand at the corners beside it */
@media (max-width: 1023.98px) {
  .circle-meter { order: -1; margin-top: 0; margin-bottom: 8px; padding: 112px 0 116px; }
  .ring--circle { width: 210px; }
  .reqs { --edge: calc(50% - min(50vw - var(--gutter), 340px)); }
  .req--s1 { left: var(--edge); bottom: calc(100% + 36px); }
  .req--s2 { right: var(--edge); top: -30px; }
  .req--s3 { left: var(--edge); top: calc(100% - 50px); }
  .req--s4 { right: var(--edge); top: calc(100% + 36px); }
  /* moving: one or two bubbles at a time at two fixed spots, upper left and lower right */
  .circle-meter.has-spots { padding: 104px 0 44px; }
  .reqs.is-pop .req.spot-a { left: var(--edge); right: auto; top: auto; bottom: calc(100% + 24px); }
  .reqs.is-pop .req.spot-b { right: var(--edge); left: auto; bottom: auto; top: calc(100% - 46px); }
}

/* desktop: one line in the center; the still four sit on the ring's diagonals, clear of the center line */
@media (min-width: 1024px) {
  .ring--circle .ring-num--line { white-space: nowrap; }
  .req-b { max-width: 262px; padding: 9px 14px 10px; font-size: 14px; }
  .req--s1, .reqs.is-pop .req.at-1 { left: auto; right: 54%; top: auto; bottom: 84%; }
  .req--s2, .reqs.is-pop .req.at-2 { left: 48%; right: auto; top: auto; bottom: 74%; }
  .req--s3, .reqs.is-pop .req.at-3 { left: auto; right: 52%; top: 74%; bottom: auto; }
  .req--s4, .reqs.is-pop .req.at-4 { left: 50%; right: auto; top: 84%; bottom: auto; }
}

/* small laptops: the ring is too small for the bubbles on its diagonals, so the still four sit above and below it, staggered */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .req--s1, .reqs.is-pop .req.at-1 { left: 0; right: auto; top: auto; bottom: calc(100% + 84px); }
  .req--s2, .reqs.is-pop .req.at-2 { right: 0; left: auto; top: auto; bottom: calc(100% - 14px); }
  .req--s3, .reqs.is-pop .req.at-3 { left: 0; right: auto; bottom: auto; top: calc(100% - 14px); }
  .req--s4, .reqs.is-pop .req.at-4 { right: 0; left: auto; bottom: auto; top: calc(100% + 84px); }
}