/* The website's look, matching the app: chunky raised cards and buttons with a solid lip, Fredoka headings,
   Nunito body, the deep-space sky in dark mode. Colours and sizes come from tokens.css (generated from the app). */

@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(/site/fonts/Fredoka-600.ttf) format('truetype'); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(/site/fonts/Fredoka-700.ttf) format('truetype'); }
@font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url(/site/fonts/Nunito-600.ttf) format('truetype'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(/site/fonts/Nunito-800.ttf) format('truetype'); }

:root {
  --display: Fredoka, 'Arial Rounded MT Bold', 'Helvetica Neue', Arial, sans-serif;
  --body: Nunito, 'Helvetica Neue', Arial, sans-serif;
  --stroke: 2px;
  /* The app's neutralLip: border mixed towards the text colour. */
  --neutral-lip: color-mix(in srgb, var(--border), var(--foreground) 8%);
  --glass: rgb(255 255 255 / 62%);
  --glass-edge: rgb(255 255 255 / 80%);
  --primary-shade: var(--brand-primary-shade);
  --max: 1120px;
}
/* The website always uses the app's dark, starry look. */
:root[data-theme='dark'] {
  --neutral-lip: color-mix(in srgb, var(--border), var(--foreground) 25%);
  --glass: rgb(36 36 72 / 45%);
  --glass-edge: rgb(255 255 255 / 10%);
  --primary-shade: color-mix(in srgb, var(--primary), #000 28%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground);
  font: 600 17px/1.6 var(--body); overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 6vw, 60px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 22px; font-weight: 600; }
p { margin: 0 0 14px; }
.muted { color: var(--muted-foreground); }
.lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted-foreground); max-width: 62ch; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--brand-violet); outline-offset: 3px; border-radius: 6px; }

/* ---- The sky: one fixed, continuous background behind every page. Three layers of stars at different depths
   drift at different speeds as the page scrolls (far ones slowest, smaller and dimmer). Surfaces on top are
   frosted glass, so the stars show through them. */
body { background: var(--brand-sky-top); color: var(--foreground); }
.space { position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 88% 12%, rgb(139 61 255 / 20%), transparent 70%),
    radial-gradient(ellipse 80% 55% at 6% 82%, rgb(166 47 168 / 18%), transparent 70%),
    linear-gradient(180deg, var(--brand-sky-top), var(--brand-night) 55%, #20203e); }
.stars { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.stars.far { height: 125vh; opacity: .55; background-size: 233px 263px;
  background-image:
    radial-gradient(1px 1px at 17px 29px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 121px 83px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 201px 151px, #b794ff 50%, transparent 52%), radial-gradient(1px 1px at 63px 211px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 167px 241px, #fff 50%, transparent 52%), radial-gradient(1px 1px at 89px 139px, #d98bdb 50%, transparent 52%); }
.stars.mid { height: 150vh; opacity: .8; background-size: 397px 431px;
  background-image:
    radial-gradient(1.5px 1.5px at 41px 61px, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 283px 37px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 337px 271px, #ee6ccb 50%, transparent 52%), radial-gradient(1.5px 1.5px at 151px 347px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 211px 181px, #b794ff 50%, transparent 52%); }
.stars.near { height: 190vh; background-size: 613px 677px;
  background-image:
    radial-gradient(2.2px 2.2px at 97px 131px, #fff 50%, transparent 54%), radial-gradient(2.2px 2.2px at 467px 89px, #fff 50%, transparent 54%),
    radial-gradient(2.4px 2.4px at 541px 503px, #ee6ccb 50%, transparent 54%), radial-gradient(2.2px 2.2px at 251px 601px, #fff 50%, transparent 54%); }
.space .twinkle { position: absolute; }
/* Scrolling moves each layer up by a share of the screen: the deeper, the less. */
@supports (animation-timeline: scroll()) {
  .stars, .space .twinkles { animation: drift linear both; animation-timeline: scroll(root); }
  .stars.far { --travel: -25vh; } .stars.mid { --travel: -50vh; } .stars.near, .space .twinkles { --travel: -90vh; }
  @keyframes drift { to { transform: translate3d(0, var(--travel), 0); } }
}
.space .twinkles { position: absolute; inset: 0 0 auto; height: 190vh; }
@media (prefers-reduced-motion: reduce) { .stars, .space .twinkles { animation: none !important; transform: none !important; } }
.sky { position: relative; isolation: isolate; color: #fff; }
/* A few chunky four-point stars that twinkle, like the app's. */
.twinkle { position: absolute; width: 18px; height: 18px; z-index: -1; pointer-events: none; animation: twinkle 3.6s ease-in-out infinite; }
.twinkle svg { width: 100%; height: 100%; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .twinkle { animation: none; opacity: .8; } }

/* ---- Header */
.top { position: sticky; top: 0; z-index: 20; background: var(--brand-sky-top); border-bottom: var(--stroke) solid rgb(255 255 255 / 8%); color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 92px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { color: #fff; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 16px; padding: 8px 12px; border-radius: var(--radius-sm); }
.nav a:not(.btn):hover, .nav a[aria-current='page']:not(.btn) { background: rgb(255 255 255 / 10%); }
.nav .btn { margin-left: 8px; }
/* Find space (magenta) and List your space (pink): plain links, coloured text so the two ways in stand out. */
/* Gradient text: Find space runs violet → magenta, List your space runs magenta → hot pink. */
.nav a.accent, .menu-panel a.accent { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.nav a.accent.magenta, .menu-panel a.accent.magenta { background-image: linear-gradient(90deg, #b45cff, #ff3ddc); }
.nav a.accent.pink, .menu-panel a.accent.pink { background-image: linear-gradient(90deg, #ff3ddc, #ff7aa8); }
/* Hover and the current page: the same gradient fills the pill and the text turns white, like the other links' fill. */
.nav a.accent:hover, .nav a.accent[aria-current='page'], .menu-panel a.accent:hover, .menu-panel a.accent[aria-current='page'] { -webkit-background-clip: padding-box; background-clip: padding-box; color: #fff; -webkit-text-fill-color: #fff; }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--brand-sky-top); border-bottom: var(--stroke) solid rgb(255 255 255 / 10%); padding: 8px var(--gutter) 20px; display: grid; gap: 2px; }
.menu-panel a { color: #fff; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 19px; padding: 12px 8px; border-radius: var(--radius-sm); }
.menu-panel a:not(.btn):hover, .menu-panel a[aria-current='page']:not(.btn) { background: rgb(255 255 255 / 10%); }
.menu-panel .btn { margin-top: 10px; }
@media (max-width: 900px) { .nav { display: none; } .menu { display: block; } }

/* ---- Buttons: face, darker edge, solid lip; pressing flattens the lip. */
.btn {
  --face: var(--primary); --edge: var(--primary-shade); --text: var(--primary-foreground);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 22px; border-radius: var(--radius-md);
  background: var(--face); color: var(--text); border: var(--stroke) solid var(--edge);
  box-shadow: 0 var(--lip) 0 var(--edge); text-decoration: none;
  font: 600 18px/1 var(--display); cursor: pointer; transition: transform .08s, box-shadow .08s;
  margin-bottom: var(--lip);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(calc(var(--lip) - 1px)); box-shadow: 0 1px 0 var(--edge); }
.btn.sm { min-height: 40px; padding: 10px 14px; font-size: 16px; }
.btn.violet { --face: var(--brand-violet); --edge: var(--brand-violet-shade); --text: #fff; }
.btn.outline { --face: var(--glass); --edge: var(--border); --text: var(--foreground); box-shadow: 0 var(--lip) 0 var(--neutral-lip); backdrop-filter: blur(12px); }
.sky .btn.outline { --face: rgb(26 31 85 / 60%); --edge: #363662; --text: #fff; box-shadow: 0 var(--lip) 0 #4b4b78; }
.btn svg { width: 22px; height: 22px; flex: none; }
.btn[aria-disabled='true'] { cursor: default; }
.btn[aria-disabled='true']:active { transform: none; box-shadow: 0 var(--lip) 0 var(--edge); }

/* Store buttons: two lines, with a "Coming soon" badge until the app is live. */
.store { flex: 1 1 0; min-width: 0; max-width: 220px; justify-content: flex-start; padding: 10px 14px; gap: 10px; }
.store span { display: grid; text-align: left; gap: 3px; }
.store small { font: 600 12px/1 var(--body); opacity: .85; }
.store b { font: 600 20px/1 var(--display); }
.stores { display: flex; gap: 12px; }
@media (max-width: 380px) { .store b { font-size: 17px; } .store svg { width: 20px; height: 20px; } }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font: 600 13px/1 var(--display); background: var(--secondary); color: var(--secondary-foreground);
  border: var(--stroke) solid var(--border); box-shadow: 0 2px 0 var(--border);
}
.badge.hot { background: var(--brand-warning); color: var(--brand-ink); border-color: var(--brand-warning-shade); box-shadow: 0 2px 0 var(--brand-warning-shade); }

/* ---- Cards: the app's AppCard (frosted face, edge, lip). */
.card {
  background: var(--card); border: var(--stroke) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 var(--lip) 0 var(--neutral-lip); padding: 22px; margin-bottom: var(--lip);
}
:root[data-theme='dark'] .card { background: var(--glass); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.sky .card { color: #fff; }
.card.flush { padding: 0; overflow: hidden; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 8px; }
.photo { border-radius: var(--radius-lg); border: var(--stroke) solid var(--border); box-shadow: 0 var(--lip) 0 var(--neutral-lip); overflow: hidden; background: var(--muted); margin-bottom: var(--lip); }
.split > *, .grid > *, .gallery > * { min-width: 0; }
.sky .photo { background: #242448; border-color: #363662; box-shadow: 0 var(--lip) 0 #4b4b78; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo figcaption { padding: 12px 16px; font-family: var(--display); font-weight: 600; font-size: 17px; }

/* Icon tile: a small chunky square, like the app's tile prefixes. */
.icon {
  --face: var(--secondary); --edge: color-mix(in srgb, var(--primary) 30%, var(--border));
  width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none;
  background: var(--face); color: var(--primary); border: var(--stroke) solid var(--edge); box-shadow: 0 3px 0 var(--edge); margin-bottom: 14px;
}
.icon svg { width: 24px; height: 24px; }
.icon.violet { --face: var(--brand-violet); --edge: var(--brand-violet-shade); color: #fff; }
.icon.pink { --face: var(--primary); --edge: var(--primary-shade); color: #fff; }

/* ---- Sections and grids */
section { padding: 72px 0; }
section.tight { padding: 48px 0; }
.eyebrow { display: inline-block; margin-bottom: 14px; }
.head { max-width: 760px; margin-bottom: 36px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head.center .lead { margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.g2s { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.split { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } .split.flip > :first-child { order: 2; } }

/* Hero */
.hero { padding: 64px 0 88px; overflow: hidden; }
.hero h1 { margin: 14px 0 18px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #ee6ccb, #b794ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { color: #d6d3ee; }
.hero .stores { margin: 28px 0 10px; }
.hero-art { position: relative; }
.hero-art .photo { transform: rotate(1.5deg); }
.photo + .photo { margin-top: 20px; }
.hero-art .photo.back { position: absolute; width: 58%; left: -6%; bottom: -12%; transform: rotate(-5deg); }
@media (max-width: 899px) { .hero-art .photo.back { display: none; } }
.hero-pill { position: absolute; right: 4%; top: -16px; z-index: 2; }

/* Lists with ticks */
.ticks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 7px;
  background: var(--brand-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 2px 0 var(--brand-success-shade);
}

/* Numbered steps, like the app's booking timeline. */
.steps { counter-reset: step; display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font: 700 22px/1 var(--display); color: #fff; background: var(--primary);
  border: var(--stroke) solid var(--primary-shade); box-shadow: 0 3px 0 var(--primary-shade);
}
.step h3 { margin: 8px 0 4px; }
.step p { margin: 0; color: var(--muted-foreground); }

/* Chips: the app's ChipPicker */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--card); border: var(--stroke) solid var(--border); box-shadow: 0 3px 0 var(--neutral-lip);
  font: 600 16px/1 var(--display); color: var(--foreground);
}
.sky .chip { background: rgb(26 31 85 / 60%); border-color: #363662; box-shadow: 0 3px 0 #4b4b78; color: #fff; }

/* Price rows, like the app's money lines */
.price-card .big { font: 700 52px/1 var(--display); margin: 6px 0 4px; }
.price-card .big small { font-size: 20px; color: var(--muted-foreground); font-weight: 600; }
.lines { display: grid; gap: 0; margin: 10px 0 0; }
.line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: var(--stroke) solid var(--border); }
.line:first-child { border-top: 0; }
.line b { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.line.total b, .line.total span { font-weight: 700; }

/* Stars, like the app's ratings */
.stars { color: var(--brand-warning); letter-spacing: 2px; }

/* FAQ: the app's tile group with expanding rows */
.faq { padding: 0; overflow: hidden; }
.faq details { border-top: var(--stroke) solid var(--border); }
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font: 600 19px/1.35 var(--display); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 3px solid var(--muted-foreground); border-bottom: 3px solid var(--muted-foreground); transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq .answer { padding: 0 22px 18px; color: var(--muted-foreground); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Call-to-action band */
.cta { text-align: center; border-radius: var(--radius-xl); padding: 48px 20px; background: var(--glass); border: var(--stroke) solid #363662; box-shadow: 0 var(--lip) 0 #4b4b78; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.cta .badge { margin-bottom: 14px; }
.cta .stores { justify-content: center; margin-top: 24px; }
.cta .lead { margin: 0 auto; color: #d6d3ee; }

/* Space-type gallery: a row that scrolls sideways on phones, like the app's chip rows. */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.gallery .photo { scroll-snap-align: start; }
@media (min-width: 1000px) { .gallery { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

/* Legal and long text */
.prose { max-width: 760px; }
.prose h2 { font-size: 24px; margin-top: 36px; }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }

/* ---- Footer */
.foot { padding: 56px 0 40px; margin-top: 24px; border-top: var(--stroke) solid rgb(255 255 255 / 8%); background: rgb(22 22 44 / 55%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.foot .cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.foot h4 { font-size: 16px; margin-bottom: 10px; color: #fff; }
.foot a { color: #d6d3ee; text-decoration: none; display: block; padding: 4px 0; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot .fine { margin-top: 36px; padding-top: 20px; border-top: var(--stroke) solid rgb(255 255 255 / 10%); color: #a6a6c4; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.foot .brand img { width: 110px; margin-bottom: 12px; }

/* Fade-in as sections scroll into view (site.js adds .in). Content shows without JS. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- Nothing may push the page sideways on phones. */
html, body { overflow-x: clip; }
section, .foot, .cta { overflow-x: clip; }

/* ---- Home: one full-height photo, a short title, and the video. */
.cover { min-height: calc(100svh - 68px); min-height: max(560px, calc(100svh - 68px)); display: flex; align-items: flex-end; padding: 0; overflow: hidden; }
.cover-bg { position: absolute; inset: 0; z-index: -2; will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%); mask-image: linear-gradient(180deg, #000 55%, transparent 98%); }
.cover-bg img, .cover-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.cover-bg video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.cover-bg video.playing { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .cover-bg { animation: sink linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes sink { to { transform: translate3d(0, 30vh, 0); } }
}
@media (prefers-reduced-motion: reduce) { .cover-bg { animation: none; } }
.cover::before { z-index: -1; background: linear-gradient(180deg, rgb(22 22 44 / 20%) 0%, transparent 30%, rgb(22 22 44 / 55%) 75%, transparent 100%); }
.cover::after { display: none; }
.cover-text { width: 100%; padding-top: 48px; padding-bottom: clamp(48px, 9vh, 96px); }
.cover h1 { font-size: clamp(44px, 9vw, 92px); line-height: 1.02; margin: 0 0 16px; max-width: 12ch; text-shadow: 0 2px 24px rgb(0 0 0 / 35%); }
.cover .lead { color: rgb(255 255 255 / 72%); line-height: 1.7; max-width: 34ch; margin-bottom: 28px; }
.cover .btn svg { width: 18px; height: 18px; }

.showcase { padding: 64px 0 24px; }
.carousel { position: relative; }
.track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  /* Room below for the cards' shadow (a scrolling row clips anything outside it), taken back with the margin. */
  padding: 8px max(var(--gutter), calc((100vw - var(--slide)) / 2)) 56px; margin-bottom: -38px; --slide: min(78vw, 360px, calc((100svh - 150px) * 9 / 16));
}
.track::-webkit-scrollbar { display: none; }
.slide {
  flex: none; width: var(--slide); aspect-ratio: 9 / 16; scroll-snap-align: center; position: relative; overflow: hidden; margin: 0;
  border-radius: var(--radius-xl); border: var(--stroke) solid rgb(255 255 255 / 12%); box-shadow: 0 var(--lip) 0 #4b4b78, 0 24px 60px -24px rgb(139 61 255 / 50%);
  background: var(--glass);
}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 20px 22px; color: #fff;
  background: linear-gradient(180deg, transparent, rgb(22 22 44 / 70%) 40%, rgb(22 22 44 / 92%));
}
.slide h3 { margin: 0 0 6px; font-size: 22px; }
.slide p { margin: 0; color: rgb(255 255 255 / 72%); font-size: 15px; line-height: 1.5; }
.carousel-nav { display: none; justify-content: center; gap: 12px; margin-top: 6px; }
.carousel-nav .btn { width: 52px; padding: 0; }
.carousel-nav svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .carousel-nav { display: flex; } }

/* ---- Footer on phones: logo on top, links in two tidy columns, small print stacked. */
@media (max-width: 640px) {
  .foot { padding: 40px 0 32px; }
  .foot .cols { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .foot .cols > :first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
  .foot .cols > :first-child .brand img { width: 72px; margin: 0; }
  .foot .cols > :first-child p { margin: 0; font-size: 15px; }
  .foot a { padding: 7px 0; }
  .foot .fine { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 28px; }
}
.cover h1 em { font-style: normal; background: linear-gradient(90deg, #ee6ccb, #b794ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
/* Tall phone screens: the photo fills the top part, so the whole billboard shows; the title sits below it. */
@media (max-aspect-ratio: 3 / 4) {
  .cover-bg { inset: 0 0 28% 0; }
  .cover-bg img, .cover-bg video { object-position: 42% 50%; }
  .cover::before { background: linear-gradient(180deg, transparent 45%, rgb(22 22 44 / 60%) 72%, transparent 100%); }
}

/* Computers: the carousel lines up with the page's content, and its last slides peek in from the right. */
@media (min-width: 900px) {
  .track { padding-left: max(32px, calc((100vw - var(--max)) / 2 + 32px)); padding-right: 32px; scroll-padding-left: max(32px, calc((100vw - var(--max)) / 2 + 32px)); --slide: min(320px, calc((100svh - 150px) * 9 / 16)); }
  .slide { scroll-snap-align: start; }
  .carousel-nav { justify-content: flex-start; padding-left: max(32px, calc((100vw - var(--max)) / 2 + 32px)); }
}

/* ---- Listings: cards like the app's, and the listing page. */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 600 15px/1.4 var(--display); color: var(--muted-foreground); margin-bottom: 18px; }
.crumbs a { color: #d6d3ee; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.listings { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.listing { display: flex; flex-direction: column; text-decoration: none; color: var(--foreground); transition: transform .15s; }
.listing:hover { transform: translateY(-3px); }
.listing-photo { position: relative; aspect-ratio: 4 / 3; background: var(--muted); overflow: hidden; }
.listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-photo .badge, .listing-hero .badge { position: absolute; left: 12px; top: 12px; }
.no-photo { width: 100%; height: 100%; min-height: 200px; display: grid; place-items: center; color: var(--muted-foreground); }
.no-photo svg { width: 40px; height: 40px; }
.listing-body { padding: 16px 18px 18px; }
.listing-body h3 { font-size: 20px; margin: 0 0 4px; }
.listing-body p { margin: 0; font-size: 15px; }
.listing-price { margin-top: 10px !important; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.listing-price b { font: 700 20px/1 var(--display); }
.listing-stars { margin-left: auto; }
a.chip { text-decoration: none; }
a.chip:hover { filter: brightness(1.15); }
.chip .muted { font-size: 14px; }

.listing-page { padding-top: 32px; }
.listing-top { align-items: start; margin-bottom: 20px; }
.listing-hero { position: relative; }
.listing-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.listing-title { font-size: clamp(32px, 4.5vw, 48px); margin: 4px 0 8px; }
.listing-host { font: 600 18px/1.4 var(--display); margin: 0 0 8px; }
.listing-place { display: flex; gap: 8px; align-items: center; color: var(--muted-foreground); margin-bottom: 20px; }
.listing-place svg { width: 18px; height: 18px; flex: none; }
.price-box .price-line { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.price-box .big { font: 700 44px/1 var(--display); }
.price-box .btn { width: 100%; margin: 8px 0 10px; }
.small { font-size: 14px; }
.listing-more { align-items: start; gap: 20px; }
.listing-more > div { display: grid; gap: 20px; }
.listing-more h2 { font-size: 24px; margin-bottom: 12px; }
.details { display: grid; gap: 16px; }
.detail { display: flex; gap: 14px; align-items: center; }
.detail .icon { margin: 0; width: 42px; height: 42px; }
.detail .icon svg { width: 20px; height: 20px; }
.detail span, .detail b { display: block; }
.detail span { font-size: 14px; }
.detail b { font-weight: 600; }

/* ---- Photos in cards drift slightly as the page scrolls (the card is the window, the photo moves behind it). */
@media (prefers-reduced-motion: no-preference) {
  .photo img, .slide img, .listing-photo img, .listing-hero img { transform: scale(1.12); will-change: transform; }
  @supports (animation-timeline: view()) {
    .photo, .listing-photo, .listing-hero { view-timeline: --card block; }
    .carousel { view-timeline: --card block; }
    .photo img, .slide img, .listing-photo img, .listing-hero img { animation: peek linear both; animation-timeline: --card; }
    @keyframes peek { from { transform: translate3d(0, -5%, 0) scale(1.12); } to { transform: translate3d(0, 5%, 0) scale(1.12); } }
  }
}

/* Forms: the two-minute listing page (/list). */
.narrow { max-width: 640px; margin: 0 auto; }
.form [hidden] { display: none !important; }
/* Google's floating reCAPTCHA badge, replaced by the notice under "Text me a code" (Google allows this). */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { margin: 12px 0 0; }
.recaptcha-note a { color: inherit; text-decoration: underline; }
/* The page: a short intro, then one step card at a time under a progress bar. */
.hero.compact { padding: 40px 0 28px; }
.hero.compact h1 { margin: 12px 0 10px; }
section.form-section { padding: 8px 0 56px; }
.wizard { scroll-margin-top: 96px; }
.wizard-head { display: grid; gap: 8px; margin: 0 2px 14px; font-weight: 800; font-size: .9rem; color: var(--muted-foreground); }
.wizard-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--foreground) 12%, transparent); overflow: hidden; }
.wizard-bar i { display: block; height: 100%; width: 25%; border-radius: 3px; background: linear-gradient(90deg, #ee6ccb, #b794ff); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.form .form-step h2 { font-size: 1.35rem; margin: 0 0 6px; }
.form .form-step > p.muted:first-of-type { margin-top: 0; }
.form-step.enter { animation: step-in .38s cubic-bezier(.2, .8, .2, 1) both; }
.form-step.enter.back { animation-name: step-in-back; }
.form-step.leave { animation: step-out .16s ease-in both; }
.form-step.leave.back { animation-name: step-out-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes step-out { to { opacity: 0; transform: translateX(-20px); } }
@keyframes step-out-back { to { opacity: 0; transform: translateX(20px); } }
.swap-in { animation: swap-in .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes swap-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .form-step.enter, .form-step.leave, .swap-in { animation: none; } .wizard-bar i { transition: none; } }
/* A plain text button: Back, Change number, Manually enter address. */
.link-btn { font: inherit; font-weight: 800; color: var(--primary); background: none; border: 0; padding: 10px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme='dark'] .link-btn, .sky .link-btn { color: #e7a6e8; }
.place-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; font-weight: 700; }
.place-line svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--primary); }
/* The address dialog: a card over a dimmed page. */
dialog.sheet { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: var(--stroke) solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); padding: 22px; box-shadow: 0 var(--lip) 0 var(--neutral-lip), 0 24px 60px rgb(0 0 0 / 40%); }
dialog.sheet h2 { font-size: 1.3rem; margin: 0; }
dialog.sheet::backdrop { background: rgb(10 10 30 / 60%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.sheet[open] { animation: swap-in .28s cubic-bezier(.2, .8, .2, 1) both; }
/* The star spinner, as in the app: flicked into a fast spin that slows like a flywheel, glowing brightest when fastest. */
.star-spin { width: 22px; height: 22px; flex: none; overflow: visible; animation: star-flick 1.6s cubic-bezier(.12, .9, .3, 1) infinite, star-glow 1.6s cubic-bezier(.12, .9, .3, 1) infinite; }
.star-spin path { stroke-linejoin: round; stroke-width: 2px; }
@keyframes star-flick { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@keyframes star-glow { from { filter: drop-shadow(0 0 6px currentColor); } to { filter: drop-shadow(0 0 1px currentColor); } }
@media (prefers-reduced-motion: reduce) { .star-spin { animation: star-breathe 1.6s ease-in-out infinite; } @keyframes star-breathe { 50% { filter: drop-shadow(0 0 5px currentColor); } } }
.btn[aria-busy='true'] { pointer-events: none; }
.btn[aria-busy='true'] > svg:not(.star-spin) { display: none; }
.form-error:empty { display: none; }
/* A field that needs attention: red until it's changed. */
.form input.invalid, .form select.invalid, .form textarea.invalid { border-color: var(--brand-red) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-red) 22%, transparent); }
.photo-pick.invalid { border-color: var(--brand-red); border-style: solid; }
.field.invalid > span:first-child { color: var(--brand-red); }
.field.invalid .btn.outline { --edge: var(--brand-red); border-color: var(--brand-red); }
.photo-retake { display: block; margin-top: 8px; color: var(--brand-red); font-size: .82rem; font-weight: 800; }
dialog.msg { width: min(440px, calc(100vw - 32px)); }
dialog.msg p { margin: 8px 0 0; }
dialog.msg ul { margin: 10px 0 0; padding-left: 20px; }
dialog.msg li + li { margin-top: 6px; }
/* The "Advertise here" sign on the listed page: a small preview (tap for full size) beside its settings on wide
   screens, above them on phones. The preview keeps one size whatever the format, so nothing moves. */
.sign-grid { display: grid; gap: 18px; margin-top: 16px; }
@media (min-width: 600px) { .sign-grid { grid-template-columns: 220px 1fr; align-items: start; } }
.sign-preview { position: relative; width: 220px; height: 300px; justify-self: center; padding: 0; border: var(--stroke) solid var(--border); border-radius: var(--radius-md); background: var(--muted); overflow: hidden; cursor: zoom-in; display: grid; place-items: center; }
.sign-preview.off { cursor: default; }
.sign-preview canvas { display: block; background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / 18%); }
.sign-preview canvas[hidden] { display: none; }
.sign-busy { position: absolute; z-index: 2; display: none; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--card); color: var(--foreground); font-weight: 700; font-size: .85rem; box-shadow: 0 2px 10px rgb(0 0 0 / 15%); }
.sign-preview.busy .sign-busy { display: inline-flex; }
.sign-preview.busy canvas { opacity: .35; }
.sign-zoom { position: absolute; z-index: 1; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgb(20 20 40 / 70%); color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sign-preview.off .sign-zoom, .sign-preview.busy .sign-zoom { display: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sign-controls .field { margin-top: 0; }
.sign-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sign-actions .btn { flex: 1 1 140px; margin-bottom: var(--lip); }
.sign-actions .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }
dialog.sign-full { width: min(900px, calc(100vw - 32px)); }
dialog.sign-full iframe { width: 100%; height: min(78vh, 1000px); border: 0; border-radius: var(--radius-md); background: #fff; display: block; }
.check { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-weight: 700; cursor: pointer; }
.form .check input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0; padding: 0; accent-color: var(--primary); }
.check span { flex: 1; }
/* "Is this your business?": a card per business. */
dialog.msg .pick-list { display: grid; gap: 10px; margin-top: 16px; }
dialog.msg .pick-card { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--foreground); background: var(--card); border: var(--stroke) solid var(--border); border-radius: var(--radius-md, 14px); padding: 12px 14px; cursor: pointer; box-shadow: 0 3px 0 var(--neutral-lip); }
dialog.msg .pick-card:hover, dialog.msg .pick-card:focus-visible { border-color: var(--primary); }
dialog.msg .pick-card span { color: var(--muted-foreground); font-size: .9rem; }
.field { display: grid; gap: 6px; margin-top: 14px; }
.field > span:first-child { font-weight: 800; font-size: .92rem; }
.field .hint { color: var(--muted-foreground); font-size: .85rem; font-weight: 600; }
.form input:not([type=file]):not([type=checkbox]):not([type=radio]), .form select, .form textarea { font: inherit; font-weight: 600; color: var(--foreground); background: var(--glass); border: var(--stroke) solid var(--glass-edge); border-radius: 12px; padding: 12px 14px; width: 100%; min-height: 48px; }
.form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid color-mix(in srgb, var(--primary), transparent 50%); border-color: var(--primary); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .row.codes { grid-template-columns: 128px minmax(0, 1fr); }
@media (max-width: 480px) { .form .row { grid-template-columns: 1fr; } .form .row.codes { grid-template-columns: 118px minmax(0, 1fr); } }
.lead.short { display: none; }
.wizard-head { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
/* Phones: the intro shrinks to a title and one line, so step 1 starts high on the screen. */
@media (max-width: 640px) {
  .hero.compact { padding: 18px 0 14px; }
  .hero.compact .badge, .hero.compact .lead:not(.short) { display: none; }
  .hero.compact .lead.short { display: block; font-size: 16px; margin: 0; }
  .hero.compact h1 { font-size: 30px; margin: 0 0 6px; }
  section.form-section { padding-top: 4px; }
  .wizard { scroll-margin-top: 76px; }
  .wizard-head { margin-bottom: 10px; }
  .form .form-step { padding: 18px; }
  .form .form-step h2 { font-size: 1.2rem; }
  .field { margin-top: 12px; }
  .form .actions { margin-top: 14px; }
  .photo-pick { min-height: 150px; }
}
.photo-pick { display: grid; place-items: center; min-height: 180px; border: var(--stroke) dashed var(--glass-edge); border-radius: 16px; background: var(--glass); cursor: pointer; overflow: hidden; text-align: center; padding: 12px; margin-top: 4px; }
.photo-pick input { display: none; }
#photo-text, #art-text { display: grid; justify-items: center; gap: 10px; padding: 8px; }
#photo-again { margin-top: 10px; }
.photo-note { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; color: var(--muted-foreground); font-size: .88rem; font-weight: 700; }
.photo-note:empty { display: none; }
.photo-note .star-spin { width: 18px; height: 18px; color: var(--primary); }
.photo-pick img { max-width: 100%; max-height: 320px; border-radius: 12px; }
.form-error { color: var(--brand-red); font-weight: 800; margin: 12px 0 0; }
.form .actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* A card's bottom row: the text button (Back, Cancel) on the left, the main button on the right. */
.form .actions.nav { justify-content: flex-end; flex-wrap: nowrap; }
.form .actions.nav > .link-btn:first-child { margin-right: auto; }
.form .actions.stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.small { font-size: .88rem; }

/* A small mark by the business name on a listing page (e.g. Business unverified): about the business, not the photo. */
.chip-small { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border: var(--stroke) solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.4; color: var(--muted-foreground); white-space: nowrap; }

/* The footer sits at the bottom of the window on short pages. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ---- Theme toggle: shows the current mode (moon dark, sun light, screen system) ---- */
.theme-toggle { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: var(--stroke) solid rgb(255 255 255 / 14%); background: transparent; color: #fff; cursor: pointer; }
.theme-toggle:hover { background: rgb(255 255 255 / 10%); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle svg { display: none; }
:root:not([data-mode='light']):not([data-mode='system']) .theme-toggle svg:nth-child(1),
:root[data-mode='light'] .theme-toggle svg:nth-child(2),
:root[data-mode='system'] .theme-toggle svg:nth-child(3) { display: block; }
@media (max-width: 900px) { .theme-toggle { margin-left: auto; } .menu { margin-left: 0; } }

/* ---- Light theme: a daytime sky, dark text, white glass. Photos with text on them (.cover, .slide) stay as they are. */
:root[data-theme='light'] {
  --sky-text: #1a1a33;
  --sky-soft: #4a4a68;
  --line: rgb(26 26 51 / 10%);
}
:root[data-theme='light'] body { background: #f4f1fb; }
:root[data-theme='light'] .space { background:
    radial-gradient(ellipse 70% 50% at 88% 12%, rgb(139 61 255 / 14%), transparent 70%),
    radial-gradient(ellipse 80% 55% at 6% 82%, rgb(238 108 203 / 14%), transparent 70%),
    linear-gradient(180deg, #faf8ff, #f1ecfb 55%, #ece6f8); }
:root[data-theme='light'] .stars { opacity: .18; filter: invert(1) hue-rotate(180deg); }
:root[data-theme='light'] .sky, :root[data-theme='light'] .sky .card { color: var(--sky-text); }
/* Solid, the same colour as the page behind the phone's status bar, so the two read as one surface. */
:root[data-theme='light'] .top { background: #f4f1fb; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line); color: var(--sky-text); }
:root[data-theme='light'] .nav a:not(.accent):not(.btn), :root[data-theme='light'] .menu-panel a:not(.accent):not(.btn) { color: var(--sky-text); }
:root[data-theme='light'] .nav a:not(.btn):hover, :root[data-theme='light'] .nav a[aria-current='page'],
:root[data-theme='light'] .menu-panel a:not(.btn):hover, :root[data-theme='light'] .menu-panel a[aria-current='page'] { background: rgb(26 26 51 / 7%); }
:root[data-theme='light'] .nav a.accent.magenta, :root[data-theme='light'] .menu-panel a.accent.magenta { background-image: linear-gradient(90deg, #7a2ee0, #c42fb8); }
:root[data-theme='light'] .nav a.accent.pink, :root[data-theme='light'] .menu-panel a.accent.pink { background-image: linear-gradient(90deg, #c42fb8, #e0457f); }
:root[data-theme='light'] .menu-panel { background: #faf8ff; border-bottom-color: var(--line); }
:root[data-theme='light'] .theme-toggle { color: var(--sky-text); border-color: var(--line); }
:root[data-theme='light'] .theme-toggle:hover { background: rgb(26 26 51 / 7%); }
:root[data-theme='light'] .menu summary.btn.outline { --face: #fff; --edge: #d9d3ea; --text: var(--sky-text); }
:root[data-theme='light'] .sky .btn.outline { --face: #fff; --edge: #d9d3ea; --text: var(--sky-text); box-shadow: 0 var(--lip) 0 #d9d3ea; }
:root[data-theme='light'] .sky .photo { background: #fff; border-color: #e3ddf0; box-shadow: 0 var(--lip) 0 #d9d3ea; }
:root[data-theme='light'] .sky .chip { background: #fff; border-color: #e3ddf0; box-shadow: 0 3px 0 #d9d3ea; color: var(--sky-text); }
:root[data-theme='light'] .hero .lead, :root[data-theme='light'] .cta .lead { color: var(--sky-soft); }
:root[data-theme='light'] .cta { border-color: #e3ddf0; box-shadow: 0 var(--lip) 0 #d9d3ea; }
:root[data-theme='light'] .foot { background: rgb(255 255 255 / 60%); border-top-color: var(--line); }
:root[data-theme='light'] .foot h4 { color: var(--sky-text); }
:root[data-theme='light'] .foot a { color: var(--sky-soft); }
:root[data-theme='light'] .foot a:hover { color: var(--sky-text); }
:root[data-theme='light'] .foot .fine { border-top-color: var(--line); color: var(--sky-soft); }
:root[data-theme='light'] .crumbs a { color: var(--sky-soft); }
:root[data-theme='light'] .crumbs a:hover { color: var(--sky-text); }
:root[data-theme='light'] .link-btn { color: var(--primary); }
:root[data-theme='light'] .card { background: var(--glass); border-color: #e3ddf0; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
/* Home cover in light: the photo fades into a light mist behind the dark headline. */
:root[data-theme='light'] .cover::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(ellipse 55% 50% at 14% 76%, rgb(244 241 251 / 90%), rgb(244 241 251 / 55%) 55%, transparent 80%),
    linear-gradient(180deg, transparent 0%, transparent 45%, rgb(244 241 251 / 70%) 78%, #f4f1fb 100%); }
:root[data-theme='light'] .cover h1 { text-shadow: 0 1px 18px rgb(255 255 255 / 70%); }
:root[data-theme='light'] .cover .lead { color: var(--sky-soft); }
:root[data-theme='light'] .cover h1 em { background-image: linear-gradient(90deg, #c42fb8, #7a2ee0); }
@media (max-width: 720px) { :root[data-theme='light'] .cover::before { background: linear-gradient(180deg, transparent 40%, rgb(244 241 251 / 85%) 66%, #f4f1fb 100%); } }
/* Light: fields and the photo box get a tint and a visible edge, so they stand apart from the white card. */
:root[data-theme='light'] { --glass-edge: #e3ddf0; }
:root[data-theme='light'] .form input:not([type=file]):not([type=checkbox]):not([type=radio]), :root[data-theme='light'] .form select, :root[data-theme='light'] .form textarea { background-color: #f6f3fc; border-color: #d4cce6; }
:root[data-theme='light'] .form input:not([type=file]):not([type=checkbox]):not([type=radio]):hover, :root[data-theme='light'] .form select:hover, :root[data-theme='light'] .form textarea:hover { border-color: #b9add6; }
:root[data-theme='light'] .photo-pick { background: #f6f3fc; border-color: #c4b8e0; }
:root[data-theme='light'] .photo-pick:hover { border-color: var(--primary); }

/* Light: the carousel cards' lip and glow in soft lavender, not night blue. */
:root[data-theme='light'] .slide { border-color: #e3ddf0; box-shadow: 0 var(--lip) 0 #d4cce6, 0 24px 50px -28px rgb(139 61 255 / 35%); }
:root[data-theme='light'], :root[data-theme='light'] body { background-color: #f4f1fb; }
/* Safari tints its top bar from the page's own background. Dark sets one too, so a page that was light earlier (or
   switched to Same as device) doesn't keep a pale bar. color-scheme tells the browser which way its own parts go. */
:root { background-color: #16162C; color-scheme: dark; }
:root[data-theme='light'] { color-scheme: light; }

/* The search bar under the header on place and results pages (src/site/search.ts): each part with what it's set to,
   and the Search button at a fixed size on the right. */
.searchbar { border-top: var(--stroke) solid rgb(255 255 255 / 8%); }
.searchbar .wrap { display: flex; align-items: center; gap: 12px; min-height: 0; padding-top: 10px; padding-bottom: 12px; }
.sb-reset { flex: none; display: grid; place-items: center; width: 50px; align-self: stretch; border-radius: 14px; background: rgb(255 255 255 / 6%); border: var(--stroke) solid rgb(255 255 255 / 10%); color: #fff; }
.sb-reset[hidden] { display: none; }
.sb-reset:hover { background: rgb(255 255 255 / 12%); }
.sb-reset svg { width: 20px; height: 20px; }
:root[data-theme='light'] .sb-reset { background: rgb(26 26 51 / 4%); border-color: rgb(26 26 51 / 10%); color: var(--sky-text); }
.sb-items { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 4px; }
.sb-items::-webkit-scrollbar { display: none; }
.sb-items.more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.sb-items.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.sb-items.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.sb-item { flex: 1 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: rgb(255 255 255 / 6%); border: var(--stroke) solid rgb(255 255 255 / 10%); border-radius: 14px; color: #fff; font: inherit; cursor: pointer; text-align: left; max-width: 240px; }
.sb-item:hover { background: rgb(255 255 255 / 12%); }
.sb-item svg { width: 18px; height: 18px; flex: none; color: rgb(255 255 255 / 60%); }
.sb-item.set svg { color: #ee6ccb; }
.sb-item span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sb-item small { font-size: 12px; color: rgb(255 255 255 / 65%); font-weight: 700; }
.sb-item b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(255 255 255 / 75%); }
.sb-item.set b { color: #fff; }
:root[data-theme='light'] .searchbar { border-top-color: rgb(26 26 51 / 8%); }
:root[data-theme='light'] .sb-item { background: rgb(26 26 51 / 4%); border-color: rgb(26 26 51 / 10%); color: var(--sky-text); }
:root[data-theme='light'] .sb-item:hover { background: rgb(26 26 51 / 8%); }
:root[data-theme='light'] .sb-item svg, :root[data-theme='light'] .sb-item small { color: rgb(26 26 51 / 55%); }
:root[data-theme='light'] .sb-item b { color: rgb(26 26 51 / 70%); }
:root[data-theme='light'] .sb-item.set b { color: var(--sky-text); }
:root[data-theme='light'] .sb-item.set svg { color: var(--brand-primary); }
@media (max-width: 720px) {
  .sb-item { padding: 6px 12px 6px 8px; gap: 8px; }
  .sb-item b { font-size: 14px; max-width: 120px; }
}

/* One search part at a time, in a small dialog, with the live count and Done. */
dialog.search { padding: 0; display: none; flex-direction: column; max-height: min(640px, calc(100dvh - 32px)); }
dialog.search[open] { display: flex; }
/* flex-basis auto, not 0: Safari collapses a 0-basis child of a dialog with no set height. */
dialog.search form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.search-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.search-top .x { background: none; border: 0; color: inherit; padding: 6px; cursor: pointer; border-radius: 10px; }
.search-top .x svg { width: 22px; height: 22px; }
.search-top .x:focus:not(:focus-visible) { outline: none; }
.sects { overflow: auto; padding: 8px 20px 18px; flex: 0 1 auto; min-height: 0; }
.sect { display: none; }
.sect.open { display: block; }
.sect .chips { gap: 8px; }
.sect .chip { cursor: pointer; font: inherit; font-size: 15px; }
.sect .chip[aria-pressed='true'] { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.sect .hint { margin: 12px 0 0; font-size: 14px; color: var(--muted-foreground); }
.sect .sub { margin: 4px 0 8px; font-weight: 700; font-size: 15px; }
.sect .sub:not(:first-child) { margin-top: 14px; }
.sect [data-places] { display: grid; gap: 10px; margin-top: 14px; }
.sect [hidden] { display: none; }
.sect [data-radius] { margin-top: 12px; }
.sect label.field { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.search-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px 18px; border-top: var(--stroke) solid var(--border); }
.search-foot [data-count] { flex: 1; font-size: 15px; }
.search-foot .btn { min-width: 120px; }
/* Listing cards, laid out like the app's: wide photo, title with the price beside it, business, then type and place. */
.listing-photo { aspect-ratio: 5 / 2; }
.listing-body { padding: 16px 18px 18px; display: grid; gap: 6px; }
.listing-head { display: flex; align-items: flex-start; gap: 12px; }
.listing-head h3 { flex: 1; margin: 0; font-size: 20px; line-height: 1.25; }
.listing-head .listing-price { margin: 0 !important; flex: none; color: var(--muted-foreground); font-size: 16px; }
.listing-head .listing-price b { color: var(--primary); font: 800 22px/1 var(--display); }
.listing-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.type-pill { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 22%, transparent); border: var(--stroke) solid color-mix(in srgb, var(--primary) 45%, transparent); color: var(--foreground); font: 700 14px/1.3 var(--display); }
:root[data-theme='light'] .type-pill { background: var(--brand-primary-light); color: var(--brand-primary-shade); border-color: #e4c3e5; }
.listing-where { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 15px; }
.listing-where svg { width: 16px; height: 16px; }
.listing-meta .listing-stars { margin-left: auto; font-size: 14px; }
.listing-head .listing-price { gap: 1px; }
/* "More spaces in …": small cards in a row that scrolls sideways, snapping to each card. */
.mini-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px calc(var(--lip) + 18px); margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mini-row::-webkit-scrollbar { display: none; }
.listing.mini { flex: 0 0 min(250px, 72vw); scroll-snap-align: start; }
.listing.mini .listing-photo { aspect-ratio: 16 / 10; }
.listing.mini .listing-body { padding: 12px 14px 14px; gap: 4px; }
.listing.mini .listing-head h3 { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing.mini .listing-head .listing-price b { font-size: 17px; }
.listing.mini .listing-head .listing-price { font-size: 13px; }
.listing.mini p.muted { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing.mini .listing-meta { margin-top: 4px; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
.listing.mini .type-pill { font-size: 12px; padding: 2px 9px; white-space: nowrap; }
.listing.mini .listing-where { font-size: 13px; white-space: nowrap; }
.listing.mini .listing-stars { display: none; }
.mini-row { scroll-padding-inline: 16px; }

/* Listing at a glance (src/glance.ts) and About the area. */
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin: 0 0 20px; }
@media (max-width: 720px) { .glance { gap: 12px; grid-template-columns: repeat(2, 1fr); } }
.tile { padding: 16px; display: flex; flex-direction: column; gap: 4px; aspect-ratio: 1; margin: 0; }
.tile .tile-value, .tile .tile-chips { margin-top: auto; }
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.tile-icon svg { width: 22px; height: 22px; color: var(--primary); }
.tile-value { font: 700 26px/1.1 var(--display); }
.tile-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tile-chips .type-pill { font-size: 12px; padding: 1px 8px; }
.tile .muted { font-size: 14px; }
.steps { display: flex; gap: 4px; margin-top: 6px; }
.steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--border); }
.steps i.on { background: var(--primary); }
.src { position: relative; }
.src summary { list-style: none; cursor: pointer; color: var(--muted-foreground); display: flex; }
.src summary::-webkit-details-marker { display: none; }
.src summary svg { width: 18px; height: 18px; }
.src p { position: absolute; right: 0; top: 24px; z-index: 5; width: 220px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--card, var(--background)); border: var(--stroke) solid var(--border); font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px rgb(0 0 0 / 25%); }
.area-row + .area-row { margin-top: 22px; }
.area-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.area-head h3 { font-size: 18px; margin: 0 0 6px; }
.area-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; font-size: 15px; }
.area-facts b { font: 700 18px var(--display); }
.split-bar { display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden; }
.split-bar i, .legend i { background: var(--primary); }
.split-bar .p1, .legend .p1 { background: var(--brand-red); }
.split-bar .p2, .legend .p2 { background: #f5a524; }
.split-bar .p3, .legend .p3 { background: #3fb6c8; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 13px; color: var(--muted-foreground); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* List pages: the title sits small in the middle of the header, so the listings start near the top. */
.top-title { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.top-title h1 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-title span { display: block; font-size: 13px; color: rgb(255 255 255 / 65%); white-space: nowrap; }
:root[data-theme='light'] .top-title { color: var(--sky-text); }
:root[data-theme='light'] .top-title span { color: rgb(26 26 51 / 60%); }
.list-page { padding-top: 20px; }
.list-page .crumbs { margin-bottom: 12px; }
.list-chips { margin: 0 0 20px; }
@media (max-width: 720px) {
  .chips.list-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
  .chips.list-chips::-webkit-scrollbar { display: none; }
  .chips.list-chips .chip { flex: none; }
}
@media (max-width: 900px) { .top-title + .nav + .theme-toggle { margin-left: 0; } }
.hbars { display: grid; gap: 8px; margin-top: 4px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 40%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.hbar span { color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar i { display: block; height: 10px; border-radius: 5px; background: var(--primary); min-width: 4px; }
.hbar b { font: 700 15px var(--display); }

/* Faint arrows at the ends of sideways rows (site.js). */
.scroll-hint { position: relative; }
.scroll-hint.grow { flex: 1; min-width: 0; display: flex; }
.scroll-hint.grow > .sb-items { flex: 1; }
.hint-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--foreground); opacity: 0; pointer-events: none; transition: opacity .5s ease-in-out; z-index: 2; }
.hint-arrow svg { width: 22px; height: 22px; display: block; }
.hint-arrow.left { left: 2px; }
.hint-arrow.right { right: 2px; }
.hint-arrow.on { opacity: .55; }
.scroll-hint.scrolling .hint-arrow { opacity: 0; }

/* Not listed yet (growth step 3): muted, under the real listings. */
.not-listed { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.not-listed h2 { font-size: 1.15rem; margin-bottom: 6px; }
.not-listed h3 { font-size: .95rem; margin: 16px 0 4px; color: var(--muted-foreground); }
.not-listed ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; }
.not-listed li { break-inside: avoid; margin: 2px 0; }
@media (max-width: 600px) { .not-listed ul { columns: 1; } }

/* The space-wanted card an advertiser shows a business owner. */
.wanted .facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0 20px; }
.wanted .facts dt { color: var(--muted-foreground); }
.wanted .facts dd { margin: 0; }
.wanted h3 { margin-top: 8px; }

/* Booking from the browser (/book/<id>) */
.book-page .book-space { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 20px; color: inherit; text-decoration: none; }
.book-space img, .book-space .no-photo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.book-space > span:last-child { display: grid; gap: 2px; min-width: 0; }
.choices { display: grid; gap: 8px; margin-top: 6px; }
.form .choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: var(--stroke) solid var(--border); border-radius: 14px; cursor: pointer; font-weight: 400; }
.form .choice input { width: 20px; height: 20px; min-height: 0; flex: none; margin: 2px 0 0; padding: 0; accent-color: var(--primary); }
.choice > span { display: grid; gap: 2px; }
.choice:has(input:checked) { border-color: var(--primary); }
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.price-lines { margin: 18px 0 4px; transition: opacity .2s; }
.price-lines.loading { opacity: .5; }
.price-lines .line { padding: 9px 0; }
.price-lines .line.total { font-size: 1.1em; }
.stripe-box { padding: 14px; border: var(--stroke) solid var(--border); border-radius: 12px; background: var(--card); margin-top: 6px; }
.card-line { margin: 6px 0; font-weight: 700; }
.form .check .muted { display: block; font-weight: 400; }
fieldset.field { margin-top: 18px; }

/* An advertiser's bookings (/bookings, /booking/<id>) */
.page-title { font: 700 clamp(26px, 6vw, 34px)/1.15 var(--display); margin: 10px 0 4px; }
.booking-list { display: grid; gap: 10px; margin-top: 16px; }
.booking-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: inherit; text-decoration: none; }
.booking-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.booking-art { display: block; max-width: 100%; max-height: 360px; border-radius: 12px; margin-top: 8px; }
.booking-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.booking-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.link-btn.danger { color: var(--destructive, #e5484d); }
.app-offer { margin-top: 20px; }

/* The booking form on wide screens: the form, with the space and its price beside it. */
.field { align-content: start; }
.book-layout { max-width: 640px; margin: 0 auto; }
.price-card { padding: 18px 20px; }
.price-card h3 { margin: 0; }
.price-card .price-lines { margin-top: 8px; }
.book-side .price-card { display: none; }
@media (min-width: 900px) {
  .book-layout { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .book-side { order: 2; position: sticky; top: 96px; display: grid; gap: 16px; }
  .book-page .book-side .book-space { margin-bottom: 0; }
  .book-side .price-card { display: block; }
  .book-main #price { display: none; }
  .book-main #after.choices, .book-main #make.choices { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.book-page > .wrap { padding-top: 24px; }

.info-tip { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -4px 0 -6px 2px; vertical-align: middle; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.info-tip:hover { color: var(--primary); background: var(--glass); }
.info-tip svg { width: 18px; height: 18px; }
.form .refund-rules { margin: 14px 0 0; padding: 12px 14px; border: var(--stroke) solid var(--border); border-radius: 14px; }
.refund-rules .refund-title { display: block; margin-bottom: 4px; }
.refund-rules .line { padding: 7px 0; font-size: .95rem; }
.refund-rules .line:first-of-type { border-top: 0; }
.refund-rules .hint { margin: 8px 0 0; color: var(--muted-foreground); font-size: .85rem; font-weight: 600; }