/* Ritzy design layer — Apple-style: clean white and light-grey bands, big tight
   headlines in San Francisco (Inter where it isn't installed), flat rounded
   cards, pill buttons, a thin frosted bar for navigation. Ritzy green is the
   accent. Loaded last on every page (after the homepage's inline styles), so
   it restyles the shared components and the homepage alike.

   Themes: content pages set html[data-theme] and body[data-theme]; the
   homepage sets body[data-theme] only. Tokens live on body, with selectors
   strong enough to beat the older token blocks they replace. */

/* ---------- Tokens ---------- */
html:root {
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --header-h: 52px;
  --wrap: 1200px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 0.7s;
}
@media (max-width: 1040px) { html:root { --header-h: 52px; } }

/* Light (default) */
html body:is([data-theme], :not([data-theme])) {
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --card: #f5f5f7;
  --surface: #f5f5f7;
  --surface-2: #e8e8ed;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --text-muted: #6e6e73;
  --footer-link: #424245;
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.16);
  --green: #4cbb17;
  --green-2: #4cbb17;
  --green-dark: #3a9512;
  --green-ink: #277a0e;   /* links and small green text: 5.4:1 on white */
  --hl: #3a9a10;          /* large highlighted headline words: 3.6:1 */
  --accent: #288210;      /* button fill, white text 4.9:1 */
  --accent-hover: #206b0c;
  --green-tint: rgba(76, 187, 23, 0.12);
  --green-glow: transparent;
  --glass-bg: rgba(255, 255, 255, 0.8);
  --menu-bg: rgba(255, 255, 255, 0.98);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 12px 36px rgba(0, 0, 0, 0.10);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --card-border: rgba(0, 0, 0, 0.08);
  /* the older frosted-glass tokens, flattened */
  --tile: #f5f5f7;
  --tile-hover: #f5f5f7;
  --tile-border: transparent;
  --tile-edge: transparent;
  --tile-shadow: none;
  --tile-blur: none;
  --orb-1: transparent; --orb-2: transparent; --orb-3: transparent;
  color-scheme: light;
}
/* Dark */
html[data-theme="dark"] body, html body[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #101011;
  --card: #1c1c1e;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --text-muted: #a1a1a6;
  --footer-link: #d2d2d7;
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);
  --green-ink: #6fdc3a;
  --hl: #6fdc3a;
  --green-tint: rgba(76, 187, 23, 0.18);
  --glass-bg: rgba(22, 22, 23, 0.8);
  --menu-bg: rgba(28, 28, 30, 0.98);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 12px 36px rgba(0, 0, 0, 0.55);
  --card-border: rgba(255, 255, 255, 0.12);
  --tile: #1c1c1e;
  --tile-hover: #1c1c1e;
  color-scheme: dark;
}
/* Cards sit white on the grey bands (light); dark keeps one card tone */
html body:is([data-theme], :not([data-theme])) .sec-alt { --card: #ffffff; --tile: #ffffff; --tile-hover: #ffffff; }
html[data-theme="dark"] body .sec-alt, html body[data-theme="dark"] .sec-alt { --card: #1c1c1e; --tile: #1c1c1e; --tile-hover: #1c1c1e; }

/* ---------- Base and type ---------- */
html body:not(.x) {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { scroll-padding-top: calc(var(--header-h) + 16px); }
html body:not(.x) h1, html body:not(.x) h2, html body:not(.x) h3, html body:not(.x) h4 { font-family: var(--font-display); color: var(--text); font-weight: 600; }
html body:not(.x) h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px; }
html body:not(.x) h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.07; letter-spacing: -0.025em; margin: 0 0 16px; }
html body:not(.x) h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 8px; }
/* Highlighted words: solid green, no shimmer */
html body:not(.x) h1 span, html body:not(.x) h2 span {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--hl); -webkit-text-fill-color: currentColor; animation: none;
}
/* The account tile's title is 22-32px, below "large text" on phones: it
   needs the darker green to reach 4.5:1 */
html body:not(.x) .auth-tile-title span { color: var(--green-ink); }
::selection { background: rgba(76, 187, 23, 0.25); color: inherit; }
html body:not(.x) :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { padding-inline: 22px; }
@media (max-width: 719px) { .wrap { padding-inline: 18px; } }

/* No glowing backdrop, no shimmering grid, no glows behind content */
.bg-fx, html body:not(.x) .bg-fx .grid::after { display: none; }
html body:not(.x) .home-hero-book::before, html body:not(.x) #ritzy-interface::before, html body:not(.x) .cta-band::before { display: none; }

/* ---------- Eyebrows, ledes, section heads ---------- */
html body:not(.x) .eyebrow {
  display: block; margin: 0 0 10px; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--green-ink);
  font: 600 17px/1.3 var(--font-text); letter-spacing: -0.01em; text-transform: none;
}
html body:not(.x) .eyebrow i { display: none; }
html body:not(.x) .hero .lede, html body:not(.x) .lede { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; color: var(--muted); letter-spacing: -0.015em; font-weight: 400; }

html body:not(.x) .sec, html body:not(.x) .sec-alt { padding-block: clamp(72px, 9vw, 120px); }
html body:not(.x) .sec { background: var(--bg); }
html body:not(.x) .sec-alt { background: var(--bg-2); }
html body:not(.x) .sec-alt::before, html body:not(.x) .sec-alt::after { display: none; }
html body:not(.x) .sec-head { max-width: 820px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
html body:not(.x) .sec-head p { font-size: clamp(17px, 1.6vw, 21px); color: var(--muted); line-height: 1.45; }
html body:not(.x) .sec-head .eyebrow { margin-inline: auto; }

/* ---------- Buttons and links ---------- */
html body:not(.x) .btn {
  min-height: 44px; padding: 0 22px; gap: 8px;
  border-radius: 980px; border: 1px solid transparent;
  font: 500 16px/1 var(--font-text); letter-spacing: -0.01em;
  box-shadow: none; transform: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
html body:not(.x) .btn:hover, html body:not(.x) .btn:active { transform: none; }
html body:not(.x) .btn i { font-size: 0.95em; }
html body:not(.x) .btn:hover .fa-arrow-right { transform: none; }
html body:not(.x) .btn.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
html body:not(.x) .btn.btn-primary::after { display: none; }
html body:not(.x) .btn.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; }
html body:not(.x) .btn.btn-ghost { background: transparent; border-color: var(--accent); color: var(--green-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
html body:not(.x) .btn.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
html body:not(.x) .btn.btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
/* "Learn more ›" links */
html body:not(.x) .card .more { margin-top: 16px; gap: 2px; color: var(--green-ink); font-weight: 400; font-size: 17px; }
html body:not(.x) .card .more i { display: none; }
html body:not(.x) .card .more::after { content: "\203A"; font-size: 1.15em; line-height: 1; margin-left: 4px; transition: transform 0.2s; }
html body:not(.x) a.card:hover .more { text-decoration: underline; }

/* ---------- Header: a thin frosted bar ---------- */
html body:not(.x) .sh {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); box-shadow: none;
}
html body:not(.x) .sh.scrolled { box-shadow: none; border-bottom-color: var(--line); }
html body:not(.x) .sh-row { height: var(--header-h); gap: 12px; }
html body:not(.x) .sh-logo img { height: 30px; }
html body:not(.x) .sh-nav { border: 0; background: none; padding: 0; gap: 0; }
html body:not(.x) .sh-link {
  height: var(--header-h); padding: 0 12px; border-radius: 0;
  background: none; color: var(--text); opacity: 0.8;
  font: 400 14px/1 var(--font-text); letter-spacing: -0.01em;
}
html body:not(.x) .sh-link:hover, html body:not(.x) .sh-item:focus-within > .sh-link, html body:not(.x) .sh-item.open > .sh-link, html body:not(.x) .sh-link[aria-current="page"] { background: none; color: var(--text); opacity: 1; }
html body:not(.x) .sh-link i { font-size: 8px; opacity: 0.6; }
html body:not(.x) .sh-menu, html[data-theme] body .sh-menu, html body[data-theme] .sh-menu {
  top: 100%; padding: 10px; min-width: 300px;
  background: var(--menu-bg); border: 0; border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}
html body:not(.x) .sh-menu a { padding: 10px 12px; border-radius: 12px; }
html body:not(.x) .sh-menu a:hover, html body:not(.x) .sh-menu a[aria-current="page"] { background: var(--bg-2); }
html body:not(.x) .sh-menu a i { color: var(--green-ink); }
html body:not(.x) .sh-menu a b { font-size: 14px; font-weight: 600; color: var(--text); }
html body:not(.x) .sh-menu a small { font-size: 12.5px; color: var(--muted); }
html body:not(.x) .sh-right { gap: 6px; }
html body:not(.x) .sh-right .btn, html body:not(.x) .sh-right .btn.btn-sm { min-height: 32px; padding: 0 14px; font-size: 14px; font-weight: 500; }
html:root body .sh-right .btn.btn-primary.book-cta { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; filter: none; }
html:root body .sh-right .btn.btn-primary.book-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
html body:not(.x) .nav-signin, html body:not(.x) .nav-signout {
  min-height: 32px; padding: 0 10px; border: 0; background: none;
  color: var(--text); font: 400 14px/1 var(--font-text); opacity: 0.8;
}
html body:not(.x) .nav-signin:hover, html body:not(.x) .nav-signout:hover { color: var(--text); opacity: 1; border: 0; }
html body:not(.x) .nav-signup { min-height: 32px; padding: 0 14px; background: var(--accent); border-color: var(--accent); font: 500 14px/1 var(--font-text); }
html body:not(.x) .sh-app {
  height: 34px; padding: 0 12px; border: 0; background: var(--card);
  color: var(--text); font: 500 13px/1 var(--font-text);
}
html body:not(.x) .sh-app:hover { background: var(--surface-2); color: var(--text); }
html body:not(.x) .menu-btn { width: 36px; height: 36px; border: 0; background: none; color: var(--text); font-size: 17px; }
html body:not(.x) .menu-btn:hover { background: var(--card); color: var(--text); }
@media (max-width: 480px) { html body:not(.x) .sh-app { width: 34px; padding: 0; } }
@media (max-width: 1040px) { html body:not(.x) .sh-logo img { height: 28px; } }
/* Phone menu */
html body:not(.x) .sh-drawer.open { border-top-color: var(--line); }
html body:not(.x) .sh-drawer.open > div { padding: 6px 22px 28px; background: var(--bg); }
html body:not(.x) .sh-drawer summary, html body:not(.x) .sh-drawer > div > a { padding: 16px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
html body:not(.x) .sh-drawer details a { font-size: 15px; padding: 9px 12px; color: var(--muted); }

/* ---------- Breadcrumbs ---------- */
html body:not(.x) .crumbs { font-size: 12px; color: var(--muted); padding-top: 14px; }
html body:not(.x) .crumbs a { color: var(--muted); }
html body:not(.x) .crumbs a:hover { color: var(--text); }

/* ---------- Hero ---------- */
html body:not(.x) .hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); }
html body:not(.x) .hero-grid { gap: clamp(32px, 5vw, 72px); }
html body:not(.x) .hero-points { margin-top: 24px; gap: 10px; }
html body:not(.x) .hero-points li { font-size: 17px; color: var(--text); }
html body:not(.x) .hero-points i { color: var(--green); }
html body:not(.x) .hero-ctas { margin-top: 30px; gap: 12px; }
html body:not(.x) .hero-card, html body:not(.x) .auth-tile {
  background: var(--card); border: 0; border-radius: var(--radius-lg);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body:not(.x) .hero-card::before, html body:not(.x) .auth-tile::after { display: none; }
html body:not(.x) .auth-tile-eyebrow { color: var(--green-ink); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
html body:not(.x) .auth-tile-eyebrow i { display: none; }
html body:not(.x) .auth-tile-title { font: 600 clamp(24px, 2.6vw, 32px)/1.12 var(--font-display); letter-spacing: -0.02em; }
html body:not(.x) .auth-tile-text { font-size: 17px; color: var(--muted); }
html body:not(.x) .auth-tile-points { font-size: 15px; }
html body:not(.x) .auth-tile-links a { font-size: 14px; }
/* Homepage hero stats and cities */
html body:not(.x) .hero-trust { gap: 12px; padding-top: 4px; border-top: 0; }
html body:not(.x) .hero-trust > div { background: var(--card); border: 0; border-radius: var(--radius); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body:not(.x) .hero-trust > div:hover { transform: none; }
html body:not(.x) .hero-trust b { font: 600 28px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
html body:not(.x) .hero-trust span { font-size: 14px; color: var(--muted); }
html body:not(.x) .hero-cities { font-size: 14px; color: var(--muted); }
html body:not(.x) .hero-cities a { color: var(--text); font-weight: 500; }

/* ---------- Cards and tiles ---------- */
html body:not(.x) .card, html body:not(.x) .stat, html body:not(.x) .steps li, html body:not(.x) .faq details,
html body:not(.x) .svc-card, html body:not(.x) .marquee li, html body:not(.x) .chips a, html body:not(.x) .chips span,
html body:not(.x) .toc, html body:not(.x) #ritzy-interface .ai-feature, html body:not(.x) .reviews-row li.review {
  background: var(--card); border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body:not(.x) .card, html body:not(.x) .stat, html body:not(.x) .steps li, html body:not(.x) .svc-card { border-radius: var(--radius); }
html body:not(.x) .card { padding: 30px; }
html body:not(.x) .card::before, html body:not(.x) .card::after, html body:not(.x) .stat::before, html body:not(.x) .stat::after,
html body:not(.x) .steps li::after, html body:not(.x) .svc-card::after, html body:not(.x) .hero-trust > div::after { display: none; }
html body:not(.x) a.card, html body:not(.x) .card.lift { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
html body:not(.x) a.card:hover, html body:not(.x) .card.lift:hover { transform: scale(1.015); box-shadow: var(--shadow-lift); border: 0; }
html body:not(.x) .card h3 { font-size: 21px; }
html body:not(.x) .card p { font-size: 17px; line-height: 1.47; color: var(--muted); }
html body:not(.x) .icon {
  width: 44px; height: 44px; margin-bottom: 18px; border: 0; border-radius: 12px;
  background: var(--green-tint); color: var(--green-ink); font-size: 18px;
}
html body:not(.x) .card:hover .icon { transform: none; background: var(--green-tint); color: var(--green-ink); }
html body:not(.x) .cards { gap: 20px; }
/* Stats */
html body:not(.x) .stat { padding: 28px; }
html body:not(.x) .stat:hover { transform: none; }
html body:not(.x) .stat b { font: 600 clamp(32px, 3.6vw, 44px)/1.05 var(--font-display); letter-spacing: -0.025em; color: var(--text); }
html body:not(.x) .stat span { font-size: 15px; color: var(--muted); }
/* Steps: the number in green, no pill */
html body:not(.x) .steps { gap: 20px; }
html body:not(.x) .steps li { padding: 30px; }
html body:not(.x) .steps li:hover { transform: none; }
html body:not(.x) .steps li::before {
  height: auto; padding: 0; margin-bottom: 14px; border-radius: 0;
  background: none; color: var(--green-ink);
  font: 600 15px/1 var(--font-text); letter-spacing: 0.02em;
}
html body:not(.x) .steps p { font-size: 17px; color: var(--muted); }
/* FAQ */
html body:not(.x) .faq { gap: 12px; }
html body:not(.x) .faq details { border-radius: var(--radius); }
html body:not(.x) .faq details[open] { background: var(--card); border: 0; }
html body:not(.x) .faq summary { padding: 22px 26px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
html body:not(.x) .faq summary::after { border: 0; background: none; color: var(--green-ink); font-size: 24px; font-weight: 300; }
html body:not(.x) .faq details[open] summary::after { background: none; color: var(--green-ink); border: 0; }
html body:not(.x) .faq .a { padding: 0 26px 24px; font-size: 17px; color: var(--muted); }
/* Chips and the marquee */
html body:not(.x) .chips a, html body:not(.x) .chips span { padding: 10px 18px; border-radius: 980px; font-size: 15px; font-weight: 500; color: var(--text); }
html body:not(.x) .chips a:hover { background: var(--surface-2); color: var(--text); transform: none; border: 0; }
html body:not(.x) .chips i, html body:not(.x) .marquee li i { color: var(--green-ink); }
html body:not(.x) .marquee li { border-radius: 980px; font-weight: 500; font-size: 15px; }
/* Prose (legal, blog) */
html body:not(.x) .prose { max-width: 760px; }
html body:not(.x) .prose p, html body:not(.x) .prose li { color: var(--text); font-size: 17px; line-height: 1.6; }
html body:not(.x) .prose h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 48px; }
html body:not(.x) .prose h3, html body:not(.x) .legal-prose h2 { font-size: 19px; margin-top: 32px; letter-spacing: -0.01em; }
html body:not(.x) .prose .highlight-box, html body:not(.x) .callout { border: 0; border-radius: var(--radius-sm); background: var(--card); padding: 18px 20px; }
html body:not(.x) .meta { color: var(--muted); font-size: 14px; }
html body:not(.x) .legal-nav { justify-content: flex-start; }
html body:not(.x) .toc { border-radius: var(--radius); }
/* CTA band */
html body:not(.x) .cta-band {
  background: var(--card); border: 0; border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px); box-shadow: none;
}
html body:not(.x) .cta-band p { font-size: 19px; color: var(--muted); }
html body:not(.x) .cta-band .actions { gap: 12px; }

/* ---------- Photos ---------- */
html body:not(.x) .page-media, html body:not(.x) .split .media, html body:not(.x) .carousel-wrapper, html body:not(.x) .map-embed, html body:not(.x) .hero-img {
  border: 0; border-radius: var(--radius-lg); box-shadow: none;
}
html body:not(.x) .split .media-icon { border-radius: 22%; }
html body:not(.x) .split .media:hover img, html body:not(.x) .hero-img:hover img { transform: none; }
html body:not(.x) .home-about-media { background: var(--card); }
html body:not(.x) .home-about-media .float, html body:not(.x) .hero-img .float {
  background: rgba(255, 255, 255, 0.92); color: #1d1d1f; border: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); animation: none; font-weight: 500;
}
html[data-theme="dark"] body .home-about-media .float, html body[data-theme="dark"] .home-about-media .float { background: rgba(44, 44, 46, 0.92); color: #f5f5f7; }
html body:not(.x) .media-wrap .media-copy p { font-size: 19px; color: var(--muted); }

/* ---------- App Store / Google Play badges: black, like the stores' own ---------- */
html body:not(.x) .stores .store, html body:not(.x) .store-badges .store-badge, html body:not(.x) .store-badge {
  background: #000; color: #fff; border: 1px solid #000; border-radius: 12px;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: opacity 0.2s;
}
html body:not(.x) .stores .store:hover, html body:not(.x) .store-badges .store-badge:hover, html body:not(.x) .store-badge:hover { background: #000; color: #fff; border-color: #000; opacity: 0.8; transform: none; box-shadow: none; }
html[data-theme="dark"] body .stores .store, html[data-theme="dark"] body .store-badge,
html body[data-theme="dark"] .stores .store, html body[data-theme="dark"] .store-badge { border-color: rgba(255, 255, 255, 0.35); }
html body:not(.x) .store-badge .sb-label, html body:not(.x) .store small { opacity: 0.85; letter-spacing: 0; text-transform: none; }

/* ---------- Footer ---------- */
html body:not(.x) .sf {
  margin-top: 0; background: var(--bg-2); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 12px; color: var(--muted);
}
html body:not(.x) .sf::before { display: none; }
html body:not(.x) .sf-main { padding: 44px 0 28px; gap: 28px; }
html body:not(.x) .sf-brand img { height: 32px; margin-bottom: 12px; }
html body:not(.x) .sf-brand p { font-size: 13px; line-height: 1.5; color: var(--muted); }
html body:not(.x) .sf-col h3 { font: 600 13px/1.3 var(--font-text); letter-spacing: -0.01em; text-transform: none; color: var(--text); margin-bottom: 10px; }
html body:not(.x) .sf-col a { font-size: 13px; padding: 5px 0; color: var(--footer-link); }
html body:not(.x) .sf-col a:hover, html body:not(.x) .sf-col a[aria-current="page"] { color: var(--text); text-decoration: underline; transform: none; }
html body:not(.x) .sf-social a { width: 34px; height: 34px; border: 0; background: var(--card); color: var(--text); }
html body:not(.x) .sf-social a:hover { background: var(--surface-2); color: var(--text); transform: none; }
html body:not(.x) .sf-contact { font-size: 12px; border-top-color: var(--line); }
html body:not(.x) .sf-contact span, html body:not(.x) .sf-contact a { color: var(--muted); }
html body:not(.x) .sf-contact a:hover { color: var(--text); }
html body:not(.x) .sf-contact i { color: var(--muted); }
html body:not(.x) .sf-bottom { font-size: 12px; color: var(--muted); border-top-color: var(--line); }
html body:not(.x) .sf-bottom a, html body:not(.x) .ft-legal button, html body:not(.x) .ft-legal a { font-size: 12px; color: var(--footer-link); font-weight: 400; }
html body:not(.x) .sf-bottom a:hover, html body:not(.x) .ft-legal button:hover, html body:not(.x) .ft-legal a:hover { color: var(--text); text-decoration: underline; }
html body:not(.x) .footer-account { border-top-color: var(--line); }
html body:not(.x) .footer-auth { border: 0; background: var(--card); color: var(--text); font: 500 13px/1 var(--font-text); min-height: 34px; }
html body:not(.x) .footer-auth:hover { background: var(--surface-2); color: var(--text); }
html body:not(.x) .theme-switch { border: 0; background: var(--card); color: var(--text); font: 500 12px/1 var(--font-text); min-height: 32px; }
html body:not(.x) .theme-switch:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Small pieces ---------- */
html body:not(.x) .to-top { background: var(--glass-bg); border: 0; box-shadow: var(--shadow-sm); color: var(--text); }
html body:not(.x) .to-top:hover { color: var(--green-ink); }
html body:not(.x) .progress { height: 2px; background: var(--accent); }
html body:not(.x) .live-tag { border: 0; background: var(--green-tint); color: var(--green-ink); font-weight: 600; }
html body:not(.x) .contact-list a { color: var(--text); font-weight: 500; }
html body:not(.x) .founder-photo { border: 0; background: var(--green-tint); }
html body:not(.x) .founder-msg p { font-size: 17px; color: var(--text); }
html body:not(.x) .founder-name b { font: 600 19px/1.3 var(--font-display); letter-spacing: -0.015em; }
html body:not(.x) .founder-name span { font-weight: 500; }

/* ---------- Homepage ---------- */
html body:not(.x) .home-hero-book { top: calc(var(--header-h) + 24px); }
/* Service picks */
html body:not(.x) .svc-heading { font: 600 21px/1.2 var(--font-display); letter-spacing: -0.015em; text-transform: none; color: var(--text); margin-bottom: 18px; }
html body:not(.x) .svc-card { border: 0; }
html body:not(.x) .svc-card:hover { transform: scale(1.02); box-shadow: var(--shadow-lift); border: 0; }
html body:not(.x) .svc-go { padding: 22px 22px 20px; }
html body:not(.x) .svc-icon { border: 0; background: var(--green-tint); color: var(--green-ink); }
html body:not(.x) .svc-card:hover .svc-icon { transform: none; background: var(--green-tint); color: var(--green-ink); }
html body:not(.x) .svc-name { font: 600 19px/1.2 var(--font-display); letter-spacing: -0.015em; }
html body:not(.x) .svc-go-hint { font-size: 14px; font-weight: 500; color: var(--green-ink); text-transform: none; letter-spacing: 0; }
html body:not(.x) .svc-info { border: 0; background: var(--bg); color: var(--muted); }
html body:not(.x) .svc-tip { border: 0; border-radius: 14px; background: var(--menu-bg); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14); color: var(--muted); }
/* Promo slider dots */
html body:not(.x) .carousel-dots button::before { background: var(--muted); opacity: 0.35; }
html body:not(.x) .carousel-dots button[aria-current="true"]::before { width: 8px; background: var(--text); opacity: 0.85; }
/* App showcase */
html body:not(.x) #ritzy-interface { background: var(--bg); }
html body:not(.x) #ritzy-interface .ai-feature { border-radius: var(--radius); }
html body:not(.x) #ritzy-interface .ai-feature[aria-selected="true"] { background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); }
html body:not(.x) #ritzy-interface .ai-feature-icon { background: var(--green-tint); color: var(--green-ink); }
html body:not(.x) #ritzy-interface .ai-feature[aria-selected="true"] .ai-feature-icon { background: var(--accent); color: #fff; }
html body:not(.x) #ritzy-interface .ai-feature-text b, html body:not(.x) #ritzy-interface .ai-feature-text strong { font-weight: 600; }
/* Why Ritzy */
html body:not(.x) .bento { gap: 20px; }
html body:not(.x) .bento-stat b { font: 600 34px/1 var(--font-display); letter-spacing: -0.025em; color: var(--text); }
/* Reviews */
html body:not(.x) .reviews-row li.review { border-radius: var(--radius); }
html body:not(.x) .review p { font-weight: 400; font-size: 15px; }

/* ---------- Booking card and sign-in form ---------- */
html body:not(.x) .booking-embed, html[data-theme="light"] body .booking-embed, html body[data-theme="light"] .booking-embed {
  --bk-bg: #f5f5f7;
  --bk-card: #ffffff;
  --bk-card-2: #fafafc;
  --bk-line: rgba(0, 0, 0, 0.08);
  --bk-outline: rgba(0, 0, 0, 0.14);
  --bk-text: #1d1d1f;
  --bk-muted: #6e6e73;
  --bk-green-tint: rgba(76, 187, 23, 0.12);
  background: var(--bk-bg); border: 0; border-radius: var(--radius-lg);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="dark"] body .booking-embed, html body[data-theme="dark"] .booking-embed {
  --bk-bg: #1c1c1e;
  --bk-card: #2c2c2e;
  --bk-card-2: #242426;
  --bk-line: rgba(255, 255, 255, 0.1);
  --bk-outline: rgba(255, 255, 255, 0.18);
  --bk-text: #f5f5f7;
  --bk-muted: #a1a1a6;
  --bk-green-tint: rgba(76, 187, 23, 0.18);
  background: var(--bk-bg); border: 0; box-shadow: none;
}
html body:not(.x) .booking-embed .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; text-transform: none; letter-spacing: -0.01em; }
html body:not(.x) .booking-embed .btn-primary::after { display: none; }
html body:not(.x) .booking-embed .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: none; transform: none; }

/* ---------- Chat ---------- */
html body:not(.x) .rzb-help-pill {
  background: var(--glass-bg); color: var(--text); border: 0;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); font-weight: 500;
}
html body:not(.x) .rzb-help-pill b { color: var(--green-ink); font-weight: 600; }
html body:not(.x) .rzb-help-pill:hover { border: 0; }
html body:not(.x) .chatbot-fab, html body:not(.x) .chatbot-fab:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); }
/* The chat widget stays hidden until chat.css (loaded after the page) shows it */
html body:not(.x) #rzb { display: none; }
html body:not(.x) .rzb { --rzb-bg: #ffffff; --rzb-card: #f5f5f7; --rzb-line: rgba(0, 0, 0, 0.08); --rzb-text: #1d1d1f; --rzb-muted: #6e6e73; }
html[data-theme="dark"] body .rzb, html body[data-theme="dark"] .rzb { --rzb-bg: #1c1c1e; --rzb-card: #2c2c2e; --rzb-line: rgba(255, 255, 255, 0.1); --rzb-text: #f5f5f7; --rzb-muted: #a1a1a6; }

/* ---------- Motion: gentle fades only ---------- */
html body:not(.x) .reveal { transform: translateY(16px); }
html body:not(.x) .reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html body:not(.x) .reveal { transform: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  html body:not(.x) h1 { font-size: clamp(36px, 10vw, 48px); }
  html body:not(.x) h2 { font-size: clamp(28px, 8vw, 36px); }
  html body:not(.x) .sec, html body:not(.x) .sec-alt { padding-block: 60px; }
  html body:not(.x) .card, html body:not(.x) .steps li { padding: 24px; }
  html body:not(.x) .card p, html body:not(.x) .steps p, html body:not(.x) .faq .a { font-size: 16px; }
  html body:not(.x) .sec-head p { font-size: 17px; }
  html body:not(.x) .hero-points li { font-size: 16px; }
  html body:not(.x) .hero-trust b { font-size: 22px; }
  html body:not(.x) .hero-trust span { font-size: 12.5px; }
  html body:not(.x) .cta-band { padding: 32px 24px; }
}

/* ---------- "Book a driver" / "Sign in to book": one green pill, signed in or not ---------- */
html body:not(.x) .btn.btn-primary.book-cta, html body:not(.x) .booking-embed .btn-primary.book-cta {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  box-shadow: none; filter: none; animation: none;
}
html body:not(.x) .btn.btn-primary.book-cta:hover, html body:not(.x) .booking-embed .btn-primary.book-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; transform: none; filter: none; }
html body:not(.x) .book-cta .fa-lock { color: #fff; opacity: 0.85; }

/* ---------- Refinements ---------- */
/* Two-column heroes share the width with a card: a slightly smaller headline */
html body:not(.x) .hero-grid:not(.solo) h1, html body:not(.x) .home-hero h1 { font-size: clamp(40px, 5vw, 64px); }
/* Chips under a centred section heading centre too */
html body:not(.x) .sec-head + .chips, html body:not(.x) .sec-head ~ .chips { justify-content: center; }
/* FAQs and long-form text sit in a centred column under centred headings */
html body:not(.x) .faq, html body:not(.x) .prose { margin-inline: auto; }
html body:not(.x) .legal-nav { max-width: 760px; margin-inline: auto; }
/* Phones: two-up step tiles need tighter padding and titles */
@media (max-width: 767px) {
  html body:not(.x) .steps li { padding: 20px 18px; }
  html body:not(.x) .steps h3 { font-size: 17px; }
  html body:not(.x) .steps p { font-size: 15px; }
}
/* Headings inside small UI keep small sizes (the headline scale is for page content) */
html body:not(.x) .rzb h2, html body:not(.x) .rzb h3 { font: 600 17px/1.25 var(--font-text); letter-spacing: -0.01em; margin: 0; }
html body:not(.x) .terms-modal-header h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px; }
html body:not(.x) .terms-modal-body h2, html body:not(.x) .terms-modal-body h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; margin: 22px 0 8px; }
/* Chat: flat surfaces, no gradients; the "connect to an agent" card follows the theme */
html body:not(.x) .rzb-head { background: var(--rzb-bg); }
html body:not(.x) .rzb-avatar, html body:not(.x) .rzb-send, html body:not(.x) .rzb-agentform-submit { background: var(--accent); }
html body:not(.x) .rzb-agentform-card { background: var(--rzb-card); color: var(--rzb-text); border: 0; box-shadow: none; }
html body:not(.x) .rzb-agentform-card h3 { color: var(--rzb-text); }
html body:not(.x) .rzb-agentform-card > p, html body:not(.x) .rzb-agentform-note, html body:not(.x) .rzb-agentform-cancel { color: var(--rzb-muted); }
html body:not(.x) .rzb-agentform-card label { color: var(--rzb-text); }
html body:not(.x) .rzb-agentform-card label span { color: var(--rzb-muted); }
html body:not(.x) .rzb-agentform-card input, html body:not(.x) .rzb-agentform-card textarea { background: var(--rzb-bg); color: var(--rzb-text); border: 1px solid var(--rzb-line); }
html body:not(.x) .rzb-agentform-badge { background: var(--green-tint); color: var(--green-ink); border: 0; }
html body:not(.x) .rzb-agentform-error { color: #d70015; }
html[data-theme="dark"] body .rzb-agentform-error, html body[data-theme="dark"] .rzb-agentform-error { color: #ff6961; }
/* Policy pop-up titles in sentence case */
html body:not(.x) .terms-modal-header h2 { text-transform: none; }
/* Phones: cards stay two-up, scaled to fit their half of the screen */
@media (max-width: 767px) {
  html body:not(.x) .card { padding: 18px; border-radius: 16px; }
  html body:not(.x) .card .icon { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; font-size: 15px; }
  html body:not(.x) .card h3 { font-size: 16px; line-height: 1.25; margin-bottom: 6px; overflow-wrap: anywhere; hyphens: auto; }
  html body:not(.x) .card p { font-size: 14px; line-height: 1.45; }
  html body:not(.x) .card .more { font-size: 15px; margin-top: 10px; }
  html body:not(.x) .stat { padding: 18px; }
  html body:not(.x) .stat b { font-size: 26px; }
  html body:not(.x) .stat span { font-size: 13px; }
}
@media (max-width: 400px) { html body:not(.x) .hero-trust b { font-size: 19px; } }
/* Too narrow for two columns of words like "professionals": one card per row */
@media (max-width: 359px) { html body:not(.x) .cards, html body:not(.x) .cards.c2, html body:not(.x) .cards.c4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phone type scale: compact and calm ---------- */
@media (max-width: 767px) {
  html body:not(.x) { font-size: 15px; line-height: 1.5; }
  html body:not(.x) h1, html body:not(.x) .hero-grid:not(.solo) h1, html body:not(.x) .home-hero h1 { font-size: clamp(28px, 7.6vw, 34px); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 12px; }
  html body:not(.x) h2 { font-size: clamp(24px, 6.4vw, 28px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 10px; }
  html body:not(.x) h3 { font-size: 17px; }
  html body:not(.x) .eyebrow { font-size: 14px; margin-bottom: 8px; }
  html body:not(.x) .hero .lede, html body:not(.x) .lede { font-size: 16px; line-height: 1.45; }
  html body:not(.x) .sec-head { margin-bottom: 28px; }
  html body:not(.x) .sec-head p { font-size: 15px; }
  html body:not(.x) .hero { padding: 28px 0 44px; }
  html body:not(.x) .hero-points { margin-top: 18px; gap: 8px; }
  html body:not(.x) .hero-points li { font-size: 14.5px; }
  html body:not(.x) .hero-ctas { margin-top: 22px; }
  html body:not(.x) .btn { font-size: 15px; }
  html body:not(.x) .sec, html body:not(.x) .sec-alt { padding-block: 52px; }
  html body:not(.x) .card h3, html body:not(.x) .steps h3 { font-size: 16px; }
  html body:not(.x) .card p, html body:not(.x) .steps p { font-size: 14px; }
  html body:not(.x) .faq summary { padding: 18px 20px; font-size: 15.5px; }
  html body:not(.x) .faq .a { padding: 0 20px 18px; font-size: 14.5px; }
  html body:not(.x) .prose p, html body:not(.x) .prose li { font-size: 15.5px; }
  html body:not(.x) .prose h2 { font-size: 22px; margin-top: 36px; }
  html body:not(.x) .prose h3, html body:not(.x) .legal-prose h2 { font-size: 17px; }
  html body:not(.x) .cta-band p, html body:not(.x) .media-wrap .media-copy p { font-size: 15px; }
  html body:not(.x) .stat b { font-size: 24px; }
  html body:not(.x) .hero-trust b { font-size: 20px; }
  html body:not(.x) .hero-trust span { font-size: 12px; }
  html body:not(.x) .auth-tile-title { font-size: 22px; }
  html body:not(.x) .auth-tile-text { font-size: 15px; }
  html body:not(.x) .auth-tile-points { font-size: 14px; }
  html body:not(.x) .svc-heading { font-size: 18px; margin-bottom: 14px; }
  html body:not(.x) .svc-name { font-size: 16px; }
  html body:not(.x) .svc-go-hint { font-size: 13px; }
  html body:not(.x) .bento-stat b { font-size: 26px; }
  html body:not(.x) .review p { font-size: 14px; }
  html body:not(.x) .founder-msg p { font-size: 15px; }
  html body:not(.x) .founder-name b { font-size: 17px; }
  html body:not(.x) .chips a, html body:not(.x) .chips span, html body:not(.x) .marquee li { font-size: 14px; }
}
@media (max-width: 400px) { html body:not(.x) .hero-trust b { font-size: 18px; } }

/* ---------- Booking flow: the Ritzy app's look ----------
   Pill toggles, linked pickup/drop fields on a sheet, grey rounded fields,
   green-outlined selections and the app's green gradient button. The app
   has light and dark themes, so these follow the site's theme tokens. */
html body:not(.x) .booking-embed {
  --app-sheet: #ffffff;
  --app-field: #f2f2f5;
  --app-green: var(--accent);
  --app-cta: linear-gradient(90deg, #3d9c14, #2a5e10);   /* the app's #4cbb17 → #2f6913, deepened so white text reads */
}
html[data-theme="dark"] body .booking-embed, html body[data-theme="dark"] .booking-embed {
  --app-sheet: #232325;
  --app-field: #333336;
  --app-green: #4cbb17;
}
html body:not(.x) .booking-embed .bk-step > *, html body:not(.x) .booking-embed .bk-details > * { min-width: 0; }

/* Pills: trip type, timing, transmission */
html body:not(.x) .booking-embed .bk-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; margin: 6px 0 2px; padding: 0; background: none; border: 0; border-radius: 0; }
html body:not(.x) .booking-embed .bk-ride-desc, html body:not(.x) .booking-embed .bk-tab-desc {
  margin: 4px 2px 6px; padding: 0; background: none; border: 0; text-align: left; font-size: 13px; color: var(--bk-muted);
}
html body:not(.x) .booking-embed .bk-pills > button {
  flex: 0 1 auto; min-height: 44px; padding: 0 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid var(--bk-outline); color: var(--bk-muted);
  font: 500 15px var(--font-text); box-shadow: none; white-space: nowrap;
}
html body:not(.x) .booking-embed .bk-pills > button.on {
  background: var(--bk-green-tint); border-color: var(--app-green); color: var(--bk-text); font-weight: 600;
}
html body:not(.x) .booking-embed .bk-pills > button i { font-size: 13px; }
html body:not(.x) .booking-embed .bk-appbadge, html body:not(.x) .booking-embed .bk-soon { font-size: 11px; letter-spacing: 0.02em; }
html body:not(.x) .booking-embed .bk-area-badge { background: var(--accent); color: #fff; }
html body:not(.x) .booking-embed .bk-pills > button.on i { color: var(--app-green); }
html body:not(.x) .booking-embed #bkTrans.bk-pills > button { flex: 1 1 0; }

/* Pickup and drop: two linked fields on a sheet, dots joined by a dotted line */
html body:not(.x) .booking-embed .bk-route-box {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  margin-top: 8px; padding: 14px 14px 14px 42px; border-radius: 20px; background: var(--app-sheet);
}
html body:not(.x) .booking-embed .bk-route-box::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 44px; border-left: 2px dotted var(--bk-outline);
}
html body:not(.x) .booking-embed #bkPickDropGrid > .bk-field {
  position: relative; margin: 0; padding: 10px 14px 6px; border-radius: 12px; background: var(--app-field);
}
html body:not(.x) .booking-embed .bk-route-box label { margin: 0; font: 500 12.5px var(--font-text); color: var(--bk-muted); letter-spacing: 0; text-transform: none; }
html body:not(.x) .booking-embed .bk-route-box .bk-iw { position: static; min-height: 0; height: auto; padding: 0; background: none; border: 0; box-shadow: none; }
html body:not(.x) .booking-embed .bk-route-box input {
  width: 100%; height: 30px; min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none;
  font: 500 15px var(--font-text); color: var(--bk-text); text-overflow: ellipsis;
}
html body:not(.x) .booking-embed .bk-route-box input:focus { outline: none; }
html body:not(.x) .booking-embed #bkPickDropGrid > .bk-field:focus-within { box-shadow: inset 0 0 0 1px var(--app-green); }
html body:not(.x) .booking-embed .bk-route-box .dot {
  position: absolute; left: -29px; top: 50%; width: 14px; height: 14px; margin: -7px 0 0; border-radius: 50%;
  border: 3px solid var(--app-sheet); box-shadow: 0 0 0 1px var(--bk-line);
}
html body:not(.x) .booking-embed .bk-route-box .dot.pick { background: #4cbb17; }
html body:not(.x) .booking-embed .bk-route-box .dot.drop { background: #e5484d; }

/* Search status ("Not found…", "Outside our pickup area…"): it was pale yellow
   at 9–11px, made for the old dark card and unreadable on the light theme */
html body:not(.x) .booking-embed .bk-geo { margin: 8px 2px 4px; font-size: 13px; line-height: 1.4; color: #a15c00; }
html[data-theme="dark"] body .booking-embed .bk-geo, html body[data-theme="dark"] .booking-embed .bk-geo { color: #ffd479; }
html body:not(.x) .booking-embed .bk-geo:empty { margin: 0; }

/* Confirm location + distance (admin: "Confirm Location  30.695 Km") */
html body:not(.x) .booking-embed .bk-confirm-loc { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
html body:not(.x) .booking-embed .bk-confirm-loc .bk-next { flex: 1 1 auto; margin: 0; }
html body:not(.x) .booking-embed .bk-km { flex: 0 0 auto; min-width: 64px; text-align: right; font: 600 16px var(--font-text); color: var(--bk-text); font-variant-numeric: tabular-nums; }
html body:not(.x) .booking-embed #bkConfirmLocHint { margin-top: 6px; }
html body:not(.x) .booking-embed:has(.bk-details.open) #bkConfirmLocHint { display: none; }

/* Everything after Confirm location */
html body:not(.x) .booking-embed .bk-details { display: none; flex-direction: column; gap: 18px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--bk-line); }
html body:not(.x) .booking-embed .bk-details.open { display: flex; animation: bk-details-in 0.35s ease both; }
@keyframes bk-details-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body:not(.x) .booking-embed .bk-details.open { animation: none; } }
html body:not(.x) .booking-embed .bk-details > .bk-field { margin: 0; }
html body:not(.x) .booking-embed .bk-details > .bk-field > label,
html body:not(.x) .booking-embed .bk-details > .bk-field > .bk-label {
  display: block; margin: 0 0 10px; font: 600 15px var(--font-text); color: var(--bk-text); letter-spacing: -0.01em; text-transform: none;
}
html body:not(.x) .booking-embed .bk-details .bk-optional { font-weight: 400; color: var(--bk-muted); }
html body:not(.x) .booking-embed .bk-details .bk-input {
  background: var(--app-field); border: 1px solid transparent; border-radius: 12px; box-shadow: none; color: var(--bk-text);
}
html body:not(.x) .booking-embed .bk-details input.bk-input { height: 50px; padding: 0 16px; }
html body:not(.x) .booking-embed .bk-details .bk-input:focus { border-color: var(--app-green); outline: none; }

/* Estimated usage: the app's oval chips. The row scrolls sideways; contain
   keeps its full length from widening the card (and the /book grid column). */
html body:not(.x) .booking-embed .bk-hour-chips { contain: inline-size; }
html body:not(.x) .booking-embed #bkHoursField .bk-hour-chip { min-width: 72px; min-height: 42px; border-radius: 999px; font-weight: 500; color: var(--bk-muted); }
html body:not(.x) .booking-embed #bkHoursField .bk-hour-chip[aria-pressed="true"] { border-color: var(--app-green); background: var(--bk-green-tint); color: var(--bk-text); font-weight: 600; }
html body:not(.x) .booking-embed #bkHoursAuto:empty { display: none; }

/* Car type: photo cards */
html body:not(.x) .booking-embed .bk-cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html body:not(.x) .booking-embed .bk-car {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; padding: 12px 8px 10px;
  background: var(--app-field); border: 1px solid transparent; border-radius: 14px; text-align: center;
}
html body:not(.x) .booking-embed .bk-car.on { border-color: var(--app-green); background: var(--bk-green-tint); }
html body:not(.x) .booking-embed .bk-car-img { width: 76px; height: 42px; object-fit: contain; margin-bottom: 6px; }
html body:not(.x) .booking-embed .bk-car-name { font: 600 14px var(--font-text); color: var(--bk-text); }
html body:not(.x) .booking-embed .bk-car-sub { font-size: 12px; line-height: 1.35; color: var(--bk-muted); }

/* Choose driver: icon, name, fare, and the eye for the breakdown */
html body:not(.x) .booking-embed .bk-tiers { display: grid; gap: 10px; }
html body:not(.x) .booking-embed .bk-tier {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 40px; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--app-field); border: 1px solid transparent; cursor: pointer;
}
html body:not(.x) .booking-embed .bk-tier.on { border-color: var(--app-green); background: var(--bk-green-tint); }
html body:not(.x) .booking-embed .bk-tier.soon { grid-template-columns: 44px minmax(0, 1fr); cursor: default; opacity: 0.6; }
html body:not(.x) .booking-embed .bk-tier .ti {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bk-green-tint); color: var(--app-green); font-size: 18px; margin: 0;
}
html body:not(.x) .booking-embed .bk-tier .tn { font: 600 15px var(--font-text); color: var(--bk-text); }
html body:not(.x) .booking-embed .bk-tier .td { font-size: 12.5px; color: var(--bk-muted); margin: 2px 0 0; }
html body:not(.x) .booking-embed .bk-tier .tf { text-align: right; }
html body:not(.x) .booking-embed .bk-tier .tf .amt { font: 700 17px var(--font-text); color: var(--bk-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body:not(.x) .booking-embed .bk-tier .tf .pk { font-size: 11.5px; color: var(--bk-muted); }
html body:not(.x) .booking-embed .bk-fare-eye {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 0; background: transparent; color: var(--app-green); font-size: 17px; cursor: pointer;
}
html body:not(.x) .booking-embed .bk-fare-eye:hover, html body:not(.x) .booking-embed .bk-fare-eye:focus-visible { background: var(--bk-green-tint); }

/* The app's green gradient pill for every main action */
html body:not(.x) .booking-embed .bk-step .btn-primary.bk-next {
  width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--app-cta); color: #fff;
  font: 600 17px var(--font-text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
html body:not(.x) .booking-embed .bk-step .btn-primary.bk-next:hover { background: var(--app-cta); filter: brightness(1.06); }
html body:not(.x) .booking-embed .bk-step .btn-primary.bk-next:disabled { opacity: 0.45; filter: none; cursor: not-allowed; }
html body:not(.x) .booking-embed .bk-book { margin-top: 4px; }
html body:not(.x) .booking-embed #bkBookError:not(.show) { display: none; }

/* Store badges inside the card (app-only panels, after booking). Their layout
   only existed in the homepage's inline styles, so on /book they fell apart. */
html body:not(.x) .booking-embed .store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
html body:not(.x) .booking-embed .store-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; text-decoration: none; }
html body:not(.x) .booking-embed .store-badge i { font-size: 24px; }
html body:not(.x) .booking-embed .store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
html body:not(.x) .booking-embed .store-badge .sb-label { font-size: 11px; }
html body:not(.x) .booking-embed .store-badge .sb-store { font: 600 16px var(--font-display); }

/* After booking: confirmation and the hand-over to the app */
html body:not(.x) .booking-embed .bk-handoff .bk-track { margin-top: 14px; }
html body:not(.x) .booking-embed .bk-handoff-redirect { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--bk-muted); }
html body:not(.x) .booking-embed .bk-handoff-redirect b { color: var(--bk-text); font-variant-numeric: tabular-nums; }

/* Fare breakdown pop-up (the app's fare sheet) */
html body:not(.x) .bk-fare-pop:not([hidden]) {
  position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.5); animation: bk-fade 0.2s ease both;
}
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
html body:not(.x) .bk-fare-card {
  position: relative; width: min(400px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: 28px 24px 22px; border-radius: 22px; background: var(--bk-card); color: var(--bk-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
html body:not(.x) .bk-fare-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--app-field); color: var(--bk-text); font-size: 22px; line-height: 1; cursor: pointer;
}
html body:not(.x) .bk-fare-head { display: grid; justify-items: center; gap: 2px; margin-bottom: 18px; text-align: center; }
html body:not(.x) .bk-fare-ico {
  width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%;
  background: var(--bk-green-tint); color: var(--app-green); font-size: 24px;
}
html body:not(.x) .bk-fare-head b { font: 600 19px var(--font-display); }
html body:not(.x) .bk-fare-head small { font-size: 14px; color: var(--bk-muted); }
html body:not(.x) .bk-fare-lines { list-style: none; margin: 0; padding: 0; }
html body:not(.x) .bk-fare-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 15px; }
html body:not(.x) .bk-fare-lines b, html body:not(.x) .bk-fare-total b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body:not(.x) .bk-fare-total {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--bk-line); font: 600 16px var(--font-text);
}
html body:not(.x) .bk-fare-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bk-muted); }

@media (max-width: 480px) {
  html body:not(.x) .booking-embed .bk-pills > button { padding: 0 14px; font-size: 14px; }
  html body:not(.x) .booking-embed .bk-car-img { width: 64px; height: 36px; }
  html body:not(.x) .booking-embed .bk-car-sub { display: none; }
  html body:not(.x) .booking-embed .bk-tier { grid-template-columns: 40px minmax(0, 1fr) auto 36px; gap: 10px; padding: 12px 8px 12px 12px; }
  html body:not(.x) .booking-embed .bk-tier .ti { width: 40px; height: 40px; font-size: 16px; }
  html body:not(.x) .booking-embed .bk-tier .td { display: none; }
}

/* ---------- Booking map: frame and controls, in the site's theme ----------
   The map follows light/dark (booking.js restyles the map itself); the frame
   keeps the corner brackets and a slow scan line, coloured per theme. */
html body:not(.x) .booking-embed .bk-map-wrap {
  --mw-bg: #eef1ee; --mw-accent: #288210; --mw-scan: rgba(40, 130, 16, 0.06);
  --mw-hud-bg: rgba(255, 255, 255, 0.9); --mw-hud-line: rgba(0, 0, 0, 0.08);
  --mw-hud-text: #1d1d1f; --mw-hud-muted: #6e6e73; --mw-pick: #288210;
  --mw-on-bg: rgba(40, 130, 16, 0.1); --mw-on-line: rgba(40, 130, 16, 0.45);
  --mw-label: #1f3d14; --mw-label-halo: rgba(255, 255, 255, 0.95);
  --mw-shadow: 0 0 0 1px rgba(40, 130, 16, 0.18), 0 16px 34px -22px rgba(40, 130, 16, 0.45), 0 2px 8px rgba(0, 0, 0, 0.06);
  --mw-vignette: rgba(0, 0, 0, 0.06);
  position: relative; margin: 12px 0 4px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: var(--mw-bg); box-shadow: var(--mw-shadow);
}
html[data-theme="dark"] body .booking-embed .bk-map-wrap, html body[data-theme="dark"] .booking-embed .bk-map-wrap {
  --mw-bg: #0b1118; --mw-accent: #7cff4f; --mw-scan: rgba(124, 255, 79, 0.07);
  --mw-hud-bg: rgba(9, 14, 20, 0.72); --mw-hud-line: rgba(124, 255, 79, 0.2);
  --mw-hud-text: #cfdbe6; --mw-hud-muted: #9fb0c0; --mw-pick: #7cff4f;
  --mw-on-bg: rgba(124, 255, 79, 0.1); --mw-on-line: rgba(124, 255, 79, 0.55);
  --mw-label: #dcf7cc; --mw-label-halo: rgba(0, 0, 0, 0.9);
  --mw-shadow: 0 0 0 1px rgba(124, 255, 79, 0.22), 0 18px 40px -20px rgba(76, 187, 23, 0.55), 0 2px 10px rgba(0, 0, 0, 0.25);
  --mw-vignette: rgba(0, 0, 0, 0.45);
}
html body:not(.x) .booking-embed #bkMap {
  height: clamp(260px, 52vw, 340px); width: 100%; margin: 0; border: 0; border-radius: 0; background: var(--mw-bg); z-index: 0;
}
/* Corner brackets */
html body:not(.x) .booking-embed .bk-map-wrap::after {
  content: ""; position: absolute; inset: 9px; z-index: 2; pointer-events: none; opacity: 0.7;
  background:
    linear-gradient(var(--mw-accent), var(--mw-accent)) left top / 18px 2px no-repeat,
    linear-gradient(var(--mw-accent), var(--mw-accent)) left top / 2px 18px no-repeat,
    linear-gradient(var(--mw-accent), var(--mw-accent)) right top / 18px 2px no-repeat,
    linear-gradient(var(--mw-accent), var(--mw-accent)) right top / 2px 18px no-repeat,
    linear-gradient(var(--mw-accent), var(--mw-accent)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--mw-accent), var(--mw-accent)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--mw-accent), var(--mw-accent)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--mw-accent), var(--mw-accent)) right bottom / 2px 18px no-repeat;
}
/* Slow scan line and a soft vignette */
html body:not(.x) .booking-embed .bk-map-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, var(--mw-scan) 50%, transparent 100%) 0 -120% / 100% 40% no-repeat,
    radial-gradient(120% 90% at 50% 50%, transparent 60%, var(--mw-vignette) 100%);
  animation: bk-scan 7s linear infinite;
}
@keyframes bk-scan { to { background-position: 0 260%, 0 0; } }

/* Glass controls over the map */
html body:not(.x) .booking-embed .bk-map-legend,
html body:not(.x) .booking-embed .bk-map-regions {
  position: absolute; top: 14px; z-index: 3; display: flex; gap: 6px; padding: 4px;
  border-radius: 999px; background: var(--mw-hud-bg); border: 1px solid var(--mw-hud-line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body:not(.x) .booking-embed .bk-map-legend { left: 14px; padding: 6px 12px; gap: 12px; font: 600 12px var(--font-text); color: var(--mw-hud-text); pointer-events: none; }
html body:not(.x) .booking-embed .bk-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
html body:not(.x) .booking-embed .bk-map-legend .lg-pick::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--mw-pick); }
html body:not(.x) .booking-embed .bk-map-legend .lg-drop::before { content: ""; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e5484d; }
html body:not(.x) .booking-embed .bk-map-regions { right: 14px; }
html body:not(.x) .booking-embed .bk-map-regions button {
  min-height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: transparent;
  color: var(--mw-hud-muted); font: 600 12px var(--font-text); letter-spacing: 0.01em; cursor: pointer;
}
html body:not(.x) .booking-embed .bk-map-regions button.on { color: var(--mw-pick); border-color: var(--mw-on-line); background: var(--mw-on-bg); }
html body:not(.x) .booking-embed .bk-map-regions button:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 1px; }

/* City names on the outlines (zoomed out) */
html body:not(.x) .booking-embed .bk-map-label {
  letter-spacing: 0.14em; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px var(--mw-label-halo), 0 0 6px var(--mw-label-halo);
}
html body:not(.x) .booking-embed .leaflet-marker-icon.bk-map-label { background: none; border: 0; }
html body:not(.x) .booking-embed .leaflet-marker-icon.bk-map-label span {
  display: block; transform: translate(-50%, -50%); font: 700 11px var(--font-text); text-transform: uppercase; color: var(--mw-label);
}

/* Google's own zoom buttons: dark on the dark map, Google's default on the light one */
html[data-theme="dark"] body .booking-embed .bk-map-wrap .gm-bundled-control .gmnoprint > div,
html[data-theme="dark"] body .booking-embed .bk-map-wrap .gm-control-active { background-color: rgba(9, 14, 20, 0.85) !important; }
html[data-theme="dark"] body .booking-embed .bk-map-wrap .gm-control-active img { filter: invert(1) brightness(1.4); }
html body:not(.x) .booking-embed .bk-map-wrap .gm-style-cc { opacity: 0.75; }

/* OpenStreetMap fallback: tiles darkened only in dark mode; outlines and route per theme */
html body:not(.x) .booking-embed .bk-map-dark.leaflet-container { background: var(--mw-bg); }
html body:not(.x) .booking-embed .bk-map-dark .leaflet-tile-pane { filter: saturate(0.55) brightness(1.02); }
html[data-theme="dark"] body .booking-embed .bk-map-dark .leaflet-tile-pane { filter: invert(100%) hue-rotate(190deg) brightness(0.8) contrast(1.15) saturate(0.5); }
html[data-theme="dark"] body .booking-embed .bk-map-dark .bk-area-line { filter: drop-shadow(0 0 3px rgba(124, 255, 79, 0.85)); }
html body:not(.x) .booking-embed .bk-map-dark .bk-route-flow { animation: bk-flow 1s linear infinite; }
@keyframes bk-flow { to { stroke-dashoffset: -24; } }
html body:not(.x) .booking-embed .bk-map-dark .bk-pin { background: none; border: 0; }
html[data-theme="dark"] body .booking-embed .bk-map-dark .leaflet-bar a { background: rgba(9, 14, 20, 0.85); color: #cfdbe6; border-color: rgba(124, 255, 79, 0.2); }
html[data-theme="dark"] body .booking-embed .bk-map-dark .leaflet-control-attribution { background: rgba(9, 14, 20, 0.7); color: #8597a8; }
html[data-theme="dark"] body .booking-embed .bk-map-dark .leaflet-control-attribution a { color: #b7c4d1; }

@media (prefers-reduced-motion: reduce) {
  html body:not(.x) .booking-embed .bk-map-wrap::before { animation: none; background: radial-gradient(120% 90% at 50% 50%, transparent 60%, var(--mw-vignette) 100%); }
  html body:not(.x) .booking-embed .bk-map-dark .bk-route-flow { animation: none; }
}
@media (max-width: 420px) {
  /* under the region switch — the bottom corners belong to Google's logo and terms */
  html body:not(.x) .booking-embed .bk-map-legend { top: 54px; left: 12px; padding: 4px 10px; }
  html body:not(.x) .booking-embed .bk-map-regions { top: 12px; right: 12px; left: 12px; justify-content: center; }
  html body:not(.x) .booking-embed .bk-map-regions button { flex: 1 1 0; }
}

/* ---------- Phone menu: account row and "Book a driver" centred ---------- */
/* The full name shows (it was cut at 140px), and the button no longer picks up
   the menu rows' edge-to-edge spacing, which pushed its label to the left. */
html body:not(.x) .sh-drawer .mobile-account:not([hidden]),
html body:not(.x) .sh-drawer .mobile-authpair:not([hidden]) {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 12px; width: 100%; text-align: center;
}
html body:not(.x) .sh-drawer .nav-account-name { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
html body:not(.x) .sh-drawer .btn.book-cta { justify-content: center; gap: 8px; padding: 0 24px; min-height: 52px; }
html body:not(.x) .sh-drawer .btn.book-cta > span { justify-content: center; }
/* With the menu open, the chat button, its "Need help?" pill and back-to-top
   sat on top of the account row; the menu has the screen to itself. */
html body:has(#drawer.open) .chatbot-fab,
html body:has(#drawer.open) .rzb-help-pill,
html body:has(#drawer.open) .to-top { display: none !important; }

/* ---------- Hero carousel (homepage and content pages) ----------
   Slide 1 is the page's hero (heading to app buttons); the photo slides
   follow. Every slide is as tall as the hero slide, so the carousel keeps one
   height as it moves. Each poster fills its slide edge to edge, never
   stretched, letterboxed or blurred at the sides: assets/site.js gives a slide
   up to 1.65 times as wide as tall the square poster and a wider one the wide
   poster. Measured on the three posters, those crops keep every face and the
   whole headline box in frame. A short hero would make the slides strips no
   poster can fill, so the hero slide is at least 1/2.9 as tall as it is wide
   (2.86:1 is the wide poster's shape; the homepage never reaches it). */
html body:not(.x) .hero-carousel { position: relative; width: 100%; min-width: 0; margin: 0; container-type: inline-size; }
html body:not(.x) .hc-track {
  display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
html body:not(.x) .hc-track::-webkit-scrollbar { display: none; }
html body:not(.x) .hc-slide { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
html body:not(.x) .hc-text { padding: 2px 2px 4px; min-height: calc(100cqw / 2.9); }
/* The image slides take no size of their own (size container): the hero
   slide sets the height, the track the width */
html body:not(.x) .hc-image {
  position: relative; overflow: hidden; container: hcimg / size; isolation: isolate;
  border-radius: 22px; background: #111; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.55);
}
/* Until its file is set (after load), an image slide shows the dark slide, not alt text */
html body:not(.x) .hc-image img:not([srcset]) { visibility: hidden; }
html body:not(.x) .hc-fill { position: absolute; inset: -32px; z-index: -1; background: center / cover no-repeat; filter: blur(24px) saturate(1.15) brightness(0.75); }
/* Square poster: the faces start 25-33% down, the headline box ends 83% down */
html body:not(.x) .hc-image img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
}
/* Wide poster: the people and the headline box sit in its middle 24-80% */
html body:not(.x) .hc-image.is-wide img { object-position: 52% 50%; }
/* Narrow phones with a long hero: a slide much taller than wide would cut
   the headline box's sides off (it spans 10-90% across), so the poster is a
   4:5 card in the middle of the slide instead (assets/site.js: is-tall) */
html body:not(.x) .hc-image.is-tall { background: none; box-shadow: none; overflow: visible; }
html body:not(.x) .hc-image.is-tall .hc-fill { display: none; }
html body:not(.x) .hc-image.is-tall img {
  inset: 50% 0 auto; height: auto; aspect-ratio: 4 / 5; transform: translateY(-50%);
  border-radius: inherit; background: #111; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.55);
}
html body:not(.x) .hc-dots { display: flex; justify-content: center; gap: 2px; margin: 14px 0 0; }
/* 24px tap targets around small dots; the current one stretches */
html body:not(.x) .hc-dots button { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
html body:not(.x) .hc-dots button::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 999px; transform: translate(-50%, -50%);
  background: var(--line-2, rgba(0, 0, 0, 0.2)); transition: width 0.25s ease, background 0.25s ease;
}
html body:not(.x) .hc-dots button.on::before { width: 22px; background: var(--accent); }
html body:not(.x) .hc-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 999px; }
html[data-theme="dark"] body .hc-dots button::before, html body[data-theme="dark"] .hc-dots button::before { background: rgba(255, 255, 255, 0.28); }
html[data-theme="dark"] body .hc-dots button.on::before, html body[data-theme="dark"] .hc-dots button.on::before { background: #4cbb17; }
@media (max-width: 767px) { html body:not(.x) .hc-image { border-radius: 20px; } }

/* ---------- Booking: trip and timing pills fill the row ---------- */
html body:not(.x) .booking-embed #bkTabs.bk-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body:not(.x) .booking-embed #bkRideTabs.bk-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body:not(.x) .booking-embed #bkTabs.bk-pills > button,
html body:not(.x) .booking-embed #bkRideTabs.bk-pills > button { width: 100%; min-width: 0; padding: 0 10px; gap: 6px; }
@media (max-width: 480px) {
  html body:not(.x) .booking-embed #bkTabs.bk-pills > button { flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 4px; font-size: 13.5px; line-height: 1.15; }
}

/* Pages with a hero carousel: the chat button, its pill and teaser wait until it
   has scrolled past (they covered the slides); an open chat stays put. */
html body .chatbot-fab, html body .rzb-help-pill, html body .rzb-teaser { transition: opacity 0.3s ease, visibility 0.3s ease; }
html.hero-carousel-in-view body .chatbot-fab[aria-expanded="false"],
html.hero-carousel-in-view body .rzb-help-pill,
html.hero-carousel-in-view body .rzb-teaser { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Home, desktop: the account tile sits mid-height beside the carousel, and the
   hero and "Our Services" share one normal gap (it was ~430px under the tile) */
@media (min-width: 1024px) {
  html body:not(.x) .home-hero-grid { align-items: center; }
  html body:not(.x) section.home-hero { padding-bottom: 48px; }
  html body:not(.x) section.home-services { padding-top: 56px; }
}

/* Blog author bio */
html body:not(.x) .author-box { display: flex; gap: 16px; align-items: flex-start; margin-top: 44px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
html body:not(.x) .author-box img { flex: none; width: 64px; height: 64px; border-radius: 14px; }
html body:not(.x) .author-box p { margin: 0; font-size: 15px; }
html body:not(.x) .author-box .author-name { color: var(--text); font-weight: 600; margin-bottom: 4px; }

/* Home: sections below the first screen skip style, layout and paint until
   they come near the viewport (the page is long and the glass tiles are
   costly). Not the services row: its tips are position: fixed on phones,
   which containment would pin to the section. */
html body:not(.x) main#main > .home-hero ~ section:not(.home-services),
html body:not(.x) main#main > .home-hero ~ .marquee,
html body:not(.x) main#main:has(> .home-hero) ~ footer.ft { content-visibility: auto; contain-intrinsic-size: auto 700px; }