/* mollifly.com: the website. Dusk edition (2026-11-01): a black canvas, warm-graded dusk photography, glass cards with
   hairline borders, a honey glow behind the key moments, light Inter Tight headlines with one Instrument Serif italic
   phrase, small spaced uppercase labels. Honey is Molli's pick (and the glow); actions are warm ink pills with a dark
   round arrow knob. Every class the scripts render (js/*.js) is styled here. Notes: design/site-verdane-2026-11-01/DESIGN.md */
:root {
  color-scheme: dark;
  /* canvas and surfaces. Old token names stay so rules the scripts' markup relies on keep working:
     --ground / --cloud is the canvas, --white is a raised card surface, --raise an inset fill. */
  --bg: #000;
  --ground: #000;
  --cloud: #000;
  --white: rgba(255, 244, 228, 0.045);
  --surface: rgba(255, 244, 228, 0.045);
  --surface-2: rgba(255, 244, 228, 0.075);
  --raise: rgba(255, 244, 228, 0.08);
  --mist: rgba(255, 244, 228, 0.05);
  --solid: #14100c; /* opaque surface: dialogs, menus, sticky bars */
  /* warm ink. All three pass 4.5:1 on the canvas and on every surface above. */
  --ink: #f3efe6;
  --ink2: rgba(243, 239, 230, 0.72);
  --ink3: rgba(243, 239, 230, 0.6);
  --line: rgba(243, 239, 230, 0.11);
  --line-2: rgba(243, 239, 230, 0.4); /* control edges: 3:1 on the canvas */
  /* honey: Molli's pick and the glow. As text it is 11:1 on the canvas. */
  --honey: #f6b93b;
  --honey-ink: #f6b93b;
  --honey-tint: rgba(246, 185, 59, 0.14);
  --glow: rgba(246, 168, 59, 0.3);
  --coral: #ff9a82; /* the catch, and a limit: 8.9:1 on the canvas */
  --coral-tint: rgba(255, 138, 112, 0.14);
  --mint: #a9dcb0;
  --mint-tint: rgba(169, 220, 176, 0.14);
  /* the old action colour names point at warm ink now */
  --ocean: var(--ink);
  --cream: var(--ink);
  --on-cream: #0b0907;
  --photo-text: #fff;
  --focus: var(--honey);
  --radius: 22px;
  --radius-lg: 30px;
  --shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  --shadow-sm: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --glass: linear-gradient(180deg, rgba(255, 244, 228, 0.09), rgba(255, 244, 228, 0.035));
  --glass-dark: rgba(22, 16, 11, 0.62);
  --sans: 'Inter Tight', 'Inter Tight Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --type-display: clamp(3.25rem, 8.4vw, 7rem);
  --type-h2: clamp(2.375rem, 4.6vw, 3.625rem);
  --type-lead: 1.0625rem;
  --type-small: 0.875rem;
  --type-meta: 0.8125rem;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s6: 48px;
  --s8: 64px;
  --section: clamp(96px, 11vw, 144px);
  --wrap: min(1200px, 100% - 48px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Instrument Serif and Inter Tight (SIL OFL 1.1), self-hosted copies of the Google Fonts files. A new version gets a new
   file name, because /fonts/* is cached as immutable (_headers). Inter Tight is variable: one file covers 400 to 600. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-tight-v9-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-tight-v9-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-v5-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-v5-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic-v5-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic-v5-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fallbacks sized like the web fonts, so text doesn't rewrap and shift the page when they arrive (CLS 0) */
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 94%; ascent-override: 102%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 90%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
/* tabular figures everywhere: every price, count and the comparison table lines up, including what the scripts render */
body { font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--bg); line-height: 1.6; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--honey); color: #120c05; }
:root { accent-color: var(--honey); caret-color: var(--honey); }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 60; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #0b0907; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
h1, h2, .serif { font-family: var(--sans); font-weight: 400; letter-spacing: -0.04em; text-wrap: balance; }
h3 { font-weight: 500; letter-spacing: -0.015em; }
/* the one italic phrase in a headline */
h1 em, h2 em, .em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* small spaced labels, a honey dot in front */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink2); }
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 10px 2px rgba(246, 185, 59, 0.55); }
.label { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink3); }
.ex-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink2); }

/* ---------- focus: a honey ring, 3px, visible on the canvas, on glass and on photographs ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- buttons: a warm ink pill with a dark round arrow knob that leans forward on hover ---------- */
.btn, .go, .nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 5px 5px 5px 20px; border: 0; border-radius: 999px; background: var(--ink); color: #0b0907; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: background-color 200ms ease, transform 160ms var(--ease-out), opacity 200ms ease; }
.btn:hover, .go:hover:not(:disabled), .nav-cta:hover { background: #fff; }
.btn:active, .go:not(:disabled):active, .nav-cta:active { transform: scale(0.97); }
.chip-arrow, .knob { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #0b0907; color: var(--ink); transition: transform 350ms var(--ease-out); }
.chip-arrow svg, .knob svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover .chip-arrow, .go:hover:not(:disabled) .knob, .nav-cta:hover .chip-arrow { transform: rotate(45deg); }
.go:disabled { opacity: 0.5; cursor: default; }
/* a dark glass pill with a light knob: the quieter action */
.btn.ghosted, .btn.light { background: rgba(255, 244, 228, 0.06); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghosted:hover, .btn.light:hover { background: rgba(255, 244, 228, 0.12); }
.btn.ghosted .chip-arrow, .btn.light .chip-arrow { background: var(--ink); color: #0b0907; }
.btn.dark { background: var(--ink); }
.cta { display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--ink); color: #0b0907; border-radius: 999px; padding: 13px 24px; min-height: 48px; font-weight: 500; font-size: 15px; text-decoration: none; text-align: center; transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.cta:hover { background: #fff; }
.cta:active { transform: scale(0.97); }
.cta.ink { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.cta.ink:hover { box-shadow: inset 0 0 0 1px var(--ink); background: transparent; }
.ghost { border: 0; background: transparent; color: var(--ink2); font-weight: 500; padding: 12px 18px; min-height: 44px; border-radius: 999px; transition: color 200ms ease, background-color 200ms ease; }
.ghost:hover { color: var(--ink); background: var(--raise); }
.link-u, .band p.sub a, .prose a, .faq a, .dlg a, .updated a, .assure a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(243, 239, 230, 0.4); text-underline-offset: 4px; transition: text-decoration-color 200ms ease; }
.link-u:hover, .band p.sub a:hover, .prose a:hover, .faq a:hover { text-decoration-color: var(--honey); }

/* ---------- glass ---------- */
.glass { background: var(--glass); border: 1px solid rgba(255, 244, 228, 0.1); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 244, 228, 0.08), var(--shadow); }

/* ---------- header: a dark glass pill; logo left, links centred, My trips, the Ask Molli pill ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: 14px; pointer-events: none; }
.top .wrap { pointer-events: auto; position: relative; display: flex; align-items: center; gap: var(--s3); width: min(1180px, 100% - 32px); min-height: 62px; padding: 7px 7px 7px 18px; border-radius: 999px; background: rgba(14, 11, 8, 0.48); border: 1px solid rgba(255, 244, 228, 0.1); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); transition: background-color 400ms ease, box-shadow 400ms ease; }
.top.solid .wrap { background: rgba(14, 11, 8, 0.82); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.9); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }
.brand svg { width: 26px; height: 26px; color: var(--honey); flex: none; }
.nav { flex: 1; display: flex; justify-content: center; align-items: center; gap: var(--s4); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink2); text-decoration: none; font-size: 14px; transition: color 200ms ease; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--honey); text-decoration-thickness: 1px; text-underline-offset: 8px; }
.nav .m-only { display: none; }
.quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--ink2); text-decoration: none; font-size: 14px; transition: color 200ms ease; }
.quiet:hover, .quiet[aria-current='page'] { color: var(--ink); }
.nav-cta { min-height: 46px; font-size: 14px; padding-left: 18px; }
.nav-cta .chip-arrow { width: 36px; height: 36px; }
.nav-cta:not(:has(.chip-arrow)) { padding: 0 20px; }
.menu-btn { display: none; }
.top ~ main { padding-top: 120px; }
.top ~ main:has(> .hero:first-child) { padding-top: 0; }

/* ---------- hero: a full-bleed dusk photograph, a honey glow, the headline centred and the Ask panel below ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: max(100svh, 760px); padding: 132px 0 72px; color: var(--photo-text); background: #0b0806; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
/* the scrim: darker at the top (header) and the bottom (into the canvas), a honey glow behind the headline. White
   text on it clears 4.5:1 everywhere: the photograph is already graded dark when it is encoded. */
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 45% at 50% 42%, rgba(246, 168, 59, 0.2), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.45) 62%, #000 100%); }
.flies { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-in { width: var(--wrap); margin-inline: auto; display: grid; justify-items: center; text-align: center; }
.hero-copy { max-width: 980px; display: grid; justify-items: center; }
.hero h1 { font-size: var(--type-display); line-height: 0.96; letter-spacing: -0.05em; color: #f6f1e7; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35); }
.hero h1 em { display: block; color: #fff3dc; letter-spacing: -0.02em; }
.hero .tagline, .hero p.lead { margin-top: var(--s3); max-width: 36em; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 249, 238, 0.86); text-wrap: pretty; }
.hero .eyebrow { color: rgba(255, 249, 238, 0.82); }

/* ---------- the Ask panel: dark glass on the photograph ---------- */
.ask-card { width: min(680px, 100%); margin-top: var(--s6); padding: 8px; border-radius: 30px; display: grid; gap: 8px; text-align: left; }
.ask { position: relative; width: 100%; text-align: left; background: rgba(8, 6, 4, 0.62); color: var(--ink); border-radius: 23px; padding: 18px 18px 14px; border: 1px solid rgba(255, 244, 228, 0.06); scroll-margin-top: 140px; transition: box-shadow 200ms ease; }
.ask:focus-within { box-shadow: 0 0 0 2px var(--honey); }
.ask textarea { width: 100%; border: 0; resize: none; font-family: inherit; font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); background: transparent; outline: none; min-height: 84px; }
.ask textarea::placeholder { color: var(--ink3); }
.ask textarea:focus-visible { outline: none; }
.ask .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.kinds { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: rgba(255, 244, 228, 0.06); }
.kind { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 14px; min-height: 36px; font-weight: 500; font-size: 14px; text-decoration: none; transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.kind:hover { border-color: var(--ink); }
.kind:active { transform: scale(0.97); }
.kind[aria-pressed='true'] { background: var(--ink); color: #0b0907; border-color: var(--ink); }
.ask .kind { border: 0; padding: 6px 16px; color: var(--ink2); }
.ask .kind:hover { color: var(--ink); }
.ask .kind[aria-pressed='true'] { background: var(--ink); color: #0b0907; }
/* Voice: next to the send button; filled while listening. */
.mic { margin-left: auto; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.mic + .go { margin-left: 0; }
.mic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mic:hover { border-color: var(--ink); }
.mic:active { transform: scale(0.95); }
.mic[aria-pressed='true'] { background: var(--ink); color: #0b0907; border-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .mic[aria-pressed='true'] { animation: listen 1.4s ease-in-out infinite; } }
@keyframes listen { 50% { box-shadow: 0 0 0 8px rgba(243, 239, 230, 0.12); } }
.lock { margin-top: 12px; font-size: var(--type-meta); color: var(--ink3); }
.ask .lock a, .plan-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(243, 239, 230, 0.4); text-underline-offset: 3px; }
.plan-link { display: inline-block; margin-left: 6px; padding-block: 4px; }
.tries { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 4px 4px; }
.try { border: 1px solid rgba(255, 244, 228, 0.14); background: rgba(255, 244, 228, 0.06); color: rgba(255, 249, 238, 0.86); border-radius: 999px; padding: 6px 14px; min-height: 36px; font-size: 13.5px; transition: color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out); }
.try:hover { color: #fff; background: rgba(255, 244, 228, 0.13); }
.try:active { transform: scale(0.97); }

/* ---------- sections ---------- */
section.band { padding: var(--section) 0 0; }
.band h2, .closely h2, .h2 { font-size: var(--type-h2); line-height: 1.02; letter-spacing: -0.045em; max-width: 17em; }
.band p.sub, .closely p.sub, .lede { color: var(--ink2); font-size: var(--type-lead); margin-top: var(--s2); max-width: 56ch; text-wrap: pretty; }
.head-c { text-align: center; display: grid; justify-items: center; }
.head-c h2, .head-c p.sub, .head-c .lede { margin-inline: auto; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); flex-wrap: wrap; }
.head-row p.sub { max-width: 40ch; margin-top: 0; }
.center { text-align: center; }
.more-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: var(--s3); color: var(--ink); text-underline-offset: 4px; }
/* scroll-driven words (js/scroll.js wraps each word of a below-the-fold heading in .w; without scripts they stay whole) */
.w { display: inline-block; white-space: pre; will-change: opacity; }

/* ---------- facts: a quiet marquee of true statements ---------- */
.facts-band { text-align: center; }
.marquee { position: relative; margin-top: var(--s8); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee ul { display: flex; flex: none; gap: 0; list-style: none; padding: 0; }
.marquee li { display: inline-flex; align-items: center; gap: 14px; padding: 0 28px; font-size: clamp(1.125rem, 2vw, 1.5rem); letter-spacing: -0.02em; color: var(--ink2); white-space: nowrap; }
.marquee li::after { content: ''; width: 5px; height: 5px; margin-left: 42px; border-radius: 50%; background: rgba(246, 185, 59, 0.7); }
.marquee li em { font-family: var(--serif); font-size: 1.12em; color: var(--ink); }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.paused .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.pause { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: var(--s3); padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink2); font-size: 13px; }
.pause:hover { color: var(--ink); border-color: var(--line-2); }
.pause svg { width: 12px; height: 12px; fill: currentColor; }

/* ---------- the Molli Check: a glass photo card with the example pick and its five answers ---------- */
.photo-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; border: 1px solid rgba(255, 244, 228, 0.1); background: #120d09; }
.photo-card > img, .photo-card > picture img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.photo-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.18) 40%, rgba(8, 5, 3, 0.86)); }
.check-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s4); align-items: end; min-height: 640px; margin-top: var(--s8); padding: clamp(20px, 3.4vw, 40px); }
.check-card::before { background: linear-gradient(90deg, rgba(8, 5, 3, 0.78) 0%, rgba(8, 5, 3, 0.3) 55%, rgba(8, 5, 3, 0.55)), linear-gradient(0deg, rgba(8, 5, 3, 0.7), transparent 50%); }
.pick-head { display: grid; justify-items: start; }
.pick-head .badge { margin-top: 14px; }
.pick-head h3 { margin-top: 14px; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; max-width: 14em; }
.big-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; }
.big-total b { font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 400; letter-spacing: -0.05em; line-height: 0.95; }
.big-total span { color: var(--ink2); }
.answers { list-style: none; padding: 20px 22px; border-radius: 24px; counter-reset: a; }
.answers li { counter-increment: a; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.answers li:first-child { border-top: 0; padding-top: 4px; }
.answers li::before { content: '0' counter(a); padding-top: 3px; font-size: 12px; color: var(--ink3); }
.answers b { display: block; font-weight: 500; }
.answers span { color: var(--ink2); font-size: 15px; }
.answers .catch b { color: var(--coral); }
.fine { margin-top: var(--s2); color: var(--ink3); font-size: var(--type-meta); }

/* ---------- the real total: settled figures in glass, never counted up ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px; margin-top: var(--s8); }
.duo .photo-card { min-height: 560px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px, 3vw, 34px); }
.duo .photo-card::before { background: linear-gradient(180deg, rgba(8, 5, 3, 0.62), rgba(8, 5, 3, 0.2) 45%, rgba(8, 5, 3, 0.8)); }
.sum-top { display: flex; justify-content: space-between; gap: 12px; color: var(--ink2); font-size: 14px; }
.sum-big { margin-top: 10px; font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 400; letter-spacing: -0.05em; line-height: 1; }
.meters { display: grid; gap: 20px; padding: 22px; border-radius: 22px; }
.meter-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; color: var(--ink2); }
.meter-head b { color: var(--ink); font-weight: 500; }
.meter { height: 6px; border-radius: 6px; background: rgba(255, 244, 228, 0.1); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, rgba(246, 185, 59, 0.5), var(--honey)); }
.meter-foot { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.meter-foot b { font-weight: 500; }
.stays-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(243, 239, 230, 0.94); color: #0b0907; }
.stays-pill b { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.stays-pill span { font-size: 13px; line-height: 1.3; color: #3a332b; }
.stays-pill .dot-scale { display: block; width: 96px; height: 30px; }

/* ---------- AI: three tall photo panels, each with its glass example ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--s8); }
.feat { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3); min-height: 580px; padding: 22px; border-radius: 32px; border: 1px solid rgba(255, 244, 228, 0.1); background: #120d09; }
.feat > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.45) saturate(1.05) brightness(0.62); transition: transform 1.2s var(--ease-out); }
.feat > img.graded { filter: none; }
.feat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3) 45%, rgba(10, 7, 5, 0.94)); }
@media (hover: hover) and (pointer: fine) { .feat:hover > img { transform: scale(1.04); } }
.feat h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.125rem; line-height: 1.04; letter-spacing: -0.01em; }
.feat h3 + p { margin-top: 10px; max-width: 30ch; color: var(--ink2); font-size: 15px; }
.mock { padding: 16px; border-radius: 22px; background: var(--glass-dark); border: 1px solid rgba(255, 244, 228, 0.1); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); font-size: 14px; }
.bubble { margin-left: auto; width: fit-content; max-width: 90%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #15110e; font-size: 14px; line-height: 1.4; }
.who { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink2); }
.who svg { width: 16px; height: 16px; color: var(--honey); }
.mock .a { line-height: 1.5; }
.evidence { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--ink2); }
.evidence .meter { flex: 1; }
.quote { margin-top: 12px; padding-left: 10px; border-left: 2px solid var(--honey); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3; }
.mock .ex-tag { margin-top: 12px; }
.mock-scale { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.mock-scale circle { fill: rgba(243, 239, 230, 0.42); }
.mock-scale .me { fill: var(--honey); }
.mock-scale .halo { fill: rgba(246, 185, 59, 0.2); }
.mock-scale line { stroke: rgba(243, 239, 230, 0.22); }
.mock-scale .med { stroke: rgba(243, 239, 230, 0.45); stroke-dasharray: 3 3; }
.mock .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mock .tags span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 244, 228, 0.08); border: 1px solid rgba(255, 244, 228, 0.1); font-size: 12.5px; }
.mock .tags .ok::before, .mock .tags .warn::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.mock .tags .warn::before { background: var(--coral); }

/* ---------- trips Molli is good at: a draggable, pausable marquee of example sentences ---------- */
.drift-wrap { position: relative; margin-top: var(--s8); }
.drift { display: flex; gap: 20px; padding: 4px max(24px, (100vw - 1200px) / 2) 8px; overflow-x: auto; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; list-style: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.drift::-webkit-scrollbar { display: none; }
.drift.dragging { cursor: grabbing; user-select: none; }
.drift li { flex: 0 0 clamp(270px, 28vw, 340px); }
.trip-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; width: 100%; height: 420px; padding: 22px; border: 1px solid rgba(255, 244, 228, 0.1); border-radius: 30px; background: #120d09; color: var(--ink); text-align: left; }
.trip-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.5) saturate(1.05) brightness(0.6); pointer-events: none; transition: transform 1.2s var(--ease-out); }
.trip-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 20%, rgba(10, 7, 5, 0.92)); }
.trip-card .label { color: rgba(255, 249, 238, 0.82); }
.trip-card q { display: block; font-size: 1.3125rem; line-height: 1.3; letter-spacing: -0.02em; quotes: none; }
.trip-card q::before { content: '“'; font-family: var(--serif); color: var(--honey); }
.trip-card q::after { content: '”'; font-family: var(--serif); color: var(--honey); }
.trip-card .fill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 4px 4px 4px 14px; border-radius: 999px; background: rgba(243, 239, 230, 0.94); color: #0b0907; font-size: 13px; font-weight: 500; }
.trip-card .fill .chip-arrow { width: 30px; height: 30px; }
@media (hover: hover) and (pointer: fine) { .trip-card:hover img { transform: scale(1.05); } .trip-card:hover .chip-arrow { transform: rotate(45deg); } }
.drift-ctrls { display: flex; justify-content: flex-end; align-items: center; gap: 10px; width: var(--wrap); margin: var(--s3) auto 0; }
.round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 244, 228, 0.04); color: var(--ink); transition: background-color 200ms ease, border-color 200ms ease; }
.round svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round:hover:not(:disabled) { background: rgba(255, 244, 228, 0.12); border-color: var(--ink); }
.round:disabled { opacity: 0.4; cursor: default; }
.round .on-pause { display: none; }
.round[aria-pressed='true'] .on-play { display: none; }
.round[aria-pressed='true'] .on-pause { display: block; }
.city-links { width: var(--wrap); margin: var(--s4) auto 0; color: var(--ink3); font-size: 14px; line-height: 2.2; }
.city-links a { display: inline-block; margin-right: 14px; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.city-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- your trip: a dark glass panel ---------- */
.panel { position: relative; margin-top: var(--s8); padding: clamp(14px, 2vw, 22px); border-radius: 34px; background: linear-gradient(180deg, rgba(255, 244, 228, 0.06), rgba(255, 244, 228, 0.02)); border: 1px solid rgba(255, 244, 228, 0.1); box-shadow: 0 60px 140px -60px var(--glow); }
.panel-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; }
.tile { padding: 22px; border-radius: 24px; background: rgba(10, 8, 6, 0.7); border: 1px solid var(--line); }
.tile h3 { font-size: 13px; font-weight: 500; color: var(--ink2); letter-spacing: 0; }
.tile .stay-name { margin-top: 12px; font-size: 1.625rem; font-weight: 400; letter-spacing: -0.035em; line-height: 1.15; }
.tile .when { margin-top: 6px; color: var(--ink2); font-size: 15px; }
.tile .quote-total { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.tile .quote-total b { font-size: 2.5rem; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.tile .quote-total span { color: var(--ink2); font-size: 14px; }
.steps-mini { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 10px; }
.steps-mini li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.steps-mini li:first-child { border-top: 0; }
.steps-mini li::before { content: ''; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.steps-mini li.done::before { border: 0; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5' fill='none' stroke='%23120c05' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.steps-mini li.now::before { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(246, 185, 59, 0.16); }
.steps-mini b { display: block; font-weight: 500; }
.steps-mini span { color: var(--ink2); font-size: 14.5px; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding: 14px 14px 14px 22px; border-radius: 24px; background: rgba(10, 8, 6, 0.7); border: 1px solid var(--line); color: var(--ink2); font-size: 15px; }

/* ---------- look closely: two profile cards over a dusk photograph ---------- */
.closely { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--section); padding: clamp(110px, 13vw, 170px) 0; }
.closely > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.closely::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 22%, rgba(0, 0, 0, 0.5) 70%, #000 100%), radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.35), transparent); }
.closely .head-c { position: relative; z-index: 1; }
.profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: space-between; gap: 20px; margin-top: var(--s8); }
.profile { padding: 20px; border-radius: 24px; background: rgba(18, 13, 9, 0.72); border: 1px solid rgba(255, 244, 228, 0.12); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3); box-shadow: var(--shadow); }
.profile h3 { margin-top: 10px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.625rem; line-height: 1.1; }
.profile dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin-top: 16px; font-size: 14px; }
.profile dt { color: var(--ink2); }
.profile dd { margin: 0; text-align: right; font-weight: 500; }
.profile dd.hi { color: var(--honey); }
.profile dd.no { color: var(--coral); }
.profile .note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 244, 228, 0.06); color: var(--ink2); font-size: 13.5px; line-height: 1.45; }
.closely .btn { margin-top: var(--s4); }

/* ---------- FAQ: accordions ---------- */
.faq-v { display: grid; justify-items: center; }
.faq-list { width: min(760px, 100%); margin-top: var(--s6); display: grid; gap: 10px; }
.faq-list details { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); transition: background-color 300ms ease, border-color 300ms ease; }
.faq-list details[open] { background: var(--surface-2); border-color: rgba(243, 239, 230, 0.16); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 14px 14px 14px 24px; cursor: pointer; list-style: none; font-size: 1.0625rem; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ''; flex: none; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat, rgba(255, 244, 228, 0.07); transition: transform 350ms var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 24px 22px; color: var(--ink2); max-width: 62ch; }
.faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size 380ms var(--ease-out), content-visibility 380ms allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
.faq-more { margin-top: var(--s4); color: var(--ink3); text-align: center; }
:root { interpolate-size: allow-keywords; }

/* ---------- the trip form ---------- */
.planner { margin-top: var(--s8); padding: clamp(22px, 4vw, 44px); border-radius: 32px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 120px; }
.planner h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; }
.planner > p { color: var(--ink2); margin-top: 8px; }
.starter { display: grid; grid-template-columns: 2fr 1fr 1fr 0.7fr 0.9fr 0.9fr; gap: 12px; margin-top: 24px; scroll-margin-top: 140px; }
.starter label, .trip label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink2); }
.starter input, .starter select, .trip input, .trip select { font-size: 16px; font-weight: 500; color: var(--ink); min-height: 46px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(0, 0, 0, 0.35); width: 100%; }
input[type='date']::-webkit-calendar-picker-indicator { filter: invert(0.9) sepia(0.3); }
.starter .prio { grid-column: 1 / -1; border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.starter .prio legend { float: left; margin-right: 6px; font-weight: 500; font-size: 15px; color: var(--ink); }
.starter .prio button { border: 1px solid var(--line-2); background: transparent; color: var(--ink2); border-radius: 999px; padding: 8px 14px; font-weight: 500; min-height: 40px; }
.starter .prio button[aria-pressed='true'] { background: var(--ink); color: #0b0907; border-color: var(--ink); }
.starter .preview { grid-column: 1 / -2; align-self: center; color: var(--ink2); font-size: 14px; }
.starter .go { grid-column: -2 / -1; min-height: 48px; padding: 6px 22px; justify-self: stretch; }
.typed, .resume { margin-top: 18px; color: var(--ink2); }
.typed q, .resume b { color: var(--ink); font-weight: 500; }
.resume a { color: var(--ink); }
select option { background: var(--solid); color: var(--ink); }

/* ---------- closing call to action ---------- */
.closer-band { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--section); padding: clamp(140px, 18vw, 230px) 0; text-align: center; }
.closer-band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.closer-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.45) 75%, #000 100%), radial-gradient(45% 40% at 50% 55%, rgba(246, 168, 59, 0.22), transparent 70%); }
.closer-band h2 { margin-inline: auto; font-size: clamp(2.75rem, 6.6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.05em; max-width: 13em; }
.closer-band h2 em { display: block; }
.closer-band p { margin: var(--s3) auto 0; max-width: 44ch; color: rgba(255, 249, 238, 0.84); }
.closer-band .btn { margin-top: var(--s4); }

/* ---------- footer ---------- */
.foot { margin-top: var(--section); padding: var(--s8) 0 0; border-top: 1px solid var(--line); color: var(--ink2); font-size: var(--type-small); overflow: hidden; }
.closer-band + .foot, main:has(> .closer-band:last-child) + .foot { margin-top: 0; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s4); padding-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.foot-about { max-width: 34ch; font-size: 15px; }
.foot-about .brand { margin-bottom: var(--s2); }
.foot-h { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink3); margin-bottom: 12px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.foot li a, .foot li > span { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink2); text-decoration: none; font-size: 15px; }
.foot li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: var(--s3) 0; color: var(--ink3); }
.wordmark { display: block; margin: 0 0 -0.22em; font-family: var(--serif); font-style: italic; font-size: clamp(5rem, 22vw, 20rem); line-height: 0.9; letter-spacing: -0.03em; text-align: center; white-space: nowrap; user-select: none; color: transparent; background: linear-gradient(180deg, rgba(243, 239, 230, 0.16), rgba(243, 239, 230, 0.02) 80%); -webkit-background-clip: text; background-clip: text; }

/* ============ inner pages: results, stay, trips, search, fly, legal, city guides ============ */
.page-title { font-size: clamp(2.75rem, 6.4vw, 4.75rem); line-height: 1; letter-spacing: -0.05em; }
.band h1 + p.sub, .page-title + p.sub { margin-top: var(--s3); }
.top ~ main.band { padding-top: 156px; }
.crumbs { font-size: var(--type-small); color: var(--ink3); margin-bottom: var(--s3); }
.crumbs a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(243, 239, 230, 0.35); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.updated { font-size: var(--type-small); color: var(--ink3); margin-top: var(--s6); }

/* cards on the canvas: glass, hairline border */
.card, .box, .alt, .scale, .stats div, .tally div, .trip, .trip-sum, .filters, .prog-side:not(:empty), .reading li, .row-item, .hub a, .table, .list .empty { border: 1px solid var(--line); }
.card { background: var(--surface); border-radius: var(--radius); padding: 28px; }
.card h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; }
.card p { color: var(--ink2); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.why .card { position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; }
.why .card::before { content: ''; position: absolute; inset: auto -30% -60% auto; width: 80%; height: 120%; background: radial-gradient(closest-side, rgba(246, 168, 59, 0.14), transparent); pointer-events: none; }
.why .card h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.75rem; }
.dot { width: 44px; height: 44px; border-radius: 14px; background: var(--honey-tint); display: grid; place-items: center; font-size: 22px; }
.cities { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; }
.cities a { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; font-size: 15px; text-decoration: none; color: var(--ink); background: transparent; transition: border-color 200ms ease, background-color 200ms ease; }
.cities a:hover { border-color: var(--ink); background: rgba(255, 244, 228, 0.06); }
.band p.cities a { color: var(--ink); text-decoration: none; }
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--s6); text-align: left; }
.areas .card h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.875rem; }
.areas .try { margin-top: 16px; color: var(--ink); background: transparent; border-color: var(--line-2); }
.areas .try:hover { background: rgba(255, 244, 228, 0.08); border-color: var(--ink); }
.city { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; color: var(--photo-text); background: var(--surface); }
.city img { width: 100%; height: 100%; object-fit: cover; }
.city .cap { position: absolute; inset: auto 0 0 0; padding: 22px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); }

/* city guide hero */
.city-hero { min-height: max(86svh, 680px); }
.city-hero .hero-bg img { filter: sepia(0.45) saturate(1.05) brightness(0.62) contrast(1.05); }
.city-hero .crumbs { color: rgba(255, 249, 238, 0.82); }
.city-hero .crumbs a { color: #fff; }
.city-hero .kicker { margin-bottom: 0; }
.city-hero h1 { font-size: clamp(3rem, 7vw, 6rem); }
.city-hero .lock { margin: 0; }
.city-hero .ask .row { justify-content: space-between; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 249, 238, 0.82); }
.kicker::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 10px 2px rgba(246, 185, 59, 0.55); }

/* results */
.res-head { padding: 40px 0 8px; }
.res-head .q { color: var(--ink2); font-weight: 500; }
.res-head h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.045em; line-height: 1.02; margin-top: 6px; }
.res-head .meta { color: var(--ink2); margin-top: 8px; }
.pick { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(246, 185, 59, 0.35); margin-top: 24px; box-shadow: 0 50px 120px -60px var(--glow); }
.pick .photo { min-height: 360px; background: var(--raise) center / cover no-repeat; }
.pick .body { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; background: var(--honey-tint); color: var(--honey); font-weight: 600; font-size: 13px; border-radius: 999px; padding: 5px 12px; border: 1px solid rgba(246, 185, 59, 0.3); }
.pick h2 { font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1.08; }
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price b { font-size: 48px; font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
.price .under { color: var(--mint); font-weight: 600; }
.reasons { display: grid; gap: 8px; padding: 0; list-style: none; color: var(--ink2); }
.reasons li::before { content: '✓'; color: var(--mint); font-weight: 700; margin-right: 10px; }
.risk { background: var(--coral-tint); border: 1px solid rgba(255, 138, 112, 0.25); border-radius: 14px; padding: 12px 14px; color: var(--ink2); font-size: 15px; }
.risk b { color: var(--coral); }
.scale { margin-top: 24px; background: var(--surface); border-radius: var(--radius); padding: 24px 24px 12px; }
.scale h3 { font-size: 18px; }
.scale p { color: var(--ink2); font-size: 15px; }
.scale svg { width: 100%; height: auto; margin-top: 8px; }
/* the price scale the scripts draw (ui.js scaleSvg) carries light-theme colours as attributes; CSS wins over those */
.scale svg line:first-of-type { stroke: rgba(243, 239, 230, 0.2); }
.scale svg line[stroke-dasharray] { stroke: rgba(243, 239, 230, 0.5); }
.scale svg text { fill: rgba(243, 239, 230, 0.72); }
.scale svg circle:not([fill='#e59a1f']) { fill: rgba(243, 239, 230, 0.42); }
.scale svg circle[fill='#e59a1f'], .scale svg .pin line { fill: var(--honey); stroke: var(--honey); }
.list { margin-top: 24px; display: grid; gap: 10px; }
.row-item { display: grid; grid-template-columns: 34px 96px 1fr auto; gap: 18px; align-items: center; background: var(--surface); border-radius: 20px; padding: 12px 18px 12px 14px; text-decoration: none; transition: border-color 200ms ease, background-color 200ms ease; }
.row-item:hover { border-color: rgba(243, 239, 230, 0.28); background: var(--surface-2); }
.row-item .n { color: var(--ink3); font-weight: 600; text-align: center; }
.row-item img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--raise); }
.row-item b { display: block; font-weight: 500; letter-spacing: -0.01em; }
.row-item small { color: var(--ink2); }
.row-item .p { font-weight: 500; font-size: 20px; text-align: right; }
.row-item .p small { display: block; font-weight: 400; font-size: 13px; }
.row-item .p small.over { color: var(--coral); font-weight: 600; }
.row-item .tags { display: block; color: var(--ink2); font-weight: 500; margin-top: 2px; }
.row-item a.name { text-decoration: none; }
.row-item small.leg { display: block; color: var(--ink); }
.row-item a.name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.row-item .cmp { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.row-item .cmp input { width: 18px; height: 18px; }
.list .empty { padding: 24px; text-align: center; color: var(--ink2); background: var(--surface); border-style: dashed; border-color: var(--line-2); border-radius: 20px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.stats div { background: var(--surface); border-radius: 20px; padding: 16px 18px; }
.stats b { display: block; font-size: 28px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; }
.stats span { color: var(--ink2); font-size: 14px; }
.whynot, .unknown { color: var(--ink2); font-size: 15px; }
.whynot b, .unknown b { color: var(--ink); font-weight: 500; }
.trip { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.6fr 0.8fr 1fr; gap: 10px; margin-top: 20px; padding: 14px; background: var(--surface); border-radius: 20px; }
.trip .wide { grid-column: 1 / -2; }
.trip .go { align-self: end; min-height: 46px; padding: 6px 20px; }
.outcome { margin-top: 18px; font-size: 17px; font-weight: 500; }
.alts { margin-top: 40px; }
.alts h3, .explore-head h3 { font-size: 1.625rem; font-weight: 400; letter-spacing: -0.035em; }
.alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.alt { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color 200ms ease, background-color 200ms ease; }
.alt:hover { border-color: rgba(243, 239, 230, 0.28); background: var(--surface-2); }
.alt .photo { position: relative; height: 180px; background: var(--raise) center / cover no-repeat; }
.alt .photo .badge { position: absolute; top: 12px; left: 12px; background: rgba(12, 9, 6, 0.8); color: var(--ink); border-color: rgba(255, 244, 228, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.alt .body { padding: 18px 20px 20px; display: grid; gap: 6px; }
.alt .name { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.alt small { color: var(--ink2); font-size: 14px; }
.alt .price b { font-size: 34px; }
.alt .diff { color: var(--ink); font-weight: 500; font-size: 14px; }
.alt .risk { font-size: 14px; }
/* the booked room beside the price, and a room that limits who can stay (shared, women only) */
.room-facts { color: var(--ink2); font-size: 14px; margin-top: 4px; }
.flag, .fails { justify-self: start; display: inline-block; font-size: 13px; font-weight: 500; border-radius: 999px; padding: 3px 10px; background: var(--coral-tint); color: var(--coral); }
.pick .flag { margin-top: 6px; }
/* no stay met everything asked: the statement leads, then the changes, then the nearest stays */
.nomatch { margin-top: 24px; }
.nomatch h2 { font-size: 1.75rem; letter-spacing: -0.035em; text-wrap: pretty; }
.nomatch > .meta { margin-top: 8px; max-width: 60ch; color: var(--ink2); }
.nomatch .adjust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nomatch a.kind, .nomatch button.kind { min-height: 44px; }
.nomatch h3 { margin-top: 28px; font-size: 20px; }
.criteria { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.criteria li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; }
.criteria li span { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.criteria .match span { background: var(--mint-tint); color: var(--mint); }
.criteria .unverified span { background: var(--raise); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.criteria .unchecked span { background: var(--raise); color: var(--ink2); }
.criteria .no span { background: var(--coral-tint); color: var(--coral); }
.explore { margin-top: 44px; }
.explore-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; padding: 12px; background: var(--surface); border-radius: 20px; }
.filters .kind { min-height: 40px; }
.filters .range { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink2); margin-right: 8px; }
.filters .range input { width: 160px; }
.filters output { color: var(--ink); min-width: 92px; }
.filters .sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink2); }
.filters select { font-size: 15px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(0, 0, 0, 0.35); color: var(--ink); }
.tray { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 18px; background: rgba(20, 16, 12, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.tray span { margin-right: auto; font-weight: 500; }
.tray[hidden] { display: none; }
.trip-sum { margin-top: 16px; background: var(--surface); border-radius: 20px; }
.trip-sum > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; min-height: 48px; }
.trip-sum > summary::-webkit-details-marker { display: none; }
.trip-sum > summary span { color: var(--ink2); font-size: 15px; min-width: 0; }
.trip-sum > summary b { flex: none; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 239, 230, 0.4); }
.trip-sum[open] > summary b { color: var(--ink2); }
.trip-sum .trip { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 20px 20px; background: transparent; }
.more-stays { justify-self: center; margin-top: 4px; min-height: 44px; }
.more-cities { margin-top: 24px; color: var(--ink2); line-height: 2; }
.more-cities a { margin-right: 10px; font-weight: 500; color: var(--ink); }
details.all { margin-top: 32px; }
details.all > summary { cursor: pointer; display: inline-flex; min-height: 44px; align-items: center; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; font-weight: 500; list-style: none; }
details.all > summary::-webkit-details-marker { display: none; }
details.all[open] > summary { margin-bottom: 8px; }
.demo-replay[hidden] { display: none; }
dialog.compare { width: min(980px, 100% - 24px); }
.cmp-wrap { overflow-x: auto; margin-top: 12px; }
.cmp-wrap table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.cmp-wrap th, .cmp-wrap td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cmp-wrap thead th { font-size: 15px; position: sticky; top: 0; background: var(--solid); font-weight: 500; }
.cmp-wrap tbody th { color: var(--ink2); font-weight: 500; width: 150px; }
.cmp-wrap tr.same td { color: var(--ink3); }
.cmp-head { position: sticky; top: -1px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--solid); padding: 4px 0 8px; }
.cmp-head h2 { margin: 0; }
.cmp-head h2:focus { outline: none; }

/* waiting for Molli */
.wait { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.wait img { width: 160px; margin: 0 auto 20px; animation: scan 1.4s ease-in-out infinite; transform: rotate(-38deg); }
@keyframes scan { 50% { transform: rotate(-30deg) translate(10px, -10px); } }
.wait h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.04em; line-height: 1.12; }
.wait h2 { font-size: 1.875rem; line-height: 1.2; }
.wait p { color: var(--ink2); margin-top: 6px; }
.steps { margin: 22px auto 0; display: grid; gap: 8px; text-align: left; width: min(360px, 100%); color: var(--ink3); font-weight: 500; }
.steps .on { color: var(--ink); }
.steps .on::before { content: '● '; color: var(--honey); }
.err { color: var(--coral); font-weight: 500; margin-top: 10px; }

/* search in progress (js/search.js) */
.progress { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; min-height: 70vh; padding-top: 16px; }
.prog-main h1 { display: flex; align-items: center; gap: 14px; font-size: clamp(2.25rem, 4.4vw, 3.25rem); letter-spacing: -0.045em; margin: 6px 0 18px; }
.prog-main h1 img { width: 56px; height: 56px; transform: rotate(-38deg); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(-38deg) translateY(-5px); } }
.progress .q { color: var(--ink2); }
.stages { list-style: none; padding: 0; display: grid; gap: 4px; margin-bottom: 22px; }
.stages li { position: relative; padding: 8px 0 8px 32px; color: var(--ink3); font-weight: 500; transition: color 300ms ease; }
.stages li::before { content: ''; position: absolute; left: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--line-2); }
.stages li.on { color: var(--ink); }
.stages li.on::before { border-color: var(--honey); border-top-color: transparent; animation: spin 900ms linear infinite; }
.stages li.done { color: var(--ink2); }
.stages li.done::before { content: '✓'; border: 0; background: var(--mint); color: #120c05; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chips-row .chip { background: var(--raise); color: var(--ink); font-weight: 500; font-size: 14px; border-radius: 999px; padding: 6px 12px; border: 1px solid var(--line); animation: pop 400ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
.fix { font-size: 14px; font-weight: 500; color: var(--ink2); }
.prog-foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; color: var(--ink2); font-size: 14px; }
.prog-foot b { color: var(--ink); font-weight: 500; }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.tally div { background: var(--surface); border-radius: 20px; padding: 14px 16px; animation: pop 400ms var(--ease-out) both; }
.tally b { display: block; font-size: 30px; font-weight: 400; letter-spacing: -0.035em; }
.tally span { color: var(--ink2); font-size: 14px; }
.dots { position: relative; height: 48px; margin: 18px 6px 8px; border-bottom: 2px solid var(--line); }
.dots i { position: absolute; bottom: 4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ink3); opacity: 0.55; animation: drop 500ms var(--ease-out) both; animation-delay: calc(min(var(--i), 80) * 12ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-26px) scale(0.6); } }
.reading { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 8px; }
.reading li { font-size: 15px; padding: 8px 12px; background: var(--surface); border-radius: 12px; animation: pop 350ms var(--ease-out) both; transition: border-color 300ms ease, background-color 300ms ease, transform 300ms var(--ease-out); }
.reading li::before { content: '📖 '; }
.reading li.lit { border-color: rgba(246, 185, 59, 0.5); background: var(--honey-tint); transform: translateX(4px); }
.prog-side:not(:empty) { background: var(--surface); border-radius: var(--radius); padding: 24px; position: sticky; top: 100px; animation: pop 500ms var(--ease-out) both; }
.prog-side h2 { font-size: 1.375rem; letter-spacing: -0.03em; }
.prog-side .area { margin-top: 14px; animation: pop 400ms var(--ease-out) both; animation-delay: calc(var(--i) * 120ms); }
.prog-side .area p { color: var(--ink2); font-size: 15px; }
.prog-side > a { display: inline-block; margin-top: 16px; color: var(--ink); }

/* Ask box help: completions, then what the sentence still lacks */
.suggest { list-style: none; margin: 6px 0 0; padding: 6px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.suggest[hidden] { display: none; }
.suggest li { padding: 9px 12px; border-radius: 12px; cursor: pointer; font-size: 15px; color: var(--ink); display: flex; gap: 10px; align-items: baseline; min-height: 40px; }
.suggest li:hover, .suggest li[aria-selected='true'] { background: var(--raise); }
.suggest li:first-child::after { content: '→'; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink3); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
.suggest .sg-have { color: var(--ink3); }
@media (max-width: 600px) { .suggest .sg-have { display: none; } .suggest li b::before { content: '+ '; color: var(--ink3); } }
.suggest b { font-weight: 600; }
.suggest .sg-label { flex: none; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--raise); border-radius: 999px; padding: 2px 8px; }
.hints { display: flex; flex-wrap: wrap; gap: 6px; }
.hints:not(:empty) { margin-top: 8px; }
.hint { border: 1px dashed var(--line-2); background: transparent; color: var(--ink2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; min-height: 34px; }
.hint:hover { border-style: solid; color: var(--ink); }
@media (hover: none) { .suggest li:first-child::after { content: none; } }

/* stay page */
.gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 8px; border-radius: var(--radius-lg); overflow: hidden; margin-top: 24px; }
.gallery div, .gallery .tile { background: var(--raise) center / cover no-repeat; border: 0; padding: 0; border-radius: 0; cursor: zoom-in; transition: filter 200ms ease; }
.gallery .tile:hover { filter: brightness(1.1); }
.gallery .tile:disabled { cursor: default; }
.gallery > :first-child { grid-row: span 2; }
.gallery .all-photos { position: absolute; right: 14px; bottom: 14px; background: rgba(12, 9, 6, 0.82); color: var(--ink); border: 1px solid rgba(255, 244, 228, 0.18); border-radius: 999px; padding: 10px 16px; font-weight: 500; min-height: 44px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.stay-head .head-acts { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.stay-head .head-acts .ghost { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; }
.head-price { margin-left: auto; color: var(--ink2); }
.head-price b { color: var(--ink); font-size: 22px; font-weight: 400; letter-spacing: -0.03em; }
.head-book { min-height: 44px; }
.tabs { position: sticky; top: 92px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 20px; padding: 6px; background: rgba(20, 16, 12, 0.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 999px; border: 1px solid var(--line); width: max-content; max-width: 100%; }
.tabs a { white-space: nowrap; text-decoration: none; color: var(--ink2); font-weight: 500; font-size: 14px; padding: 10px 14px; border-radius: 999px; }
.tabs a:hover { background: var(--raise); color: var(--ink); }
.stay { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; margin-top: 24px; align-items: start; }
.stay .col > * + *, .late > * + * { margin-top: 20px; }
.box { background: var(--surface); border-radius: var(--radius); padding: 26px; scroll-margin-top: 150px; }
.box + .box { margin-top: 20px; }
#check, #ask { scroll-margin-top: 140px; }
.box h3 { font-size: 15px; margin-bottom: 6px; }
.box h2 { font-size: 1.75rem; letter-spacing: -0.035em; line-height: 1.15; margin-bottom: 10px; }
.check { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.box.check { border-color: rgba(246, 185, 59, 0.3); }
.check h2 { display: flex; align-items: center; gap: 10px; }
.check .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 12px 2px rgba(246, 185, 59, 0.5); }
.check .whynot, .check .risk, .check .unknowns { margin-top: 14px; }
.unknowns ul { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 8px; }
.unknowns li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: var(--ink2); }
button.link { background: none; border: 0; padding: 4px 0; min-height: 32px; color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 239, 230, 0.5); white-space: nowrap; }
.bars { display: grid; gap: 10px; margin-top: 14px; }
.bar { display: grid; grid-template-columns: 130px 1fr 36px; gap: 12px; align-items: center; font-size: 14px; }
.bar i { height: 6px; border-radius: 999px; background: var(--raise); position: relative; overflow: hidden; }
.bar i::after { content: ''; position: absolute; inset: 0; width: calc(var(--v) * 100%); background: linear-gradient(90deg, rgba(243, 239, 230, 0.5), var(--ink)); border-radius: inherit; }
.bar b { text-align: right; font-weight: 500; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
ul.cons { list-style: none; padding: 0; display: grid; gap: 6px; color: var(--ink2); }
ul.cons li::before { content: '– '; color: var(--coral); font-weight: 700; }
.room { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 20px; margin-top: 12px; }
.room.mine { border-color: rgba(246, 185, 59, 0.5); background: var(--honey-tint); }
.room img { width: 140px; height: 100px; object-fit: cover; border-radius: 12px; }
.room b { display: block; margin: 4px 0 2px; font-weight: 500; }
.room small { color: var(--ink2); }
.tags-line { color: var(--ink2); font-size: 14px; margin-top: 6px; }
details.more { margin-top: 12px; }
details.more > summary { cursor: pointer; font-weight: 500; color: var(--ink); min-height: 32px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 239, 230, 0.5); }
.about p + p, details.more p { margin-top: 8px; }
.about p { color: var(--ink2); }
.map { width: 100%; height: 280px; border: 0; border-radius: 16px; margin-top: 12px; background: var(--raise); filter: invert(0.9) hue-rotate(180deg) sepia(0.25); }
.facts-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin-top: 8px; }
.facts-grid dt { color: var(--ink2); }
.facts-grid dd { margin: 0; font-weight: 500; }
ul.fac { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
ul.fac li { background: var(--raise); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.split { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0; padding: 14px 0; border-block: 1px solid var(--line); }
.split dt { color: var(--ink2); }
.split dd { margin: 0; font-weight: 500; text-align: right; }
.book-bar { display: none; }
.side { position: sticky; top: 100px; }
.facts { display: grid; gap: 8px; margin: 14px 0 18px; color: var(--ink2); font-size: 15px; }
.qa form { display: flex; gap: 8px; margin-top: 12px; }
.qa input { flex: 1; border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 16px; background: rgba(0, 0, 0, 0.35); color: var(--ink); }
.qa .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.answer { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.answer .v { font-weight: 600; }
.answer blockquote { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--honey); color: var(--ink2); font-size: 15px; }
.rates { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.rates legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.rate { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.rate:has(input:checked) { border-color: rgba(246, 185, 59, 0.55); background: var(--honey-tint); }
.rate input { margin-top: 4px; }
.rate b { display: block; font-weight: 500; }
.rate small { color: var(--ink2); }
dialog.viewer { width: min(1100px, 100% - 24px); max-height: calc(100% - 24px); background: #050403; color: #fff; padding: 52px 0 16px; border: 0; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, 0.88); }
.viewer-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.viewer-strip figure { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: grid; gap: 8px; justify-items: center; }
.viewer-strip img { max-height: 72vh; width: 100%; object-fit: contain; }
.viewer-strip figcaption { color: rgba(255, 255, 255, 0.78); font-size: 14px; text-transform: capitalize; }
.viewer .close { position: absolute; top: 10px; right: 12px; background: rgba(255, 255, 255, 0.14); color: #fff; border-color: transparent; }
.viewer .nav-btn { position: absolute; top: 50%; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: #0b0907; font-size: 28px; line-height: 1; }
.viewer .prev { left: 12px; }
.viewer .next { right: 12px; }

/* dialogs: consent and booking */
dialog { margin: auto; border: 1px solid rgba(255, 244, 228, 0.12); border-radius: 26px; padding: 0; background: var(--solid); color: var(--ink); width: min(560px, 100% - 32px); max-height: calc(100% - 32px); box-shadow: 0 50px 140px -30px rgba(0, 0, 0, 0.95), 0 0 120px -40px var(--glow); }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dlg { padding: 28px; display: grid; gap: 14px; }
.dlg h2 { font-size: 2rem; letter-spacing: -0.04em; line-height: 1.1; }
.dlg p { color: var(--ink2); }
.dlg .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.dlg .go { padding: 0 22px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 500; font-size: 14px; }
.field input { border: 1px solid var(--line-2); border-radius: 14px; padding: 13px 14px; background: rgba(0, 0, 0, 0.35); color: var(--ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payframe { width: 100%; height: 560px; border: 0; border-radius: 16px; background: #fff; }

/* how it works, legal pages, the destinations index */
.faq > * { max-width: 760px; }
.faq h2, .prose h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.04em; }
.how h2 { margin-top: var(--s8); }
.how .crumbs + .page-title { margin-top: 0; }
.how p.sub { max-width: 64ch; }
.steps-list { list-style: none; padding: 0; margin-top: var(--s3); counter-reset: step; display: grid; gap: 10px; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s2); padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); color: var(--ink2); }
.steps-list li::before { content: '0' counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(246, 185, 59, 0.4); color: var(--honey); font-size: 13px; }
.steps-list b { color: var(--ink); font-weight: 500; }
.limits { padding-left: 22px; display: grid; gap: 10px; margin-top: var(--s2); color: var(--ink2); }
.limits li::marker { color: var(--honey); }
.prose { max-width: 760px; color: var(--ink2); }
.prose > * + * { margin-top: var(--s2); }
.prose h2 { color: var(--ink); margin-top: var(--s6); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ol, .prose ul { padding-left: 22px; display: grid; gap: 10px; }
.prose .meta { color: var(--ink3); }
.table { overflow-x: auto; border-radius: 16px; background: var(--surface); }
.table table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.table th { color: var(--ink); font-weight: 500; }
.table tr:last-child td { border-bottom: 0; }
.hub { list-style: none; padding: 0; margin-top: var(--s6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hub a { position: relative; overflow: hidden; display: block; height: 100%; padding: 22px 24px; border-radius: 22px; background: var(--surface); text-decoration: none; transition: border-color 200ms ease, background-color 200ms ease; }
.hub a::after { content: ''; position: absolute; right: 20px; top: 22px; width: 8px; height: 8px; border-top: 1.5px solid var(--ink3); border-right: 1.5px solid var(--ink3); transform: rotate(45deg); transition: transform 300ms var(--ease-out), border-color 200ms ease; }
.hub b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.875rem; letter-spacing: -0.01em; line-height: 1.1; }
.hub span { display: block; margin-top: 6px; color: var(--ink2); font-size: var(--type-small); }
.hub a:hover { border-color: rgba(246, 185, 59, 0.4); background: var(--surface-2); }
.hub a:hover::after { border-color: var(--honey); transform: translateX(3px) rotate(45deg); }
.assure { list-style: none; padding: var(--s4) 0 0; margin-top: var(--s6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); border-top: 1px solid var(--line); color: var(--ink2); font-size: var(--type-small); }
.assure b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }

/* ---------- motion: transform and opacity only; js/motion.js adds .in, js/scroll.js drives the home page ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
[role='tabpanel']:not([hidden]) { animation: panel 420ms var(--ease-out) both; }
@keyframes panel { from { opacity: 0; transform: translateY(6px); } }
.scale circle { transform-box: fill-box; transform-origin: 50% 100%; }
.js .scale[data-reveal] circle, .js .scale[data-reveal] .pin { opacity: 0; }
.js .scale[data-reveal].in circle { opacity: 1; animation: drop 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 9ms + 200ms); }
.js .scale[data-reveal].in .pin { animation: pin 600ms var(--ease-out) both; animation-delay: 250ms; }
@keyframes pin { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; } }

/* ---------- tablets and phones ---------- */
@media (max-width: 1080px) {
  .check-card, .duo, .panel-grid { grid-template-columns: minmax(0, 1fr); }
  .check-card { min-height: 0; padding-top: 220px; }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .feat { min-height: 520px; }
  .profiles { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .profile { width: min(420px, 100%); }
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root { --wrap: min(1200px, 100% - 32px); }
  .top { padding-top: 10px; }
  .top .wrap { width: calc(100% - 20px); min-height: 58px; gap: 8px; padding: 6px 6px 6px 14px; }
  .brand { font-size: 17px; gap: 8px; margin-right: auto; }
  .brand svg { width: 24px; height: 24px; }
  .quiet { display: none; }
  .nav-cta { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .nav-cta .chip-arrow { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 244, 228, 0.06); color: var(--ink); font-size: 14px; font-weight: 500; }
  .nav { display: none; }
  .nav .m-only { display: inline-flex; }
  .top.open .nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; justify-content: stretch; gap: 0; margin: 0; padding: 8px 18px; background: var(--solid); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
  .top.open .nav a { min-height: 52px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink); }
  .top.open .nav a:last-child { border-bottom: 0; }
  .top ~ main { padding-top: 96px; }
  .top ~ main.band { padding-top: 120px; }
  section.band { padding-top: 96px; }
  .hero { min-height: 0; padding: 112px 0 48px; }
  .hero h1 { font-size: clamp(2.875rem, 13vw, 4.5rem); }
  .hero .tagline, .hero p.lead { font-size: 1rem; margin-top: var(--s2); }
  .ask-card { margin-top: var(--s4); padding: 6px; border-radius: 26px; }
  .ask { padding: 14px 14px 12px; border-radius: 21px; }
  .ask textarea { font-size: 17px; min-height: 76px; }
  .marquee { margin-top: var(--s6); }
  .check-card { padding: 200px 16px 16px; border-radius: 26px; }
  .answers { padding: 16px; }
  .duo .photo-card { min-height: 460px; border-radius: 26px; }
  .feat, .trip-card { border-radius: 26px; }
  .drift { padding-inline: 16px; gap: 12px; }
  .drift li { flex-basis: 80%; }
  .trip-card { height: 380px; }
  .closely { padding: 96px 0; }
  .closer-band { padding: 140px 0; }
  .tabs { top: 80px; }
  .grid3, .why, .areas { grid-template-columns: minmax(0, 1fr); }
  .city { aspect-ratio: 16 / 10; }
  .side { position: static; }
  .two { grid-template-columns: 1fr; }
  .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* results and stay on a phone: nothing wider than the screen; long names wrap, prices and Compare sit on their own line */
  .pick, .stay { grid-template-columns: minmax(0, 1fr); }
  .stay > *, .stay .col, .late, .box, .alt, .explore, .filters { min-width: 0; }
  h1, .pick h2, .row-item b, .room b, .alt .name, .stay-head .meta { overflow-wrap: anywhere; }
  .row-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .row-item .n { display: none; }
  .row-item img { width: 64px; height: 56px; }
  .row-item .p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; text-align: left; border-top: 1px solid var(--line); padding-top: 8px; }
  .row-item .p small { display: inline; }
  .row-item .cmp { margin: 0 0 0 auto; }
  .filters .range { width: 100%; }
  .filters .range input { flex: 1; width: 100%; min-width: 0; }
  .filters .sort { margin-left: 0; }
  .trip-sum > summary { flex-wrap: wrap; }
  .trip, .starter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip label:first-child, .trip .wide, .trip .go, .starter .wide, .starter .preview, .starter .go { grid-column: 1 / -1; }
  .trip label, .trip input, .trip select, .starter label, .starter input, .starter select { min-width: 0; }
  .qa input { min-width: 0; }
  main:has(.trip-sum) .res-head .q, main:has(.trip-sum) .res-head .meta { display: none; }
  .pick .photo { min-height: 130px; }
  .pick .body { padding: 20px; gap: 10px; }
  .outcome { margin-top: 12px; font-size: 16px; }
  .alt-grid { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
  .progress { grid-template-columns: minmax(0, 1fr); }
  .tally b { font-size: 24px; }
  .check { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 110px; }
  .gallery > :first-child { grid-column: span 2; grid-row: auto; }
  .gallery > .tile:nth-child(n + 4) { display: none; }
  .pc { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 100px 1fr 32px; }
  .room { grid-template-columns: 1fr; }
  .room img { width: 100%; height: 160px; }
  .head-price, .head-book { display: none; } /* phones have the sticky price bar */
  .book-bar { display: flex; position: fixed; inset: auto 10px 10px; z-index: 20; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; background: rgba(20, 16, 12, 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
  .book-bar b { font-size: 20px; font-weight: 500; }
  .book-bar small { color: var(--ink2); }
  .book-bar > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .book-bar .cta { flex: none; padding: 12px 16px; }
  main:has(.book-bar) { padding-bottom: 96px; }
}
@media (max-width: 600px) {
  .cmp-wrap table, .cmp-wrap tbody, .cmp-wrap tr, .cmp-wrap th, .cmp-wrap td { display: block; min-width: 0; width: auto; }
  .cmp-wrap table { min-width: 0; }
  .cmp-wrap thead { display: none; }
  .cmp-wrap tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .cmp-wrap tbody th { padding: 0 0 6px; border: 0; color: var(--ink); width: auto; }
  .cmp-wrap td { padding: 4px 0; border: 0; }
  .cmp-wrap td::before { content: attr(data-hotel); display: block; font-size: 12px; font-weight: 600; color: var(--ink2); }
}
@media (max-width: 520px) {
  .assure, .hub { grid-template-columns: minmax(0, 1fr); }
  .foot-legal { flex-direction: column; }
  .stays-pill { gap: 10px; }
  .stays-pill .dot-scale { display: none; }
  .panel-foot { padding: 14px; }
}
/* without scripts there is no menu to open: the links wrap under the brand instead */
@media (max-width: 860px) and (scripting: none) {
  .menu-btn { display: none; }
  .top .wrap { flex-wrap: wrap; border-radius: 24px; padding: 8px 14px; }
  .nav { display: flex; order: 3; width: 100%; justify-content: flex-start; gap: 18px; overflow-x: auto; }
  .nav a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .scale[data-reveal] circle, .js .scale[data-reveal] .pin { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
  .flies { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .top .wrap, .glass, .mock, .profile, .tray, .book-bar, .tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--solid); }
}