/* Ritzy content pages — design system.
   Served with the pages generated by tools/build-pages.mjs. The homepage
   (index.html) keeps its own inline styles; tokens here mirror its palette
   (black / #4cbb17 green) so the whole site reads as one product.

   Structure: tokens → base → header → hero → blocks → footer → motion. */

/* ---------- Tokens ---------- */
:root {
  --green: #4cbb17;
  --green-2: #7ee34a;
  --green-dark: #3f9f12;
  --green-ink: #6fdc3a;
  --green-tint: rgba(76, 187, 23, 0.14);
  --green-glow: rgba(76, 187, 23, 0.45);
  --bg: #000000;
  --bg-2: #0a0a0a;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --text: #f4f7f2;
  --muted: rgba(244, 247, 242, 0.62);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --glass-bg: rgba(0, 0, 0, 0.7);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.6s;
  color-scheme: dark;
}

html[data-theme="light"] {
  --green-ink: #2f8f12;
  --green-tint: rgba(76, 187, 23, 0.12);
  --green-glow: rgba(76, 187, 23, 0.3);
  --bg: #ffffff;
  --bg-2: #f5f5f5;
  --surface: rgba(10, 20, 10, 0.03);
  --surface-2: rgba(10, 20, 10, 0.06);
  --text: #0b100b;
  --muted: rgba(11, 16, 11, 0.62);
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.14);
  --glass-bg: rgba(255, 255, 255, 0.78);
  --shadow: 0 24px 60px rgba(20, 50, 20, 0.12);
  --shadow-sm: 0 8px 24px rgba(20, 50, 20, 0.08);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient background: slow aurora + fine grid, fixed behind everything */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-fx::before, .bg-fx::after {
  content: "";
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: drift 26s var(--ease) infinite alternate;
}
.bg-fx::before { top: -30vmax; right: -20vmax; background: radial-gradient(circle, rgba(76, 187, 23, 0.32), transparent 60%); }
.bg-fx::after { bottom: -35vmax; left: -25vmax; background: radial-gradient(circle, rgba(76, 187, 23, 0.16), transparent 60%); animation-delay: -12s; animation-duration: 32s; }
.bg-fx .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 0%, #000 20%, transparent 100%);
  mask-image: radial-gradient(60% 50% at 50% 0%, #000 20%, transparent 100%);
  opacity: 0.5;
}
html[data-theme="light"] .bg-fx::before, html[data-theme="light"] .bg-fx::after { opacity: 0.35; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-8vmax, 6vmax, 0) scale(1.15); }
}

img { max-width: 100%; display: block; }
a { color: var(--green-ink); }
::selection { background: var(--green); color: #fff; }

h1, h2, h3 { font-family: 'Montserrat', 'Inter', sans-serif; line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.015em; }
h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 900; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 14px; }

/* Gradient word */
h1 span, h2 span {
  background: linear-gradient(92deg, var(--green) 0%, var(--green-2) 55%, var(--green) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 2000; background: var(--green); color: #fff; padding: 8px 14px; border-radius: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 15px/1 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn i { transition: transform 0.25s var(--ease); }
.btn:hover .fa-arrow-right { transform: translateX(4px); }

.btn.btn-primary { background: linear-gradient(135deg, var(--green-2), var(--green) 45%, var(--green-dark)); color: #fff; box-shadow: 0 10px 30px -10px var(--green-glow); }
.btn.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.btn.btn-primary:hover { box-shadow: 0 16px 40px -10px var(--green-glow); }
.btn.btn-primary:hover::after { transform: translateX(120%); }

.btn.btn-ghost { border-color: var(--line-2); color: var(--text); background: var(--surface); backdrop-filter: blur(8px); }
.btn.btn-ghost:hover { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ---------- Header ----------
   One fixed height (--header-h). It used to shrink 12px once you scrolled past 8px,
   which pulled the page up under you, dropped you back above 8px and made it shake. */
.sh {
  position: sticky; top: 0; z-index: 1000;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sh.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.6); }
.sh-row { display: flex; align-items: center; gap: 16px; height: var(--header-h); }

.sh-logo { flex: none; display: inline-flex; }
.sh-logo img { height: 40px; width: auto; }
/* Dark and light logos are both in the markup; the theme picks one before
   first paint (content pages theme html and body, the homepage body only) */
.sh-logo .logo-light, .sf-brand .logo-light { display: none; }
html[data-theme="light"] .sh-logo .logo-dark, html[data-theme="light"] .sf-brand .logo-dark,
body[data-theme="light"] .sh-logo .logo-dark, body[data-theme="light"] .sf-brand .logo-dark { display: none; }
html[data-theme="light"] .sh-logo .logo-light, html[data-theme="light"] .sf-brand .logo-light,
body[data-theme="light"] .sh-logo .logo-light, body[data-theme="light"] .sf-brand .logo-light { display: block; }
/* The wordmarks sit on white (light) or near-black (dark); blending drops
   that ground so no box shows against the header or footer. The homepage
   themes body only, hence both selectors. */
.sh-logo img, .sf-brand img { mix-blend-mode: screen; }
html[data-theme="light"] .sh-logo img, html[data-theme="light"] .sf-brand img,
body[data-theme="light"] .sh-logo img, body[data-theme="light"] .sf-brand img { mix-blend-mode: multiply; }

/* Main links sit together in one rounded bar, centred between the logo and the buttons */
.sh-nav {
  flex: 0 1 auto; min-width: 0; margin: 0 auto;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.sh-item { position: relative; }
.sh-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; white-space: nowrap;
  border: 0; background: none;
  color: var(--muted);
  font: 600 14px/1 'Inter', sans-serif;
  text-decoration: none; cursor: pointer; border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.sh-link:hover, .sh-item:focus-within > .sh-link, .sh-item.open > .sh-link, .sh-link[aria-current="page"] { color: var(--green-ink); background: var(--green-tint); }
.sh-link i { font-size: 9px; opacity: 0.7; transition: transform 0.25s var(--ease); }
.sh-item:hover > .sh-link i, .sh-item.open > .sh-link i { transform: rotate(180deg); }

.sh-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  min-width: 270px; padding: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.sh-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.sh-item:hover > .sh-menu, .sh-item:focus-within > .sh-menu, .sh-item.open > .sh-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.sh-menu a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 11px; color: var(--text); text-decoration: none; transition: background 0.15s; }
.sh-menu a:hover, .sh-menu a[aria-current="page"] { background: var(--green-tint); }
.sh-menu a i { color: var(--green); width: 18px; margin-top: 3px; text-align: center; }
.sh-menu a b { display: block; font-size: 14px; font-weight: 600; }
.sh-menu a small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.sh-menu.cols { display: grid; grid-template-columns: 1fr 1fr; min-width: 520px; }

.sh-right { flex: none; display: flex; align-items: center; gap: 8px; }
.sh-right .btn, .sh-right .btn.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
/* Sign in sits beside the header button, so it is always the green "Book a driver"
   (/book still asks to sign in). html:root outranks booking.css's signed-out grey. */
.sh-right .book-cta .when-out { display: none; }
.sh-right .book-cta .when-in { display: inline-flex; }
html:root .sh-right .btn.btn-primary.book-cta {
  background: linear-gradient(135deg, #7ee34a, #4cbb17 45%, #3f9f12);
  color: #fff; border: 1px solid transparent;
  box-shadow: 0 10px 24px -12px rgba(76, 187, 23, 0.65);
}
html:root .sh-right .btn.btn-primary.book-cta:hover { filter: brightness(1.06); }
/* App downloads: in the compact header only (the full header has no room); icons alone on narrow phones */
.sh-apps { display: none; gap: 6px; }
.sh-app {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 14px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--text); font: 600 13px/1 'Inter', sans-serif; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.sh-app i { font-size: 16px; }
.sh-app:hover { border-color: var(--green); color: var(--green-ink); }
.menu-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); cursor: pointer; font-size: 15px;
  transition: border-color 0.2s, color 0.2s;
}
.menu-btn:hover { border-color: var(--green); color: var(--green-ink); }
.menu-btn { display: none; }

/* Footer theme switch (light is the default; the header has no toggle). The homepage
   keys its theme on body[data-theme], the other pages on html[data-theme]. */
.theme-switch {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--muted); font: 600 13px/1 'Inter', sans-serif; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.theme-switch:hover { border-color: var(--green); color: var(--green-ink); }
.theme-switch span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.theme-switch .ts-light,
html[data-theme="dark"] .theme-switch .ts-dark, body[data-theme="dark"] .theme-switch .ts-dark { display: none; }
html[data-theme="dark"] .theme-switch .ts-light, body[data-theme="dark"] .theme-switch .ts-light { display: inline-flex; }

/* Mobile drawer */
.sh-drawer {
  display: grid; grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows 0.35s var(--ease), border-color 0.35s;
}
.sh-drawer > div { overflow: hidden; }
.sh-drawer.open { grid-template-rows: 1fr; border-top-color: var(--line); }
.sh-drawer.open > div { overflow-y: auto; max-height: calc(100vh - var(--header-h)); padding: 8px 16px 24px; }
.sh-drawer details { border-bottom: 1px solid var(--line); }
.sh-drawer summary, .sh-drawer > div > a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 4px; color: var(--text); font-weight: 600; text-decoration: none; cursor: pointer; list-style: none;
}
.sh-drawer > div > a { border-bottom: 1px solid var(--line); }
.sh-drawer summary::-webkit-details-marker { display: none; }
.sh-drawer summary i { transition: transform 0.25s var(--ease); font-size: 12px; color: var(--muted); }
.sh-drawer details[open] summary i { transform: rotate(180deg); }
.sh-drawer details a { display: block; padding: 10px 14px; color: var(--muted); text-decoration: none; }
.sh-drawer details a:hover, .sh-drawer details a[aria-current="page"] { color: var(--green-ink); }
.sh-drawer .btn { width: 100%; margin-top: 18px; }

@media (max-width: 1040px) {
  html:root { --header-h: 64px; } /* beats the :root value booking.css sets later */
  .sh-nav, .sh-right .btn { display: none; }
  .menu-btn { display: inline-grid; }
  .sh-right { margin-left: auto; }
  .sh-logo img { height: 36px; }
  .sh-apps { display: flex; }
}
@media (max-width: 480px) {
  .sh-app { width: 40px; padding: 0; }
  .sh-app span { display: none; }
}

/* ---------- Breadcrumb ---------- */
.crumbs { padding-top: 12px; font-size: 13px; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.45; }
.crumbs a { display: inline-block; padding: 6px 0; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green-ink); }

/* ---------- Sections ---------- */
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec-alt { position: relative; padding: clamp(56px, 8vw, 104px) 0; background: var(--bg-2); }
.sec-alt::before, .sec-alt::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }
.sec-alt::before { top: 0; } .sec-alt::after { bottom: 0; }
.sec-head { max-width: 760px; margin-bottom: 36px; }
.sec-head p { color: var(--muted); font-size: 17px; }
.sec-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid rgba(76, 187, 23, 0.35);
  background: var(--green-tint); color: var(--green-ink);
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero-grid.solo { grid-template-columns: 1fr; max-width: 860px; }
.hero .lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 640px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; }
.hero-points i { color: var(--green); margin-top: 5px; }

.hero-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; padding: 30px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hero-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(76, 187, 23, 0.7), transparent 40%, transparent 60%, rgba(76, 187, 23, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.hero-card h2 { font-size: 20px; }
.hero-card .stat-list { display: grid; gap: 16px; margin: 18px 0 22px; }
.hero-card .stat-list div { display: flex; gap: 14px; align-items: center; }
.hero-card .stat-list b { font: 800 26px/1 'Montserrat', sans-serif; color: var(--green-ink); min-width: 104px; white-space: nowrap; }
.hero-card .stat-list span { color: var(--muted); font-size: 14.5px; }
.hero-card .btn { width: 100%; }

.hero-img { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; background: var(--bg-2); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.hero-img:hover img { transform: scale(1.06); }
.hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 6, 4, 0.7)); pointer-events: none; }
.hero-img .float {
  position: absolute; left: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(6, 8, 6, 0.7); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff;
  font-size: 13px; font-weight: 600;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: bob 5s ease-in-out infinite;
}
.hero-img .float .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 0 var(--green-glow); animation: pulse 2s infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--green-glow); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-img { aspect-ratio: 16 / 11; }
}

/* ---------- Page photo ---------- */
.page-media {
  margin: 0;
  border-radius: 26px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}
.page-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-wrap { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 40px; align-items: center; }
.media-wrap .media-copy p { color: var(--muted); font-size: 17px; }
@media (max-width: 880px) { .media-wrap { grid-template-columns: 1fr; gap: 24px; } }

/* About Us: team photo above the team cards, then the co-founder cards */
.team-photo { margin-bottom: 24px; }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.founder { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: start; }
.founder-photo { width: 120px; aspect-ratio: 1; border-radius: 24px; overflow: hidden; display: grid; place-items: center; background: var(--green-tint); border: 1px solid rgba(76, 187, 23, 0.25); color: var(--green-ink); font-size: 44px; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-msg { margin: 0; }
.founder-msg i { color: var(--green); font-size: 20px; }
.founder-msg p { margin: 8px 0 16px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.founder-name { margin: 0; }
.founder-name b { display: block; font: 700 17px/1.3 'Montserrat', sans-serif; color: var(--text); }
.founder-name span { font-size: 13.5px; font-weight: 600; color: var(--green-ink); }
@media (max-width: 880px) { .founders { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .founder { grid-template-columns: 1fr; gap: 16px; } .founder-photo { width: 96px; font-size: 36px; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; overflow: hidden; }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, var(--green-tint), transparent 70%); }
.stat b { display: block; font: 900 clamp(28px, 3.4vw, 40px)/1.1 'Montserrat', sans-serif; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.cards.c4 { grid-template-columns: repeat(4, 1fr); }
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
}
.card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(76, 187, 23, 0.16), transparent 45%);
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
a.card { color: inherit; text-decoration: none; display: block; }
a.card:hover, .card.lift:hover { border-color: rgba(76, 187, 23, 0.55); transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.card > * { position: relative; }
.card p { color: var(--muted); margin: 0; font-size: 15px; }
.card .more { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--green-ink); font-weight: 600; font-size: 14px; }
.card .more i { transition: transform 0.25s var(--ease); }
a.card:hover .more i { transform: translateX(4px); }

.icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 14px; margin-bottom: 16px;
  background: var(--green-tint); color: var(--green-ink); font-size: 19px;
  border: 1px solid rgba(76, 187, 23, 0.25);
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s;
}
.card:hover .icon { transform: translateY(-3px) rotate(-6deg); background: var(--green); color: #fff; }

@media (max-width: 960px) { .cards, .cards.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards, .cards.c2, .cards.c4 { grid-template-columns: 1fr; } }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; position: relative; }
.steps li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: border-color 0.3s, transform 0.4s var(--ease); }
.steps li:hover { border-color: rgba(76, 187, 23, 0.5); transform: translateY(-3px); }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: inline-grid; place-items: center; height: 36px; padding: 0 12px; margin-bottom: 16px;
  border-radius: 999px; background: linear-gradient(135deg, var(--green-2), var(--green)); color: #fff;
  font: 800 13px/1 'Montserrat', sans-serif; letter-spacing: 0.1em;
}
.steps p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split ul { padding-left: 0; list-style: none; display: grid; gap: 12px; margin: 18px 0 0; }
.split li { display: flex; gap: 12px; }
.split li i { color: var(--green); margin-top: 5px; }
.split .media { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.split .media img { transition: transform 1.2s var(--ease); }
.split .media:hover img { transform: scale(1.04); }
/* The app icon tile: icon sized, not column sized */
.split .media-icon { justify-self: center; width: min(100%, 300px); border-radius: 22%; }
.split .media-icon img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: border-color 0.25s, background 0.25s; }
.faq details[open] { border-color: rgba(76, 187, 23, 0.45); background: var(--surface-2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-2); color: var(--green-ink);
  font-size: 18px; line-height: 1; transition: transform 0.3s var(--ease), background 0.25s, color 0.25s;
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--green); color: #fff; border-color: var(--green); }
.faq .a { padding: 0 22px 20px; color: var(--muted); animation: fade-up 0.4s var(--ease); }
.faq .a p:last-child { margin: 0; }
@keyframes fade-up { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chips a, .chips span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: border-color 0.2s, color 0.2s, transform 0.25s var(--ease), background 0.2s;
}
.chips a:hover { border-color: var(--green); color: var(--green-ink); transform: translateY(-2px); background: var(--green-tint); }
.chips i { color: var(--green); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee ul { display: flex; gap: 14px; width: max-content; list-style: none; margin: 0; padding: 4px 0; animation: marquee 40s linear infinite; }
.marquee:hover ul { animation-play-state: paused; }
.marquee li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; white-space: nowrap; }
.marquee li i { color: var(--green); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Prose ---------- */
.prose { max-width: 820px; }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 44px; }
.prose h3, .legal-prose h2 { font-size: 17px; margin-top: 28px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose .term-item { padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.prose .term-item:last-child { border-bottom: 0; }
.prose .highlight-box, .callout { margin: 16px 0; padding: 16px 18px; border-left: 3px solid var(--green); border-radius: 0 14px 14px 0; background: var(--green-tint); }
.prose .highlight-box p:last-child, .callout p:last-child { margin: 0; }
.prose .highlight-box p, .callout p { color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); color: var(--text); }
.meta { color: var(--muted); font-size: 14px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.toc { position: sticky; top: 96px; align-self: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 14px; }
.toc b { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.toc a { display: block; padding: 5px 0; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--green-ink); }
.legal-grid { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .legal-grid { grid-template-columns: 1fr; } .toc { position: static; } }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list i { color: var(--green); margin-top: 5px; width: 18px; text-align: center; }
.contact-list a { color: var(--text); font-weight: 600; text-decoration: none; }
.contact-list a:hover { color: var(--green-ink); }
.contact-list small { display: block; color: var(--muted); }

/* ---------- Blog ---------- */
.post-card h3 { font-size: 19px; }
.post-card .meta { margin-bottom: 10px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(30px, 4.5vw, 52px); border-radius: 30px;
  background: linear-gradient(135deg, rgba(76, 187, 23, 0.22), transparent 50%), var(--bg-2);
  border: 1px solid var(--line);
}
.cta-band::before { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--green-glow), transparent 65%); filter: blur(20px); opacity: 0.7; animation: bob 7s ease-in-out infinite; }
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 6px; }
.cta-band p { color: var(--muted); margin: 0; max-width: 560px; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }

.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 6px 16px; border-radius: 14px;
  background: #000; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.1;
  transition: border-color 0.2s, transform 0.25s var(--ease);
}
.store i { font-size: 22px; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: 0.8; }
.store:hover { border-color: var(--green); transform: translateY(-2px); }

/* ---------- Footer ---------- */
.sf { position: relative; margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); background: var(--bg-2); }
.sf::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--green), transparent); opacity: 0.6; }
.sf-main { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px; padding: 56px 0 36px; }
.sf-brand img { width: auto; height: 44px; margin-bottom: 14px; }
.sf-brand p { color: var(--muted); font-size: 14px; }
.sf-col h3 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; }
.sf-col a { display: block; padding: 4px 0; color: var(--muted); text-decoration: none; font-size: 14px; transition: color 0.2s, transform 0.2s var(--ease); }
.sf-col a:hover, .sf-col a[aria-current="page"] { color: var(--green-ink); transform: translateX(3px); }
.sf-social { display: flex; gap: 10px; margin-top: 16px; }
.sf-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color 0.2s, color 0.2s, transform 0.25s var(--ease); }
.sf-social a:hover { border-color: var(--green); color: var(--green-ink); transform: translateY(-3px); }
.sf-contact { display: flex; flex-wrap: wrap; gap: 2px 28px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.sf-contact span, .sf-contact a { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; color: var(--muted); text-decoration: none; }
.sf-contact a:hover { color: var(--green-ink); }
.sf-contact i { color: var(--green); }
.sf-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 0 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.sf-bottom nav { display: flex; flex-wrap: wrap; gap: 0 16px; }
.sf-bottom a { display: inline-block; padding: 8px 0; color: var(--muted); text-decoration: none; }
.map-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
/* Contact page: office address beside the Google Maps embed */
.find-us { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: stretch; }
.map-embed { position: relative; min-height: 340px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); }
/* Google's embed can't be styled, so in the dark theme the map's lightness is inverted
   (hue-rotate puts the colours back): dark land, red pin, blue buttons */
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(0.9) hue-rotate(180deg) saturate(0.9) brightness(0.92); transition: filter 0.35s var(--ease); }
html[data-theme="light"] .map-embed iframe { filter: none; }
@media (max-width: 880px) { .find-us { grid-template-columns: 1fr; } .map-embed { min-height: 0; aspect-ratio: 4 / 3; } }
.sf-bottom a:hover { color: var(--green-ink); }
@media (max-width: 1024px) { .sf-main { grid-template-columns: repeat(3, 1fr); } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sf-main { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0s); }
.reveal-scale.in { opacity: 1; transform: none; }
.no-js .reveal, .no-js .reveal-scale { opacity: 1; transform: none; }

/* Hero entrance */
.hero .eyebrow, .hero h1, .hero .lede, .hero .hero-points, .hero .hero-ctas { animation: rise 0.9s var(--ease) both; }
.hero h1 { animation-delay: 0.05s; } .hero .lede { animation-delay: 0.12s; } .hero .hero-points { animation-delay: 0.18s; } .hero .hero-ctas { animation-delay: 0.24s; }
.hero-card, .hero-img { animation: rise-scale 1s var(--ease) 0.2s both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rise-scale { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Cross-page transitions (Chromium / Safari 18+; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.25s var(--ease) both vt-out; }
::view-transition-new(root) { animation: 0.4s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.sh { view-transition-name: site-header; }

/* Scroll progress */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--green), var(--green-2)); z-index: 1100; pointer-events: none; }

/* Back to top */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--glass-bg); color: var(--text); cursor: pointer; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s var(--ease), border-color 0.2s;
}
.to-top.show { opacity: 1; transform: none; }
.to-top:hover { border-color: var(--green); color: var(--green-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal-scale { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* ---------- Account: header Sign in / chip, drawer, footer (wired by booking.js) ---------- */
.nav-authpair, .mobile-authpair { display: inline-flex; gap: 8px; }
.mobile-authpair, .mobile-account { padding: 14px 0; }
.nav-signin, .nav-signup, .nav-signout, .footer-auth {
  display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 700 13.5px/1 'Inter', sans-serif;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.nav-signup { background: var(--green); border-color: var(--green); color: #fff; }
.nav-signin:hover, .nav-signout:hover, .footer-auth:hover { border-color: var(--green); color: var(--green-ink); }
.nav-account, .mobile-account { display: inline-flex; align-items: center; gap: 8px; }
.nav-account[hidden], .mobile-account[hidden], .nav-authpair[hidden], .mobile-authpair[hidden], .footer-account-signed[hidden], .footer-auth[hidden] { display: none; }
.nav-account-av, .footer-account-av {
  width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--green); color: #fff; font: 800 13px/1 'Montserrat', sans-serif; text-transform: uppercase;
}
.nav-account-name { font-weight: 600; font-size: 14px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.footer-account-signed { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.sh-drawer .book-cta { width: 100%; margin-top: 12px; }
@media (max-width: 1040px) { .sh-right .nav-authpair, .sh-right .nav-account { display: none; } }
@media (max-width: 1240px) and (min-width: 1041px) { .nav-account-name { display: none; } .sh-link { padding: 0 11px; font-size: 13.5px; } }

/* =====================================================================
   GLASS — frosted tiles over a glowing backdrop. Shared by the homepage
   (theme on body[data-theme]) and the content pages (html[data-theme]),
   so tokens live on body and the light theme matches either attribute.
   Selectors start with `html body` so they win over the homepage's own
   inline tile styles.
   ===================================================================== */
body {
  --tile: linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025) 60%, rgba(76, 187, 23, 0.05));
  --tile-hover: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 60%, rgba(76, 187, 23, 0.10));
  --tile-border: rgba(255, 255, 255, 0.13);
  --tile-edge: rgba(255, 255, 255, 0.28);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --tile-blur: blur(18px) saturate(170%);
  --orb-1: rgba(76, 187, 23, 0.55);
  --orb-2: rgba(126, 227, 74, 0.28);
  --orb-3: rgba(20, 140, 110, 0.35);
}
html[data-theme="light"] body, body[data-theme="light"] {
  --tile: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.50) 60%, rgba(76, 187, 23, 0.06));
  --tile-hover: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.62) 60%, rgba(76, 187, 23, 0.10));
  --tile-border: rgba(255, 255, 255, 0.9);
  --tile-edge: rgba(255, 255, 255, 1);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.05), 0 24px 50px -26px rgba(20, 70, 20, 0.30);
  --orb-1: rgba(76, 187, 23, 0.30);
  --orb-2: rgba(126, 227, 74, 0.25);
  --orb-3: rgba(40, 180, 150, 0.20);
}

/* Backdrop: three drifting orbs for the glass to blur */
html body .bg-fx::before { width: 60vmax; height: 60vmax; top: -22vmax; right: -16vmax; opacity: 1; background: radial-gradient(circle, var(--orb-1), transparent 62%); }
html body .bg-fx::after { width: 55vmax; height: 55vmax; bottom: -24vmax; left: -18vmax; opacity: 1; background: radial-gradient(circle, var(--orb-3), transparent 62%); }
html body .bg-fx .grid::after {
  content: ""; position: fixed; width: 38vmax; height: 38vmax; top: 38%; left: 42%;
  border-radius: 50%; filter: blur(70px);
  background: radial-gradient(circle, var(--orb-2), transparent 65%);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
/* Let the backdrop show through alternating sections and the footer */
html body .sec-alt { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)); }
html[data-theme="light"] body .sec-alt, html body[data-theme="light"] .sec-alt { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25)); }
html body .sf { background: var(--tile); -webkit-backdrop-filter: var(--tile-blur); backdrop-filter: var(--tile-blur); }

/* The tiles */
html body .card, html body .stat, html body .steps li, html body .faq details,
html body .hero-card, html body .cta-band, html body .book-progress, html body .book-help,
html body .svc-card, html body .marquee li, html body .chips a, html body .chips span,
html body .hero-trust > div, html body .toc,
html body #ritzy-interface .ai-feature {
  background: var(--tile);
  border: 1px solid var(--tile-border);
  box-shadow: var(--tile-shadow);
  -webkit-backdrop-filter: var(--tile-blur);
  backdrop-filter: var(--tile-blur);
}
html body .card:hover, html body .steps li:hover, html body .svc-card:hover, html body .stat:hover,
html body .faq details[open], html body .chips a:hover, html body .hero-trust > div:hover,
html body #ritzy-interface .ai-feature[aria-selected="true"] {
  background: var(--tile-hover);
  border-color: rgba(76, 187, 23, 0.55);
}
html body .stat, html body .hero-trust > div { transition: transform 0.4s var(--ease), background 0.3s, border-color 0.3s; }
html body .stat:hover, html body .hero-trust > div:hover { transform: translateY(-4px); }

/* Light catches the top edge of every tile; widens on hover */
html body .card::after, html body .stat::before, html body .steps li::after, html body .svc-card::after, html body .hero-trust > div::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tile-edge), transparent);
  transition: left 0.6s var(--ease), right 0.6s var(--ease);
}
html body .card:hover::after, html body .svc-card:hover::after, html body .steps li:hover::after { left: 0; right: 0; }
html body .stat, html body .steps li, html body .svc-card, html body .hero-trust > div { position: relative; }
html body .card, html body .svc-card { overflow: hidden; }

/* Homepage hero stats become glass tiles */
html body .hero-trust { border-top: 0; gap: 12px; padding-top: 8px; }
html body .hero-trust > div { flex: 1 1 140px; padding: 16px 18px; border-radius: 18px; }

/* Keeps hero glows (z-index -1, e.g. behind the homepage sign-in card) inside the hero */
html body .hero { isolation: isolate; }

/* Mega-menus get the same frost */
/* Near-solid: the header's own backdrop-filter stops this one blurring the page, so a
   see-through menu let the hero heading show through the links */
html body .sh-menu { background: rgba(10, 12, 10, 0.97); border-color: var(--tile-border); }
html[data-theme="light"] body .sh-menu, html body[data-theme="light"] .sh-menu { background: rgba(255, 255, 255, 0.98); }

@media (prefers-reduced-motion: reduce) {
  html body .bg-fx .grid::after { animation: none; }
}

/* =====================================================================
   RESPONSIVE SIZING — free-flowing scroll; spacing and type scale with
   the screen's width and height (desktop and mobile).
   ===================================================================== */
:root { --header-h: 72px; }
html { scroll-padding-top: calc(var(--header-h) + 12px); }
html body .sec, html body .sec-alt { padding-block: clamp(48px, 9vh, 104px); }
html body .hero { padding-block: clamp(28px, 6vh, 80px) clamp(40px, 8vh, 96px); }
/* Wide desktops: use the room */
@media (min-width: 1440px) {
  :root { --wrap: 1320px; }
  html body h1 { font-size: clamp(52px, 4.2vw, 68px); }
}
/* Tablets: two-up grids, comfortable gutters */
@media (min-width: 768px) and (max-width: 1023px) {
  html body .sec, html body .sec-alt { padding-block: clamp(48px, 7vh, 80px); }
}

/* Fit a section's content to one desktop screen */
@media (min-width: 1024px) {
  html body .sec-head { margin-bottom: clamp(18px, 3vh, 36px); }
  html body .cards, html body .steps, html body .stats, html body .bento { gap: clamp(12px, 1.6vh, 18px); }
  html body .card, html body .steps li { padding: clamp(18px, 2.4vh, 26px); }
  html body .icon { margin-bottom: clamp(10px, 1.4vh, 16px); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  html body h2 { font-size: clamp(24px, 3vw, 32px); }
  html body .card p, html body .steps p { font-size: 14px; }
}

/* Phones: tighter screens */
@media (max-width: 767px) {
  html body .sec, html body .sec-alt { padding-block: clamp(40px, 7vh, 64px); }
  html body .hero { padding-block: 20px 44px; }
  html body h1 { font-size: clamp(30px, 8.6vw, 40px); }
  html body h2 { font-size: clamp(24px, 6.6vw, 30px); }
  html body .sec-head p, html body .hero .lede { font-size: 16px; }
  html body .btn { min-height: 48px; }
  html body .hero-ctas .btn { flex: 1 1 auto; }
}
/* Short landscape phones / small laptops: trim vertical space */
@media (max-height: 560px) {
  html body .sec, html body .sec-alt { padding-block: 36px; }
  html body .hero { padding-block: 16px 32px; }
}

/* Desktop: keep the app showcase and the Why Ritzy bento inside one screen.
   The phone grows with the screen height but never below 280px, so short
   laptop windows still get a phone you can read. */
@media (min-width: 1024px) {
  html body #ritzy-interface .ai-stage { min-height: 0; }
  html body #ritzy-interface .ai-phone { width: clamp(280px, calc((100svh - var(--header-h) - 60px) * 0.5), 340px); }
  html body .bento { grid-auto-rows: minmax(clamp(120px, 17vh, 190px), auto); }
  html body .bento-hero { min-height: clamp(260px, 38vh, 380px); }
}

/* Phones: hero stat tiles as one compact row of three */
@media (max-width: 767px) {
  html body .hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html body .hero-trust > div { padding: 12px 10px; border-radius: 14px; }
  html body .hero-trust b { font-size: 20px; }
  html body .hero-trust span { font-size: 11.5px; line-height: 1.3; display: block; }
}

/* =====================================================================
   ONE SECTION, ONE SCREEN — when a section's heading reaches the top,
   all of that section fits on the screen (desktop and phone). Free scroll.
   ===================================================================== */
@media (min-width: 1024px) {
  html body .bento { grid-auto-rows: minmax(clamp(108px, 15vh, 190px), auto); }
  html body .bento-hero { min-height: clamp(230px, 33vh, 380px); }
  html body .bento .card { padding: clamp(16px, 2.2vh, 26px); }
}
@media (max-width: 767px) {
  html body .sec-head { margin-bottom: 16px; }
  html body .sec-head p { font-size: 14.5px; margin-bottom: 0; }
  html body .eyebrow { margin-bottom: 10px; padding: 5px 12px; font-size: 12px; }

  /* Tiles two-up and compact */
  html body .cards, html body .cards.c2, html body .cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .card { padding: 14px; border-radius: 16px; }
  html body .card .icon { width: 36px; height: 36px; margin-bottom: 10px; border-radius: 11px; font-size: 15px; }
  html body .card h3 { font-size: 14.5px; margin-bottom: 5px; line-height: 1.25; }
  html body .card p { font-size: 12.5px; line-height: 1.45; }
  html body .card .more { margin-top: 8px; font-size: 12.5px; }

  /* Steps two-up */
  html body .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .steps li { padding: 14px; border-radius: 16px; }
  html body .steps li::before { height: 28px; padding: 0 10px; margin-bottom: 10px; font-size: 11px; }
  html body .steps h3 { font-size: 14.5px; margin-bottom: 5px; }
  html body .steps p { font-size: 12.5px; line-height: 1.45; }

  /* Stats */
  html body .stats { gap: 10px; }
  html body .stat { padding: 14px; }
  html body .stat b { font-size: 24px; }
  html body .stat span { font-size: 12.5px; }

  /* Why Ritzy bento two-up */
  html body .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
  html body .bento-hero { grid-column: span 2; grid-row: auto; min-height: 190px; }
  html body .bento-band { grid-column: span 2; gap: 12px; }
  html body .bento-band .hero-ctas { width: 100%; }
  html body .bento .live-tag { top: 12px; right: 12px; padding: 3px 8px; font-size: 11px; }
  html body .bento-stat b { font-size: 24px; }

  /* Split sections (about, business, outstation…) */
  html body .split { gap: 16px; }
  html body .split .media { max-height: 210px; }
  html body .split .media img { height: 210px; width: 100%; object-fit: cover; object-position: center 20%; }
  html body .split .media-icon { width: 150px; max-height: none; }
  html body .split .media-icon img { height: auto; }
  html body .home-about-media { aspect-ratio: auto; }
  html body .split ul { gap: 8px; margin-top: 10px; }
  html body .split li { font-size: 14px; line-height: 1.45; }
  html body .split .meta { font-size: 14.5px !important; margin-bottom: 8px; }
  html body .split .hero-ctas { margin-top: 16px; }

  /* FAQs */
  html body .faq { gap: 8px; }
  html body .faq summary { padding: 13px 16px; font-size: 14.5px; }
  html body .faq .a { padding: 0 16px 14px; font-size: 14px; }

  /* App showcase */
  html body #ritzy-interface { padding-block: 40px; }
  html body #ritzy-interface .ai-stage { min-height: 0; }
  html body #ritzy-interface .ai-phone { width: min(200px, 52vw); }
  html body #ritzy-interface .ai-phone--back { display: none; }

  /* Page photo sections */
  html body .media-wrap { gap: 14px; }
  html body .media-copy p { font-size: 14.5px; }
  html body .media-copy .hero-points { margin-top: 10px; gap: 6px; }
  html body .media-copy .hero-points li { font-size: 14px; }

  /* Homepage service picks */
  html body .svc-go { padding: 14px 14px 12px; }
  html body .svc-icon { width: 38px; height: 38px; margin-bottom: 4px; }
  html body .svc-name { font-size: 15px; }
}
@media (max-width: 767px) {
  html body #ritzy-interface .ai-layout { gap: 14px; }
  html body #ritzy-interface h2 { margin-bottom: 4px; }
  html body #ritzy-interface .ai-stage { padding: 0; }
  html body #ritzy-interface .ai-stage::before { width: 260px; height: 260px; }
  html body #ritzy-interface .interface-download { margin-top: 4px; }
  html body .bento-hero { min-height: 150px; padding: 16px; }
  html body .bento-hero h3 { font-size: 15px; }
  html body .bento-band { padding: 14px; }
  html body .bento-band .icon { display: none; }
  html body .bento-band .btn { min-height: 42px; padding: 0 14px; font-size: 13.5px; flex: 1 1 0; }
  html body .split .media, html body .split .media img { max-height: 180px; height: 180px; }
  html body .split .media-icon, html body .split .media-icon img { width: 130px; height: auto; max-height: none; }
}
@media (max-width: 767px) {
  /* Pin graphic sits to the right instead of under the text */
  html body .bento-hero img { left: auto; right: -20px; top: -10px; width: 150px; height: 150px; opacity: 0.35; -webkit-mask-image: none; mask-image: none; }
  html body .bento-hero > div { max-width: 82%; }
  /* The "Easy booking" band repeats the hero CTAs — phones skip it */
  html body .bento-band { display: none; }
  html body #ritzy-interface .ai-phone { width: min(180px, 48vw); }
}
@media (max-width: 767px) {
  html body #ritzy-interface .store-badges { flex-direction: row; justify-content: center; gap: 8px; }
  html body #ritzy-interface .store-badge { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 8px 12px; gap: 8px; justify-content: center; white-space: nowrap; }
  /* Half-width buttons: the desktop sizes made "Google Play" wrap */
  html body #ritzy-interface .store-badge i { font-size: 22px; }
  html body #ritzy-interface .store-badge .sb-label { font-size: 11px; letter-spacing: 0; }
  html body #ritzy-interface .store-badge .sb-store { font-size: 15px; }
}
/* The narrowest phones: too tight side by side, so stack them */
@media (max-width: 340px) {
  html body #ritzy-interface .store-badges { flex-direction: column !important; align-items: stretch; } /* beats .store-badges row !important */
  html body #ritzy-interface .store-badge { flex: none; }
}
@media (max-width: 767px) {
  html body .faq { gap: 6px; }
  html body .faq summary { padding: 11px 14px; font-size: 14px; line-height: 1.35; }
  html body .faq summary::after { flex-basis: 24px; height: 24px; font-size: 16px; }
}
@media (max-width: 767px) {
  html body .hero-ctas { flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  /* Each button keeps its full label: two share a row when both fit,
     otherwise each takes the whole row. (flex: 1 1 0 with min-width: 0
     squeezed long labels like "Get the Ritzy Driver app" out of view.) */
  html body .hero-ctas .btn { flex: 1 1 auto; padding: 0 16px; font-size: 14px; white-space: nowrap; }
  html body .hero-points { margin-top: 16px; gap: 8px; }
  html body .hero-points li { font-size: 14.5px; line-height: 1.45; }
}
/* Shorter desktop screens: homepage hero text fits the first screen */
@media (min-width: 1024px) and (max-height: 900px) {
  html body .home-hero h1 { font-size: clamp(40px, 6.6vh, 58px); margin-bottom: 10px; }
  html body .home-hero .lede { font-size: 17px; margin-bottom: 0; }
  html body .home-hero .eyebrow { margin-bottom: 12px; }
  html body .home-hero .hero-points { margin-top: 14px; gap: 6px; }
  html body .home-hero .hero-ctas { margin-top: 18px; }
  html body .home-hero .hero-trust { margin-top: 16px; padding-top: 0; }
  html body .home-hero .hero-trust > div { padding: 12px 16px; }
  html body .home-hero .hero-trust b { font-size: 22px; }
  html body .home-hero .hero-cities { margin-top: 12px; }
}

/* Sign in / Sign up are links to /signin now */
a.nav-signin, a.nav-signup, a.footer-auth { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.nav-signin[hidden], a.nav-signup[hidden], a.footer-auth[hidden] { display: none; }

/* Hero: Book a driver + Android / iOS download badges */
html body .hero-ctas { align-items: center; }
html body .hero-stores { display: flex; gap: 10px; flex-wrap: wrap; }
html body .hero-stores .store { min-height: 50px; }
@media (max-width: 767px) {
  html body .hero-ctas { flex-wrap: wrap; }
  html body .hero-ctas .book-cta { flex: 1 1 100%; }
  html body .hero-stores { flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; }
  html body .hero-stores .store { flex: 1 1 0; justify-content: center; min-width: 0; padding: 6px 10px; font-size: 14px; }
  html body .hero-stores .store i { font-size: 20px; }
}