/**
 * Public marketing: homepage (/landing) + About (/about).
 * Loaded via extra_head after global CSS.
 *
 * RENTER / DISCOVER MARKETING (body.marketing-landing-body | marketing-about-body)
 * ---------------------------------------------------------------------------
 * Atmosphere: cool teal mist paper, brand-teal kickers, renter CTAs (aligned with Discover).
 * Audience: book nearby parking/storage.
 * Do NOT apply host-operator warm stone/amber paper here.
 * Renter CTAs use product brand teal (#0f5a56); host chapter stays ink + amber / indigo CTA.
 *
 * HOST MARKETING (separate file: css/host/host-landing.css)
 * ---------------------------------------------------------------------------
 * body.host-landing-body only: warm stone paper, amber accents, indigo
 * conversion CTAs on an operator canvas — not lavender mist, not product teal.
 *
 * On About, the “For hosts” chapter and fork door use ink + amber signals so
 * the host path is visually distinct before /host (operator landing).
 */

html:not(.dark):has(body.marketing-landing-body) {
  background: linear-gradient(
    125deg,
    #f8fafc 0%,
    #f0fdfa 18%,
    #ecfdf5 36%,
    #f0fdfa 54%,
    #f0fdfa 72%,
    #f1f5f9 100%
  ) !important;
  background-size: 220% 220%;
  min-height: 100%;
}

html:not(.dark) body.marketing-landing-body {
  background: linear-gradient(
    125deg,
    #f8fafc 0%,
    #f0fdfa 18%,
    #ecfdf5 36%,
    #f0fdfa 54%,
    #f0fdfa 72%,
    #f1f5f9 100%
  ) !important;
  background-size: 220% 220%;
}

html:not(.dark) body.marketing-landing-body main,
html:not(.dark) body.marketing-landing-body main > div {
  background: transparent !important;
}

html:not(.dark) body.marketing-landing-body nav.swiftspot-main-nav {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.marketing-landing-body nav[data-spots-count].swiftspot-main-nav .nav-link,
body.marketing-landing-body nav[data-spots-count].swiftspot-main-nav button.nav-link {
  min-height: 2.62rem;
  padding: 0.62rem 1.08rem;
  border-radius: 999px;
  font-size: 0.97rem !important;
  font-weight: 700;
  line-height: 1.25;
}

body.marketing-landing-body nav[data-spots-count].swiftspot-main-nav .btn-primary {
  min-height: 2.74rem;
  padding: 0.66rem 1.32rem;
  border-radius: 999px;
  font-size: 0.96rem !important;
  font-weight: 700;
  box-shadow: 0 8px 18px -14px rgba(15, 90, 86, 0.75);
}

@media (min-width: 768px) {
  body.marketing-landing-body nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__actions {
    margin-right: 0.4rem !important;
  }

  body.marketing-landing-body nav[data-spots-count].swiftspot-main-nav .swiftspot-main-nav__logo {
    padding: 0.42rem 0.55rem;
  }

  body.marketing-landing-body nav[data-spots-count].swiftspot-main-nav {
    --swiftspot-main-nav-logo-height: 2rem;
  }
}

html.dark:has(body.marketing-landing-body) {
  background-color: #0f172a !important;
  min-height: 100%;
}

html.dark body.marketing-landing-body {
  background: #0f172a !important;
}

html.dark body.marketing-landing-body main,
html.dark body.marketing-landing-body main > div {
  background: transparent !important;
}

html:not(.dark) .marketing-landing-hero {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(240, 253, 250, 0.82) 48%,
    rgba(236, 253, 245, 0.88) 100%
  ) !important;
  border-bottom: 1px solid rgba(15, 90, 86, 0.14) !important;
}

html.dark .marketing-landing-hero {
  background: linear-gradient(
    135deg,
    rgb(15 23 42 / 0.98),
    rgb(30 27 75 / 0.45),
    rgb(15 23 42 / 0.99)
  ) !important;
  border-bottom-color: rgba(20, 128, 122, 0.22) !important;
}

html:not(.dark) .marketing-landing-places,
html:not(.dark) .marketing-landing-works,
html:not(.dark) .marketing-landing-trust,
html:not(.dark) .marketing-landing-app-cta,
html:not(.dark) .marketing-landing-host-mention {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 245, 249, 0.88)) !important;
  border-color: rgba(15, 90, 86, 0.08) !important;
}

html.dark .marketing-landing-places,
html.dark .marketing-landing-works,
html.dark .marketing-landing-trust,
html.dark .marketing-landing-app-cta,
html.dark .marketing-landing-host-mention {
  background: linear-gradient(180deg, rgb(15 23 42), rgb(15 23 42 / 0.99)) !important;
}

html:not(.dark) .marketing-landing-bg-orbs .rounded-full {
  opacity: 0.45;
}

html.dark .marketing-landing-bg-orbs .rounded-full {
  opacity: 0.18;
}

/*
  Ambient motion (perf-tuned):
  - compositor-only transforms/opacity
  - soft glow via large radial gradients (no filter:blur)
  - limited to page orbs + hero/alt section washes + CTA highlight
  - paused while scrolling (html.marketing-is-scrolling)
*/
@keyframes marketing-orb-drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.5%, -1rem, 0) scale(1.05);
  }
}

@keyframes marketing-orb-drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-3%, 0.85rem, 0) scale(1.06);
  }
}

@keyframes marketing-container-wash-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.7;
  }
  50% {
    transform: translate3d(6%, -5%, 0);
    opacity: 1;
  }
}

@keyframes marketing-container-wash-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.55;
  }
  50% {
    transform: translate3d(-7%, 6%, 0);
    opacity: 0.85;
  }
}

@keyframes marketing-cta-glow-drift {
  0%,
  100% {
    transform: translate3d(-4%, -2%, 0);
    opacity: 0.55;
  }
  50% {
    transform: translate3d(6%, 4%, 0);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(body.marketing-landing-body, body.marketing-about-body) .marketing-landing-bg-orbs {
    contain: layout paint;
    transform: translateZ(0);
  }

  :is(body.marketing-landing-body, body.marketing-about-body) .marketing-landing-bg-orbs > div:nth-child(1) {
    animation: marketing-orb-drift-a 28s ease-in-out infinite;
  }

  :is(body.marketing-landing-body, body.marketing-about-body) .marketing-landing-bg-orbs > div:nth-child(2) {
    animation: marketing-orb-drift-b 34s ease-in-out infinite;
  }

  /* Third orb stays static for atmosphere without another continuous compositor job */
  :is(body.marketing-landing-body, body.marketing-about-body) .marketing-landing-bg-orbs > div:nth-child(3) {
    opacity: 0.7;
  }

  /*
   * Do not use contain:paint here — it clips child transforms (hero float /
   * scroll reveals) the same way overflow:hidden does, and kills the levitate
   * effect especially on stacked phone heroes where the float needs headroom.
   */
  .marketing-about-hero,
  .marketing-about-section-alt,
  .marketing-about-final-cta {
    isolation: isolate;
    contain: layout style;
  }

  .marketing-about-hero::before,
  .marketing-about-section-alt::before {
    content: "";
    position: absolute;
    width: min(26rem, 65%);
    height: min(26rem, 85%);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      circle at 35% 35%,
      rgba(45, 212, 191, 0.32),
      rgba(94, 234, 212, 0.12) 42%,
      transparent 68%
    );
    animation: marketing-container-wash-a 22s ease-in-out infinite;
  }

  .marketing-about-hero::after,
  .marketing-about-section-alt::after {
    content: "";
    position: absolute;
    width: min(20rem, 52%);
    height: min(20rem, 70%);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      circle at 65% 55%,
      rgba(94, 234, 212, 0.24),
      rgba(20, 128, 122, 0.1) 48%,
      transparent 70%
    );
    animation: marketing-container-wash-b 26s ease-in-out infinite;
  }

  .marketing-about-hero {
    position: relative;
    /* visible so levitating hero media is not clipped at the top edge on phone */
    overflow: visible;
  }

  .marketing-about-hero::before {
    top: -28%;
    right: -10%;
  }

  .marketing-about-hero::after {
    bottom: -32%;
    left: -8%;
    animation-delay: -8s;
  }

  .marketing-about-section-alt {
    position: relative;
    overflow: visible;
  }

  .marketing-about-section-alt::before {
    top: -36%;
    left: -6%;
  }

  .marketing-about-section-alt::after {
    bottom: -40%;
    right: -10%;
    animation-delay: -10s;
  }

  .marketing-about-hero > *,
  .marketing-about-section-alt > * {
    position: relative;
    z-index: 1;
  }

  .marketing-about-final-cta::before {
    content: "";
    position: absolute;
    inset: -15% -8%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 50% 40% at 50% 20%,
      rgba(255, 255, 255, 0.55),
      transparent 65%
    );
    animation: marketing-cta-glow-drift 24s ease-in-out infinite;
  }

  .marketing-about-final-cta > * {
    position: relative;
    z-index: 1;
  }

  html.dark .marketing-about-hero::before,
  html.dark .marketing-about-section-alt::before {
    background: radial-gradient(
      circle at 35% 35%,
      rgba(20, 128, 122, 0.26),
      rgba(139, 92, 246, 0.1) 42%,
      transparent 68%
    );
  }

  html.dark .marketing-about-hero::after,
  html.dark .marketing-about-section-alt::after {
    background: radial-gradient(
      circle at 65% 55%,
      rgba(139, 92, 246, 0.2),
      rgba(15, 90, 86, 0.08) 48%,
      transparent 70%
    );
  }

  /* Scroll handoff: pause ambient loops so reveals + scrolling stay smooth */
  html.marketing-is-scrolling .marketing-landing-bg-orbs > div,
  html.marketing-is-scrolling .marketing-about-hero::before,
  html.marketing-is-scrolling .marketing-about-hero::after,
  html.marketing-is-scrolling .marketing-about-section-alt::before,
  html.marketing-is-scrolling .marketing-about-section-alt::after,
  html.marketing-is-scrolling .marketing-about-final-cta::before,
  html.marketing-is-scrolling body.marketing-landing-body .marketing-landing-hero-mock.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-about-body .marketing-landing-hero-mock.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-about-body .marketing-about-booking-mock.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-landing-body .marketing-hero-listing-showcase.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-about-body .marketing-hero-listing-showcase.about-reveal.is-visible {
    animation-play-state: paused !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(body.marketing-landing-body, body.marketing-about-body) .marketing-landing-bg-orbs > div,
  .marketing-about-final-cta::before {
    animation: none !important;
  }

  .marketing-about-hero::before,
  .marketing-about-hero::after,
  .marketing-about-section-alt::before,
  .marketing-about-section-alt::after,
  .marketing-about-final-cta::before {
    content: none !important;
    animation: none !important;
  }
}

/* Light branded close — soft teal mist; host chapter stays ink/amber contrast. */
.marketing-about-final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(153, 246, 228, 0.55), transparent 55%),
    radial-gradient(ellipse 55% 60% at 90% 100%, rgba(204, 251, 241, 0.4), transparent 58%),
    linear-gradient(180deg, #f8fafc 0%, #f0fdfa 52%, #e2e8f0 100%) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

html.dark .marketing-about-final-cta {
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(12, 78, 74, 0.28), transparent 55%),
    radial-gradient(ellipse 55% 60% at 90% 100%, rgba(8, 63, 60, 0.22), transparent 58%),
    linear-gradient(180deg, #0f172a 0%, #042f2e 55%, #0f172a 100%) !important;
  border-top-color: rgba(71, 85, 105, 0.55);
}

/* Primary brand-teal CTAs (hero + renter panel). Plain CSS so buttons stay
   visible even if compiled tailwind.css is out of date. */
a.marketing-landing-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none;
  border-radius: 0.75rem;
  background: #0f5a56;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(15, 90, 86, 0.25);
  transition: background-color 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

a.marketing-landing-cta-primary:hover {
  background: #0c4e4a;
  box-shadow:
    0 10px 15px -3px rgba(15, 90, 86, 0.4),
    0 4px 6px -4px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(15, 90, 86, 0.35);
  transform: translateY(-2px);
}

a.marketing-landing-cta-primary:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 2px;
}

/* Secondary outline CTA: pairs with primary without competing */
a.marketing-landing-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.75rem;
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

a.marketing-landing-cta-secondary:hover {
  border-color: rgba(20, 128, 122, 0.5);
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06);
  background: #fff;
  transform: translateY(-1px);
}

a.marketing-landing-cta-secondary:focus-visible {
  outline: 2px solid #2dd4bf;
  outline-offset: 2px;
}

html.dark a.marketing-landing-cta-secondary {
  color: #f8fafc !important;
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(71, 85, 105, 0.85);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html.dark a.marketing-landing-cta-secondary:hover {
  border-color: rgba(45, 212, 191, 0.55);
  background: rgb(30 41 59);
}

@media (min-width: 640px) {
  a.marketing-landing-cta-primary,
  a.marketing-landing-cta-secondary {
    min-width: 11.5rem;
  }
}

/* Inline text links on renter marketing (align with Discover teal) */
a.marketing-landing-text-link {
  color: #0f5a56;
  font-weight: 600;
  text-decoration: none;
}
a.marketing-landing-text-link:hover {
  color: #0c4e4a;
}
html.dark a.marketing-landing-text-link {
  color: #5eead4;
}
html.dark a.marketing-landing-text-link:hover {
  color: #99f6e4;
}

/* Home hero location search → /discover?q= */
.marketing-hero-search {
  width: 100%;
  max-width: 28rem;
  margin: 1.5rem auto 0.65rem;
}
@media (min-width: 1024px) {
  .marketing-hero-search {
    margin-left: 0;
    margin-right: 0;
  }
}
.marketing-hero-search__label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.875rem;
  font-weight: 650;
  text-align: left;
}

.marketing-hero-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
}

.marketing-hero-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: 0.875rem;
}

@media (min-width: 1024px) {
  .marketing-hero-links {
    justify-content: flex-start;
  }
}

.marketing-hero-search__form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.35rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 90, 86, 0.18);
  box-shadow: 0 8px 20px -14px rgba(15, 90, 86, 0.35);
}
html.dark .marketing-hero-search__form {
  background: rgba(15, 23, 42, 0.88);
  border-color: rgba(94, 234, 212, 0.28);
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.55);
}
/* Keep keyboard focus visible around the complete search control. */
.marketing-hero-search__form:focus-within {
  outline: 2px solid #0f766e;
  outline-offset: 3px;
}

html.dark .marketing-hero-search__form:focus-within {
  outline-color: #5eead4;
}

.marketing-hero-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  min-height: 48px;
  line-height: 1.35;
  color: #0f172a;
  outline: none;
}
html.dark .marketing-hero-search__input {
  color: #f8fafc;
}
.marketing-hero-search__input::placeholder {
  color: #64748b;
}
html.dark .marketing-hero-search__input::placeholder {
  color: #94a3b8;
}
.marketing-hero-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: #0f5a56;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.marketing-hero-search__submit:hover {
  background: #0c4e4a;
}
.marketing-hero-search__submit:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 2px;
}

/* Hero + embedded search preview (no extra gradient in mock) */
.marketing-landing-hero--split {
  min-height: 0;
}

.marketing-landing-hero .swiftspot-app-store-badge,
.marketing-landing-hero [class*="app-store-badge"] {
  display: none !important;
}

.marketing-landing-hero-actions {
  margin-bottom: 0;
}

.marketing-landing-hero-title {
  max-width: 36rem;
  text-wrap: balance;
}

.marketing-landing-hero-title__line {
  display: block;
}

@media (max-width: 1023px) {
  .marketing-landing-hero-title {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .marketing-landing-hero-title {
    font-size: clamp(2.65rem, 3.85vw, 2.95rem);
    max-width: 38rem;
  }

  .marketing-landing-hero-title__line:first-child {
    white-space: nowrap;
  }
}

@keyframes marketing-landing-hero-mock-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.85rem, 0);
  }
}

/* Slightly softer levitate for phone / tablet (same timing family, less travel) */
@keyframes marketing-landing-hero-mock-float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.45rem, 0);
  }
}

@keyframes marketing-landing-card-float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.22rem, 0);
  }
}

@keyframes marketing-landing-status-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.92);
    box-shadow: 0 0 0 0.45rem rgba(16, 185, 129, 0);
  }
}

@keyframes marketing-landing-flow-num-pop {
  0% {
    opacity: 0;
    transform: scale(0.55) translate3d(0, 0.4rem, 0);
  }
  60% {
    opacity: 1;
    transform: scale(1.12) translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

.marketing-landing-hero-mock {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 20px 40px -12px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  body.marketing-landing-body .marketing-about-hero .marketing-landing-hero-mock.about-reveal.is-visible,
  body.marketing-about-body .marketing-landing-hero-mock.about-reveal.is-visible,
  body.marketing-about-body .marketing-about-booking-mock.about-reveal.is-visible,
  body.marketing-landing-body .marketing-about-hero .marketing-hero-listing-showcase.about-reveal.is-visible,
  body.marketing-about-body .marketing-hero-listing-showcase.about-reveal.is-visible {
    animation: marketing-landing-hero-mock-float 4.5s ease-in-out infinite;
  }

  body.marketing-landing-body .marketing-about-hero .marketing-landing-hero-mock .rounded-full.bg-emerald-500,
  body.marketing-about-body .marketing-landing-hero-mock .rounded-full.bg-emerald-500 {
    animation: marketing-landing-status-dot-pulse 1.8s ease-in-out infinite;
  }
}

/* Phone / tablet: keep the levitate, use a shorter travel so it feels calm on small viewports */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  body.marketing-landing-body .marketing-about-hero .marketing-landing-hero-mock.about-reveal.is-visible,
  body.marketing-about-body .marketing-landing-hero-mock.about-reveal.is-visible,
  body.marketing-about-body .marketing-about-booking-mock.about-reveal.is-visible,
  body.marketing-landing-body .marketing-about-hero .marketing-hero-listing-showcase.about-reveal.is-visible,
  body.marketing-about-body .marketing-hero-listing-showcase.about-reveal.is-visible {
    animation-name: marketing-landing-hero-mock-float-soft;
  }
}

@media (min-width: 1024px) {
  .marketing-landing-hero-mock {
    max-width: none;
  }
}

html.dark .marketing-landing-hero-mock {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(71, 85, 105, 0.6);
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.2);
}

.marketing-landing-hero-mock__chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  background: #e2e8f0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

html.dark .marketing-landing-hero-mock__chrome {
  background: #1e293b;
  border-bottom-color: rgba(71, 85, 105, 0.6);
}

.marketing-landing-hero-mock__chrome span {
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: #94a3b8;
}

html.dark .marketing-landing-hero-mock__chrome span {
  background: #64748b;
}

.marketing-landing-hero-mock li {
  min-width: 0;
}

.marketing-landing-hero-mock li span:first-child {
  min-width: 0;
}

.marketing-landing-hero-mock li span:last-child {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .marketing-landing-hero-mock li {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .marketing-landing-hero-mock li span:last-child {
    text-align: left;
  }
}

/* "How a booking works" */
.marketing-landing-works ol {
  align-items: stretch;
}

.marketing-landing-works__step {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.45rem 1.35rem 1.5rem;
  border: 1px solid rgba(15, 90, 86, 0.28);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top right, rgba(12, 78, 74, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
  box-shadow:
    0 18px 36px -20px rgba(8, 63, 60, 0.32),
    0 3px 10px -8px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  overflow: hidden;
}

.marketing-landing-works__step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #0f5a56, #0c4e4a);
}

html.dark .marketing-landing-works__step {
  border-color: rgba(20, 128, 122, 0.34);
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
  box-shadow:
    0 18px 36px -22px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.marketing-landing-works__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #0f5a56, #0c4e4a);
  border-radius: 9999px;
  box-shadow: 0 10px 18px -12px rgba(15, 90, 86, 0.95);
  margin-bottom: 0.8rem;
}

html.dark .marketing-landing-works__num {
  color: #fff;
  background: linear-gradient(135deg, #14807a, #14b8a6);
}

.marketing-landing-works__step h3 {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.marketing-landing-works__step p:not(.marketing-landing-works__num) {
  color: #475569;
  font-size: 0.97rem;
  line-height: 1.6;
}

html.dark .marketing-landing-works__step p:not(.marketing-landing-works__num) {
  color: #cbd5e1;
}

/* Lower-page app CTA strip */
.marketing-landing-app-cta__strip {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding: 1.35rem;
  border: 1px solid rgba(20, 128, 122, 0.2);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top left, rgba(20, 128, 122, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.86));
  box-shadow:
    0 18px 38px -28px rgba(8, 63, 60, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.marketing-landing-app-cta__copy {
  max-width: 38rem;
}

.marketing-landing-app-cta__action {
  display: flex;
  justify-content: flex-start;
}

.marketing-landing-app-cta__badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: auto;
  max-width: 100%;
}

html.dark .marketing-landing-app-cta__strip {
  border-color: rgba(20, 128, 122, 0.32);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.95));
  box-shadow:
    0 18px 38px -26px rgba(0, 0, 0, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (min-width: 768px) {
  .marketing-landing-app-cta__strip {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1.5rem 1.65rem;
  }

  .marketing-landing-app-cta__action {
    justify-content: flex-end;
  }

  .marketing-landing-app-cta__badge-wrap {
    align-items: flex-end;
    width: auto;
  }
}

/* Compact host mention: secondary path, full host funnel lives on host landing. */
.marketing-landing-host-mention__card {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid rgba(20, 128, 122, 0.18);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at top left, rgba(20, 128, 122, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 30px -26px rgba(8, 63, 60, 0.42);
}

.marketing-landing-host-mention__copy {
  max-width: 42rem;
}

.marketing-landing-host-mention__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 2.75rem;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(20, 128, 122, 0.32);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.86);
  color: #3730a3 !important;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.marketing-landing-host-mention__link:hover {
  border-color: rgba(20, 128, 122, 0.58);
  background: #fff;
  box-shadow: 0 8px 18px -14px rgba(15, 90, 86, 0.72);
  transform: translateY(-1px);
}

.marketing-landing-host-mention__link:focus-visible {
  outline: 2px solid #2dd4bf;
  outline-offset: 2px;
}

html.dark .marketing-landing-host-mention__card {
  border-color: rgba(20, 128, 122, 0.28);
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.12), transparent 36%),
    rgba(30, 41, 59, 0.78);
  box-shadow: 0 16px 30px -24px rgba(0, 0, 0, 0.72);
}

html.dark .marketing-landing-host-mention__link {
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(30, 41, 59, 0.86);
  color: #99f6e4 !important;
}

html.dark .marketing-landing-host-mention__link:hover {
  border-color: rgba(165, 180, 252, 0.66);
  background: rgb(30 41 59);
}

@media (min-width: 768px) {
  .marketing-landing-host-mention__card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1.45rem 1.6rem;
  }
}

/* Final CTA band */
.marketing-landing-final-cta {
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 18% 20%, rgba(255, 255, 255, 0.26), transparent 52%),
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(153, 246, 228, 0.22), transparent 58%),
    linear-gradient(135deg, #0f5a56 0%, #0c4e4a 50%, #334155 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 -18px 44px -34px rgba(8, 63, 60, 0.45);
}

.marketing-landing-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    ellipse 70% 55% at 20% 30%,
    rgba(255, 255, 255, 0.1),
    transparent 50%
  );
  pointer-events: none;
}

.marketing-landing-final-cta h2 {
  text-shadow: 0 2px 12px rgba(15, 23, 42, 0.22);
}

.marketing-landing-final-cta p {
  text-wrap: balance;
}

.marketing-landing-final-cta a.marketing-landing-cta-on-dark-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  min-width: 12.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #0f5a56 !important;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 0.75rem;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.marketing-landing-final-cta a.marketing-landing-cta-on-dark-primary:hover {
  background: #f8fafc;
  border-color: #fff;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.marketing-landing-final-cta a.marketing-landing-cta-on-dark-primary:focus-visible {
  outline: 2px solid #99f6e4;
  outline-offset: 2px;
}

.marketing-landing-final-cta a.marketing-landing-cta-on-dark-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  min-width: 12.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.marketing-landing-final-cta a.marketing-landing-cta-on-dark-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

.marketing-landing-final-cta a.marketing-landing-cta-on-dark-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Real-place cards (bento) */
.marketing-landing-proof-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow:
    0 10px 15px -3px rgba(15, 23, 42, 0.08),
    0 4px 6px -4px rgba(15, 23, 42, 0.06);
}

html.dark .marketing-landing-proof-card {
  border-color: rgba(71, 85, 105, 0.65);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.35),
    0 4px 6px -4px rgba(0, 0, 0, 0.2);
}

.marketing-landing-proof-card__media {
  position: relative;
  z-index: 0;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}

.marketing-landing-proof-grid {
  align-items: stretch;
}

.marketing-landing-proof-scene-label {
  position: absolute;
  z-index: 1;
  left: 0.75rem;
  bottom: 0.75rem;
  max-width: 75%;
  padding: 0.2rem 0.55rem 0.2rem 0.55rem;
  font-size: var(--type-badge-size, 0.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-label, 0.04em);
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.95);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.45);
  border-radius: 0.25rem;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
}

html.dark .marketing-landing-proof-scene-label {
  background: rgba(15, 23, 42, 0.5);
  color: #f1f5f9;
}

.marketing-landing-proof-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem 1.15rem 1.15rem;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid rgba(203, 213, 225, 0.65);
}

.marketing-landing-proof-card__body p:first-child {
  font-size: var(--type-card-title-size, 1rem);
  line-height: var(--line-height-snug, 1.35);
}

.marketing-landing-proof-card__body p + p {
  color: #475569;
  font-size: var(--type-muted-size, 0.875rem);
  line-height: var(--line-height-body, 1.5);
}

html.dark .marketing-landing-proof-card__body {
  background: rgba(15, 23, 42, 0.9);
  border-top-color: rgba(71, 85, 105, 0.6);
}

html.dark .marketing-landing-proof-card__body p + p {
  color: #cbd5e1;
}

.marketing-landing-proof-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.55) 0%,
    rgba(15, 23, 42, 0.1) 45%,
    transparent 100%
  );
  pointer-events: none;
}

html.dark .marketing-landing-proof-card__media::after {
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.75) 0%,
    rgba(15, 23, 42, 0.35) 50%,
    transparent 100%
  );
}

/* Host snapshot + renter booking mockups */
.marketing-landing-mock {
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 10px 15px -3px rgba(15, 23, 42, 0.06),
    0 4px 6px -4px rgba(15, 23, 42, 0.04);
}

html.dark .marketing-landing-mock {
  border-color: rgba(71, 85, 105, 0.75);
  background: rgba(30, 41, 59, 0.92);
}

.marketing-landing-mock-muted {
  font-size: var(--type-badge-size, 0.75rem);
  letter-spacing: var(--letter-spacing-label, 0.04em);
  text-transform: uppercase;
  font-weight: 600;
  color: #64748b;
}

html.dark .marketing-landing-mock-muted {
  color: #94a3b8;
}

.marketing-landing-mock-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(153, 246, 228, 0.8);
  border-radius: 0.75rem;
  color: #0c4e4a;
  background: rgba(240, 253, 250, 0.82);
  font-weight: 700;
}

html.dark .marketing-landing-mock-chip {
  color: #99f6e4;
  background: rgba(8, 63, 60, 0.22);
  border-color: rgba(20, 128, 122, 0.38);
}

/* Large proof tile: driveway photo (bento left column) */
.marketing-landing-places-hero-tile {
  flex: 1 1 auto;
  min-height: 16rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06);
}

@media (min-width: 1024px) {
  .marketing-landing-places-hero-tile {
    min-height: 20rem;
  }
}

/* About page (shared marketing surface) */
html:not(.dark):has(body.marketing-about-body) {
  background: linear-gradient(
    125deg,
    #f8fafc 0%,
    #f0fdfa 18%,
    #ecfdf5 36%,
    #f0fdfa 54%,
    #f0fdfa 72%,
    #f1f5f9 100%
  ) !important;
  background-size: 220% 220%;
  min-height: 100%;
}

html:not(.dark) body.marketing-about-body {
  background: linear-gradient(
    125deg,
    #f8fafc 0%,
    #f0fdfa 18%,
    #ecfdf5 36%,
    #f0fdfa 54%,
    #f0fdfa 72%,
    #f1f5f9 100%
  ) !important;
  background-size: 220% 220%;
}

html:not(.dark) body.marketing-about-body main,
html:not(.dark) body.marketing-about-body main > div {
  background: transparent !important;
}

html:not(.dark) body.marketing-about-body nav.swiftspot-main-nav {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

html.dark:has(body.marketing-about-body) {
  background-color: #0f172a !important;
  min-height: 100%;
}

html.dark body.marketing-about-body {
  background: #0f172a !important;
}

html.dark body.marketing-about-body main,
html.dark body.marketing-about-body main > div {
  background: transparent !important;
}

.marketing-about-hero {
  border-bottom: 1px solid rgba(15, 90, 86, 0.14);
}

html.dark .marketing-about-hero {
  border-bottom-color: rgba(20, 128, 122, 0.22);
}

html:not(.dark) .marketing-about-hero {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(240, 253, 250, 0.82) 48%,
    rgba(236, 253, 245, 0.88) 100%
  );
}

html.dark .marketing-about-hero {
  background: linear-gradient(
    135deg,
    rgb(15 23 42 / 0.98),
    rgb(30 27 75 / 0.45),
    rgb(15 23 42 / 0.99)
  );
}

/* Smooth scroll for marketing About + homepage is with the about-reveal block below */

html:not(.dark) .marketing-about-section-alt {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.88),
    rgba(240, 253, 250, 0.55)
  );
  border-color: rgba(15, 90, 86, 0.1) !important;
}

html.dark .marketing-about-section-alt {
  background: linear-gradient(180deg, rgb(15 23 42), rgb(30 41 59)) !important;
}

/* Small-device polish: keep landing content readable without horizontal squeeze. */
@media (max-width: 640px) {
  body.marketing-landing-body,
  body.marketing-landing-body main,
  body.marketing-landing-body section {
    overflow-x: clip;
  }

  .marketing-landing-hero > div,
  .marketing-landing-places > div,
  .marketing-landing-works > div,
  .marketing-landing-trust > div,
  .marketing-landing-app-cta > div,
  .marketing-landing-host-mention > div {
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
  }

  .marketing-landing-hero > div {
    padding-top: 2.1rem !important;
    padding-bottom: 2.35rem !important;
  }

  .marketing-landing-hero-title {
    max-width: 100%;
    font-size: clamp(2.15rem, 10.5vw, 2.8rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em;
  }

  .marketing-landing-hero-title__line {
    overflow-wrap: anywhere;
  }

  .marketing-landing-hero-actions,
  .marketing-landing-final-cta .flex {
    width: 100%;
  }

  a.marketing-landing-cta-primary,
  a.marketing-landing-cta-secondary,
  .marketing-landing-final-cta a.marketing-landing-cta-on-dark-primary,
  .marketing-landing-final-cta a.marketing-landing-cta-on-dark-secondary {
    width: 100%;
    min-width: 0;
    min-height: 2.85rem;
    padding: 0.78rem 1rem;
    font-size: 0.95rem;
  }

  .marketing-landing-hero-mock,
  .marketing-landing-mock,
  .marketing-landing-app-cta__strip,
  .marketing-landing-trust-stripe-card,
  .marketing-landing-host-mention__card {
    max-width: 100%;
    border-radius: 1rem;
  }

  .marketing-landing-hero-mock .p-4,
  .marketing-landing-mock {
    padding: 1rem !important;
  }

  .marketing-landing-hero-mock .grid.grid-cols-2,
  .marketing-landing-proof-grid,
  .marketing-landing-works ol {
    grid-template-columns: 1fr !important;
  }

  .marketing-landing-places-hero-tile,
  .marketing-landing-proof-card__media {
    min-height: 12rem;
  }

  .marketing-landing-proof-card__body {
    padding: 0.85rem 0.9rem 0.95rem;
  }

  .marketing-landing-app-cta__strip {
    padding: 1rem !important;
    text-align: center;
  }

  .marketing-landing-app-cta__copy {
    max-width: none;
  }

  .marketing-landing-app-cta__action {
    justify-content: stretch;
  }

  .marketing-landing-app-cta__badge-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;
  }

  .marketing-about-audience-card .marketing-landing-app-cta__badge-wrap {
    align-items: stretch;
  }

  .marketing-about-audience-card .marketing-landing-app-cta__badge-wrap .swiftspot-app-store-badge {
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
  }

  .marketing-landing-host-mention__card {
    padding: 1rem !important;
    text-align: center;
  }

  .marketing-landing-host-mention__copy {
    max-width: none;
  }

  .marketing-landing-host-mention__link {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .marketing-landing-hero-title {
    font-size: clamp(1.95rem, 10.8vw, 2.45rem) !important;
  }

  .marketing-landing-hero-mock li,
  .marketing-landing-hero-mock .flex.justify-between {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .marketing-landing-hero-mock li span:last-child,
  .marketing-landing-hero-mock .flex.justify-between span:last-child {
    text-align: left;
    white-space: normal;
  }

  .marketing-landing-proof-scene-label {
    max-width: calc(100% - 1rem);
    left: 0.5rem;
    bottom: 0.5rem;
    font-size: 0.66rem;
  }

  .marketing-landing-mock-chip {
    justify-content: flex-start;
    min-height: 1.9rem;
    padding: 0.4rem 0.55rem;
    text-align: left;
  }
}

/* About page — consolidated flow */
.marketing-about-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0c4e4a;
  background: rgb(240 253 250 / 0.9);
  border: 1px solid rgb(153 246 228 / 0.9);
  border-radius: 999px;
}

html.dark .marketing-about-kicker {
  color: #99f6e4;
  background: rgb(8 63 60 / 0.35);
  border-color: rgb(12 78 74 / 0.45);
}

/* Trust & Safety — For renters / For hosts */
.trust-audience-switcher {
  display: inline-flex;
  align-items: stretch;
  padding: 0.25rem;
  gap: 0.25rem;
  border-radius: 999px;
  background: rgb(248 250 252 / 0.95);
  border: 1px solid rgb(226 232 240 / 0.95);
}

html.dark .trust-audience-switcher {
  background: rgb(15 23 42 / 0.65);
  border-color: rgb(51 65 85 / 0.85);
}

.trust-audience-switcher__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #475569;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.trust-audience-switcher__item:hover {
  color: #0f172a;
  background: rgb(255 255 255 / 0.7);
}

.trust-audience-switcher__item.is-active {
  color: #0c4e4a;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.trust-audience-switcher__item:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

html.dark .trust-audience-switcher__item {
  color: #94a3b8;
}

html.dark .trust-audience-switcher__item:hover {
  color: #e2e8f0;
  background: rgb(30 41 59 / 0.8);
}

html.dark .trust-audience-switcher__item.is-active {
  color: #99f6e4;
  background: rgb(15 23 42 / 0.95);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.marketing-about-intro {
  margin-bottom: 1.5rem;
}

.marketing-about-intro--split {
  display: grid;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .marketing-about-intro--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.5rem;
  }
}

.marketing-about-intro__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.marketing-about-intro__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid rgb(153 246 228 / 0.75);
  background: rgb(240 253 250 / 0.55);
  color: #0c4e4a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}

.marketing-about-intro__path-sep {
  color: rgb(20 128 122 / 0.55);
  font-weight: 700;
}

html.dark .marketing-about-intro__path {
  border-color: rgb(12 78 74 / 0.4);
  background: rgb(8 63 60 / 0.28);
  color: #99f6e4;
}

html.dark .marketing-about-intro__path-sep {
  color: rgb(165 180 252 / 0.55);
}

/* Hero CTAs sit between lead and support band on About */
.marketing-about-hero .marketing-hero-actions {
  margin-top: 1.25rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .marketing-about-hero .marketing-hero-actions {
    margin-top: 1.35rem;
  }
}

/* About comparison: quiet topic rows (Before | On SwiftSpot), not nested cards */
.marketing-about-contrast-intro {
  display: grid;
  gap: 0.85rem 2rem;
  margin-bottom: 1.5rem;
  text-align: left;
  max-width: 40rem;
}

@media (min-width: 768px) {
  .marketing-about-contrast-intro {
    max-width: none;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: 1rem 2.5rem;
    margin-bottom: 1.75rem;
  }
}

.marketing-about-contrast-intro__lead {
  margin: 0;
}

/* Shared track so column heads and value cells line up on sm+ */
.marketing-about-section--problem {
  --about-contrast-topic: 11rem;
  --about-contrast-gap: 0.75rem;
  --about-contrast-pad-x: 1rem;
  --about-contrast-cols: var(--about-contrast-topic) minmax(0, 1fr) minmax(0, 1fr);
}

.marketing-about-contrast-colheads {
  display: none;
}

@media (min-width: 640px) {
  .marketing-about-contrast-colheads {
    display: grid;
    grid-template-columns: var(--about-contrast-cols);
    gap: var(--about-contrast-gap);
    margin: 0 0 0.5rem;
    padding: 0 var(--about-contrast-pad-x);
    box-sizing: border-box;
    align-items: end;
  }

  .marketing-about-contrast-colheads__before,
  .marketing-about-contrast-colheads__swiftspot {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #64748b;
  }

  .marketing-about-contrast-colheads__swiftspot {
    color: #0f5a56;
    font-weight: 700;
  }

  html.dark .marketing-about-contrast-colheads__before {
    color: #94a3b8;
  }

  html.dark .marketing-about-contrast-colheads__swiftspot {
    color: #5eead4;
  }
}

.marketing-about-contrast-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.marketing-about-contrast-row {
  border-radius: 0.9rem;
  padding: 0.95rem var(--about-contrast-pad-x, 1rem);
  border: 1px solid rgb(15 23 42 / 0.1);
  background: rgb(255 255 255 / 0.94);
  box-sizing: border-box;
}

html.dark .marketing-about-contrast-row {
  border-color: rgb(71 85 105 / 0.65);
  background: rgb(15 23 42 / 0.55);
}

.marketing-about-contrast-row__title {
  margin: 0 0 0.65rem;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

html.dark .marketing-about-contrast-row__title {
  color: #f8fafc;
}

.marketing-about-contrast-row__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

@media (min-width: 640px) {
  .marketing-about-contrast-row {
    /* Title + Before + On SwiftSpot share one track with colheads */
    display: grid;
    grid-template-columns: var(--about-contrast-cols);
    column-gap: var(--about-contrast-gap);
    row-gap: 0;
    align-items: stretch;
    padding: 0.85rem var(--about-contrast-pad-x);
  }

  .marketing-about-contrast-row__title {
    margin: 0;
    align-self: center;
    min-width: 0;
  }

  /* Promote cells to the same grid as the title (aligns with colheads) */
  .marketing-about-contrast-row__pair {
    display: contents;
  }
}

.marketing-about-contrast-row__cell {
  margin: 0;
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 500;
  color: #475569;
  min-width: 0;
}

.marketing-about-contrast-row__cell--before {
  background: rgb(241 245 249 / 0.9);
  border: 1px solid rgb(148 163 184 / 0.28);
}

.marketing-about-contrast-row__cell--swiftspot {
  color: #1e293b;
  background: rgb(240 253 250 / 0.7);
  border: 1px solid rgb(20 128 122 / 0.22);
}

html.dark .marketing-about-contrast-row__cell--before {
  color: #94a3b8;
  background: rgb(2 6 23 / 0.4);
  border-color: rgb(71 85 105 / 0.55);
}

html.dark .marketing-about-contrast-row__cell--swiftspot {
  color: #e2e8f0;
  background: rgb(8 63 60 / 0.28);
  border-color: rgb(45 212 191 / 0.3);
}

.marketing-about-contrast-row__label {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #64748b;
}

.marketing-about-contrast-row__label--swiftspot {
  color: #0f5a56;
  font-weight: 700;
}

html.dark .marketing-about-contrast-row__label {
  color: #94a3b8;
}

html.dark .marketing-about-contrast-row__label--swiftspot {
  color: #5eead4;
}

/* Screen readers always hear Before / On SwiftSpot; sighted sm+ use column heads */
.marketing-about-contrast-row__label--mobile {
  display: block;
}

@media (min-width: 640px) {
  .marketing-about-contrast-row__label--mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .marketing-about-contrast-row__cell {
    position: relative;
  }
}

.marketing-about-contrast-row__text {
  display: block;
}

.marketing-about-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketing-about-flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.2rem !important;
  height: 100%;
}

.marketing-about-flow-step__num {
  margin: 0 0 0.15rem;
  color: #14807a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.dark .marketing-about-flow-step__num {
  color: #5eead4;
}

.marketing-about-flow-step h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.015em;
}

html.dark .marketing-about-flow-step h3 {
  color: #f8fafc;
}

.marketing-about-flow-step p {
  margin: 0;
  color: #475569;
  font-size: 0.88rem;
  line-height: 1.45;
}

html.dark .marketing-about-flow-step p {
  color: #cbd5e1;
}

.marketing-about-platform-panel {
  max-width: 56rem;
  margin: 0 auto;
}

.marketing-about-platform-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketing-about-platform-list li {
  display: grid;
  gap: 0.25rem;
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(226 232 240 / 0.92);
  background: rgb(248 250 252 / 0.72);
}

html.dark .marketing-about-platform-list li {
  border-color: rgb(51 65 85 / 0.9);
  background: rgb(15 23 42 / 0.46);
}

/* Nested inside a glass mock: denser, no double “card on card” wash */
.marketing-about-platform-list--in-mock {
  gap: 0.65rem;
}

.marketing-about-platform-list--in-mock li {
  border-color: rgb(153 246 228 / 0.55);
  background: rgb(255 255 255 / 0.72);
  padding: 1rem 1.05rem;
  box-shadow: 0 8px 22px -20px rgb(15 90 86 / 0.45);
}

html.dark .marketing-about-platform-list--in-mock li {
  border-color: rgb(12 78 74 / 0.35);
  background: rgb(15 23 42 / 0.55);
  box-shadow: none;
}

.marketing-about-platform-list strong {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
}

html.dark .marketing-about-platform-list strong {
  color: #f8fafc;
}

.marketing-about-platform-list span {
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.45;
}

html.dark .marketing-about-platform-list span {
  color: #cbd5e1;
}

@media (max-width: 767px) {
  .marketing-about-flow-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   About hero — product marketing layout
   Coherent left stack (readable measure) + listing showcase.
   One support band: quiet step row + Stripe line. No stretched full-track junk.
   ============================================================================= */

.marketing-about-hero {
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.marketing-about-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

@media (min-width: 1024px) {
  .marketing-about-hero-copy {
    align-items: flex-start;
    /* Shared readable measure so headline, lead, and support stay one unit */
    max-width: 32.5rem;
  }
}

.marketing-about-hero .marketing-about-kicker {
  margin: 0 0 0.65rem;
}

.marketing-about-hero-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.7rem, 4vw + 0.4rem, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  max-width: 18em;
}

/* About invite: closer to homepage hero presence */
body.marketing-about-body .marketing-about-hero-title {
  font-size: clamp(1.95rem, 4.5vw + 0.35rem, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  max-width: 14em;
}

body.marketing-about-body .marketing-about-chapter-title {
  margin: 0;
  font-size: clamp(1.4rem, 1.5vw + 1rem, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.marketing-about-hero-lead,
.marketing-about-hero .marketing-hero-lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  max-width: 34rem;
  color: #475569;
}

html.dark .marketing-about-hero-lead,
html.dark .marketing-about-hero .marketing-hero-lead {
  color: #cbd5e1;
}

/* Support band under the lead */
.marketing-about-hero-support {
  margin: 1.35rem 0 0;
  padding: 1.15rem 0 0;
  width: 100%;
  max-width: 34rem;
  border-top: 1px solid rgb(148 163 184 / 0.28);
}

html.dark .marketing-about-hero-support {
  border-top-color: rgb(71 85 105 / 0.55);
}

@media (min-width: 1024px) {
  .marketing-about-hero-support {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    max-width: none;
  }
}

/* Step row: See it / Book it / Own it */
.marketing-about-hero-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 0;
}

.marketing-about-hero-metrics li {
  min-width: 0;
  text-align: left;
}

.marketing-about-hero-metrics span {
  display: block;
  margin: 0 0 0.25rem;
  color: #0f5a56;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

html.dark .marketing-about-hero-metrics span {
  color: #5eead4;
}

.marketing-about-hero-metrics strong {
  display: block;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

html.dark .marketing-about-hero-metrics strong {
  color: #e2e8f0;
}

@media (min-width: 1024px) {
  .marketing-about-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    justify-content: stretch;
    text-align: left;
  }

  .marketing-about-hero-metrics li {
    position: relative;
    padding: 0 1rem 0 0;
  }

  .marketing-about-hero-metrics li:not(:last-child) {
    padding-right: 1.15rem;
    margin-right: 1.15rem;
    border-right: 1px solid rgb(148 163 184 / 0.28);
  }

  html.dark .marketing-about-hero-metrics li:not(:last-child) {
    border-right-color: rgb(71 85 105 / 0.55);
  }

  .marketing-about-hero-metrics span {
    font-size: 0.6875rem;
  }

  .marketing-about-hero-metrics strong {
    font-size: 0.875rem;
  }
}

/* Stripe sits under the steps with quiet air */
.marketing-about-hero-support .marketing-hero-stripe-trust {
  margin-top: 1.15rem;
  padding-top: 0;
  border-top: none;
}

.marketing-about-hero-support .swiftspot-stripe-trust-inline {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .marketing-about-hero-support .marketing-hero-stripe-trust {
    margin-top: 1.25rem;
  }
}

/* Stacked hero: air between copy and listing band (About uses compact framed showcase) */
@media (max-width: 1023px) {
  .marketing-about-hero .marketing-hero-split {
    gap: 1.35rem !important;
  }

  .marketing-about-hero .marketing-hero-copy {
    padding-bottom: 0;
  }

  .marketing-about-hero .marketing-hero-listing-showcase:not(.marketing-hero-listing-showcase--about) {
    margin-top: 0;
    padding-top: 1.35rem;
    border-top: 1px solid rgb(148 163 184 / 0.28);
  }

  html.dark .marketing-about-hero .marketing-hero-listing-showcase:not(.marketing-hero-listing-showcase--about) {
    border-top-color: rgb(71 85 105 / 0.55);
  }

  .marketing-about-hero-support .marketing-hero-stripe-trust {
    margin-top: 1rem;
  }
}

body.marketing-about-body .marketing-about-section--after-hero {
  padding-top: clamp(2.75rem, 5vw, 3.5rem);
}

.marketing-about-section--problem {
  background:
    linear-gradient(180deg, rgb(248 250 252 / 0.72), rgb(255 255 255 / 0.42));
}

html.dark .marketing-about-section--problem {
  background:
    linear-gradient(180deg, rgb(15 23 42 / 0.55), rgb(15 23 42 / 0.28));
}

/* About chapter rhythm: background shift instead of hairline borders */
body.marketing-about-body .marketing-about-chapter {
  border-bottom: none !important;
}

body.marketing-about-body .marketing-about-chapter--invite {
  padding-top: clamp(2.75rem, 6vw, 4.25rem);
  padding-bottom: clamp(2.75rem, 6vw, 4rem);
}

body.marketing-about-body .marketing-about-chapter--why {
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.5rem);
}

body.marketing-about-body .marketing-about-chapter--contrast {
  padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(15 23 42 / 0.04), transparent 55%),
    linear-gradient(180deg, rgb(241 245 249 / 0.95), rgb(255 255 255 / 0.7));
}

html.dark body.marketing-about-body .marketing-about-chapter--contrast {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(20 128 122 / 0.12), transparent 55%),
    linear-gradient(180deg, rgb(15 23 42 / 0.92), rgb(15 23 42 / 0.55));
}

body.marketing-about-body .marketing-about-chapter--path {
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
}

body.marketing-about-body .marketing-about-chapter--places {
  padding-top: clamp(2.5rem, 4.5vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.25rem);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(248 250 252 / 0.9));
}

html.dark body.marketing-about-body .marketing-about-chapter--places {
  background:
    linear-gradient(180deg, rgb(15 23 42 / 0.4), rgb(15 23 42 / 0.75));
}

body.marketing-about-body .marketing-about-chapter--arrive {
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
}

body.marketing-about-body .marketing-about-chapter--host {
  padding: 0;
  overflow: hidden;
}

body.marketing-about-body .marketing-about-chapter--fork {
  padding-top: clamp(2.25rem, 4vw, 3rem);
  padding-bottom: clamp(2.25rem, 4vw, 3rem);
  background: rgb(255 255 255 / 0.55);
}

html.dark body.marketing-about-body .marketing-about-chapter--fork {
  background: rgb(15 23 42 / 0.35);
}

body.marketing-about-body .marketing-about-intro--open {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.marketing-about-path-spaces {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(148 163 184 / 0.28);
}

html.dark .marketing-about-path-spaces {
  border-top-color: rgb(71 85 105 / 0.55);
}

.marketing-about-path-spaces__label {
  margin: 0 0 0.85rem;
  text-align: center;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

html.dark .marketing-about-path-spaces__label {
  color: #94a3b8;
}

.marketing-about-space-tags--compact {
  gap: 0.5rem;
}

.marketing-about-space-tags--compact li {
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  font-size: 0.8rem;
  box-shadow: none;
}

.marketing-about-section--flow {
  background:
    radial-gradient(circle at top right, rgb(20 128 122 / 0.1), transparent 40%),
    radial-gradient(circle at bottom left, rgb(45 212 191 / 0.08), transparent 42%),
    linear-gradient(180deg, rgb(240 253 250 / 0.7), rgb(255 255 255 / 0.4));
}

html.dark .marketing-about-section--flow {
  background:
    radial-gradient(circle at top right, rgb(45 212 191 / 0.14), transparent 40%),
    linear-gradient(180deg, rgb(15 23 42 / 0.92), rgb(30 41 59 / 0.72));
}

.marketing-about-section--platform {
  background: rgb(248 250 252 / 0.65);
}

html.dark .marketing-about-section--platform {
  background: rgb(15 23 42 / 0.55);
}

/* Stronger path connectors on About */
body.marketing-about-body .marketing-about-flow-track__badge {
  width: 2.55rem;
  height: 2.55rem;
  font-size: 0.95rem;
  box-shadow: 0 14px 28px -12px rgb(15 90 86 / 0.75);
}

body.marketing-about-body .marketing-about-flow-track__step:not(:last-child)::after {
  top: 1.25rem;
  height: 3px;
  background: linear-gradient(90deg, rgb(15 90 86 / 0.7), rgb(20 128 122 / 0.2));
}

.marketing-about-flow-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: about-flow;
}

.marketing-about-flow-track__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.65rem;
}

.marketing-about-flow-track__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: calc(50% + 1.15rem);
  width: calc(100% - 2.3rem);
  height: 2px;
  background: linear-gradient(90deg, rgb(20 128 122 / 0.55), rgb(20 128 122 / 0.15));
  pointer-events: none;
}

.marketing-about-flow-track__badge {
  display: inline-flex;
  width: 2.3rem;
  height: 2.3rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: #0f5a56;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 10px 24px -14px rgb(15 90 86 / 0.85);
}

html.dark .marketing-about-flow-track__badge {
  background: #14807a;
}

.marketing-about-flow-track__body h3 {
  margin: 0 0 0.35rem;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.015em;
}

html.dark .marketing-about-flow-track__body h3 {
  color: #f8fafc;
}

.marketing-about-flow-track__body p {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.45;
}

html.dark .marketing-about-flow-track__body p {
  color: #cbd5e1;
}

.marketing-about-audience-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 1rem;
  align-items: stretch;
}

.marketing-about-audience-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-radius: 1.15rem;
  padding: 1.25rem 1.3rem;
  min-height: 100%;
}

.marketing-about-audience-card__eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketing-about-audience-card h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.marketing-about-audience-card p {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

.marketing-about-audience-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.55rem;
  font-size: 0.92rem;
  font-weight: 800;
}

.marketing-about-audience-card--renter {
  border: 1px solid rgb(45 212 191 / 0.45);
  background:
    radial-gradient(circle at top left, rgb(20 128 122 / 0.14), transparent 42%),
    rgb(255 255 255 / 0.95);
  color: #0f172a;
  box-shadow: 0 12px 32px -26px rgb(15 90 86 / 0.38);
}

.marketing-about-audience-card--renter .marketing-about-audience-card__eyebrow {
  color: #0c4e4a;
}

.marketing-about-audience-card--renter p {
  color: #475569;
}

.marketing-about-audience-card--renter .marketing-about-audience-card__link {
  color: #0c4e4a;
}

html.dark .marketing-about-audience-card--renter {
  background:
    radial-gradient(circle at top left, rgb(20 128 122 / 0.2), transparent 42%),
    rgb(30 41 59 / 0.82);
  border-color: rgb(45 212 191 / 0.35);
  color: #f8fafc;
}

html.dark .marketing-about-audience-card--renter .marketing-about-audience-card__eyebrow,
html.dark .marketing-about-audience-card--renter .marketing-about-audience-card__link {
  color: #5eead4;
}

html.dark .marketing-about-audience-card--renter p {
  color: #cbd5e1;
}

/* Host chapter: operator ink + amber (host-landing family) — no indigo mist bleed */
.marketing-about-section--host {
  position: relative;
  overflow: hidden;
  border: none !important;
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(245, 158, 11, 0.14), transparent 50%),
    radial-gradient(ellipse 55% 70% at 92% 100%, rgba(180, 83, 9, 0.1), transparent 48%),
    linear-gradient(145deg, #0b1120 0%, #111827 48%, #0b1120 100%);
}

html.dark .marketing-about-section--host {
  background:
    radial-gradient(ellipse 70% 80% at 12% 0%, rgba(245, 158, 11, 0.1), transparent 50%),
    radial-gradient(ellipse 55% 70% at 92% 100%, rgba(180, 83, 9, 0.08), transparent 48%),
    linear-gradient(145deg, #080c14 0%, #0b1120 52%, #080c14 100%);
}

.marketing-about-host-band {
  display: grid;
  gap: 1.35rem;
  max-width: 56rem;
  margin: 0 auto;
}

.marketing-about-host-band--bleed {
  max-width: none;
  margin: 0;
  padding: clamp(2.75rem, 5vw, 3.75rem) 0;
}

.marketing-about-host-band--bleed .marketing-about-host-band__inner {
  display: grid;
  gap: 1.35rem;
}

.marketing-about-host-band__copy {
  max-width: 38rem;
}

.marketing-about-kicker--on-ink {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.38);
}

html.dark .marketing-about-kicker--on-ink {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
}

.marketing-about-host-band__title {
  margin: 0 0 0.75rem;
  color: #f8fafc;
  font-size: clamp(1.45rem, 2.4vw + 0.8rem, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.marketing-about-host-band__lead {
  margin: 0;
  color: #cbd5e1;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36rem;
}

.marketing-about-platform-list--host-ink {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .marketing-about-platform-list--host-ink {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.marketing-about-platform-list--host-ink li {
  border-color: rgb(148 163 184 / 0.22);
  background: rgb(255 255 255 / 0.05);
  backdrop-filter: blur(8px);
  padding: 1rem 1.1rem;
  box-shadow: none;
}

.marketing-about-platform-list--host-ink strong {
  color: #f1f5f9;
}

.marketing-about-platform-list--host-ink span {
  color: #94a3b8;
}

/* Matches host-landing primary CTA (indigo on operator canvas, not emerald product teal) */
.marketing-about-host-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.7rem 1.15rem;
  border-radius: 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(100deg, #4f46e5 0%, #4338ca 45%, #6366f1 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 28px -12px rgba(79, 70, 229, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.marketing-about-host-band__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 32px -14px rgba(67, 56, 202, 0.55);
}

.marketing-about-host-band__cta:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Lightweight dual doors (About fork) — no long pitch cards */
.marketing-about-audience-grid--fork {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
}

.marketing-about-audience-grid--fork-with-app {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .marketing-about-audience-grid--fork-with-app {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.marketing-about-fork-link--app {
  border: 1px solid rgb(148 163 184 / 0.35);
  background:
    radial-gradient(circle at top left, rgb(20 128 122 / 0.08), transparent 48%),
    rgb(248 250 252 / 0.96);
  color: #0f172a;
  box-shadow: 0 12px 28px -24px rgb(15 23 42 / 0.28);
  overflow: visible;
}

.marketing-about-fork-link--app .marketing-about-fork-link__eyebrow {
  color: #0c4e4a;
}

.marketing-about-fork-link--app .marketing-about-fork-link__hint {
  color: #64748b;
}

.marketing-about-app-badge-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.marketing-about-app-badge-wrap .swiftspot-app-store-badge {
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
}

html.dark .marketing-about-fork-link--app {
  background:
    radial-gradient(circle at top left, rgb(20 128 122 / 0.14), transparent 48%),
    rgb(30 41 59 / 0.88);
  border-color: rgb(71 85 105 / 0.75);
  color: #f8fafc;
}

html.dark .marketing-about-fork-link--app .marketing-about-fork-link__eyebrow {
  color: #5eead4;
}

html.dark .marketing-about-fork-link--app .marketing-about-fork-link__hint {
  color: #94a3b8;
}

.marketing-about-fork-link {
  position: relative;
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: 1.1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.marketing-about-fork-link__eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketing-about-fork-link__title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.marketing-about-fork-link__hint {
  font-size: 0.88rem;
  line-height: 1.4;
  font-weight: 500;
}

.marketing-about-fork-link__arrow {
  position: absolute;
  top: 1.15rem;
  right: 1.1rem;
  display: inline-flex;
}

.marketing-about-fork-link--renter {
  border: 1px solid rgb(45 212 191 / 0.45);
  background:
    radial-gradient(circle at top left, rgb(20 128 122 / 0.12), transparent 48%),
    rgb(255 255 255 / 0.95);
  color: #0f172a;
  box-shadow: 0 12px 28px -24px rgb(15 90 86 / 0.4);
}

.marketing-about-fork-link--renter .marketing-about-fork-link__eyebrow,
.marketing-about-fork-link--renter .marketing-about-fork-link__arrow {
  color: #0c4e4a;
}

.marketing-about-fork-link--renter .marketing-about-fork-link__hint {
  color: #64748b;
}

/* Host door: ink + amber (operator) — distinct from renter teal glass */
.marketing-about-fork-link--host {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 48%),
    linear-gradient(160deg, #0b1120 0%, #1e293b 100%);
  color: #f8fafc;
  box-shadow: 0 14px 32px -24px rgb(15 23 42 / 0.55);
}

.marketing-about-fork-link--host .marketing-about-fork-link__eyebrow,
.marketing-about-fork-link--host .marketing-about-fork-link__arrow {
  color: #fbbf24;
}

.marketing-about-fork-link--host .marketing-about-fork-link__hint {
  color: #94a3b8;
}

.marketing-about-fork-link:hover {
  transform: translateY(-2px);
}

.marketing-about-fork-link:focus-visible {
  outline: 2px solid #2dd4bf;
  outline-offset: 2px;
}

.marketing-about-fork-link--host:focus-visible {
  outline-color: #fbbf24;
}

html.dark .marketing-about-fork-link--renter {
  background:
    radial-gradient(circle at top left, rgb(20 128 122 / 0.18), transparent 48%),
    rgb(30 41 59 / 0.85);
  border-color: rgb(45 212 191 / 0.35);
  color: #f8fafc;
}

html.dark .marketing-about-fork-link--renter .marketing-about-fork-link__eyebrow,
html.dark .marketing-about-fork-link--renter .marketing-about-fork-link__arrow {
  color: #5eead4;
}

html.dark .marketing-about-fork-link--renter .marketing-about-fork-link__hint {
  color: #94a3b8;
}

html.dark .marketing-about-fork-link--host {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 48%),
    linear-gradient(160deg, #080c14 0%, #0b1120 100%);
  border-color: rgba(245, 158, 11, 0.32);
}

@media (max-width: 639px) {
  .marketing-about-audience-grid--fork {
    grid-template-columns: 1fr;
  }

  body.marketing-about-body .marketing-about-chapter--fork,
  body.marketing-about-body .marketing-about-audience-grid--fork-with-app {
    overflow: visible;
  }

  /* Fork cards use vertical reveal on phones so main overflow-x does not shear badges */
  body.marketing-about-body .marketing-about-fork-link.about-reveal--left,
  body.marketing-about-body .marketing-about-fork-link.about-reveal--right {
    transform: translate3d(0, 1.5rem, 0);
  }

  body.marketing-about-body .marketing-about-fork-link.about-reveal--left.is-visible,
  body.marketing-about-body .marketing-about-fork-link.about-reveal--right.is-visible {
    transform: translate3d(0, 0, 0);
  }
}

/* Audience pair: light teal (renter) vs operator ink+amber (host) */
.marketing-about-audience-grid--contrast {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
}

.marketing-about-audience-card--host {
  border: 1px solid rgba(245, 158, 11, 0.35);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 46%),
    linear-gradient(160deg, #0b1120 0%, #1e293b 100%);
  color: #f8fafc;
  box-shadow:
    0 18px 40px -24px rgb(15 23 42 / 0.55),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.marketing-about-audience-card--host .marketing-about-audience-card__eyebrow {
  color: #fbbf24;
}

.marketing-about-audience-card--host h3 {
  color: #f8fafc;
}

.marketing-about-audience-card--host p {
  color: #94a3b8;
}

.marketing-about-audience-card--host .marketing-about-audience-card__link {
  color: #fbbf24;
}

.marketing-about-audience-card__link--host {
  align-self: start;
  margin-top: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.65rem;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.38);
  color: #fde68a !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.marketing-about-audience-card__link--host:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

html.dark .marketing-about-audience-card--host {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.12), transparent 46%),
    linear-gradient(160deg, #080c14 0%, #0b1120 100%);
  border-color: rgba(245, 158, 11, 0.32);
  color: #f8fafc;
}

html.dark .marketing-about-audience-card--host .marketing-about-audience-card__eyebrow,
html.dark .marketing-about-audience-card--host .marketing-about-audience-card__link {
  color: #fbbf24;
}

html.dark .marketing-about-audience-card--host p {
  color: #94a3b8;
}

html.dark .marketing-about-audience-card__link--host {
  color: #fde68a !important;
}

.marketing-about-final-cta__logo {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: 8.75rem;
  object-fit: contain;
}

@media (min-width: 640px) {
  .marketing-about-final-cta__logo {
    height: 2rem;
    max-width: 10rem;
  }
}

/* Light lockup is already dark-on-transparent — no CSS recolor. */
.marketing-about-final-cta__logo--light {
  opacity: 0.96;
}

/* Light/dark logo visibility: logo-switch.css */

.marketing-about-final-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  min-width: 10.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.75rem;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.marketing-about-final-cta__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #0f5a56 0%, #14807a 100%);
  border: 1px solid rgba(15, 90, 86, 0.85);
  box-shadow: 0 10px 22px -14px rgba(12, 78, 74, 0.7);
}

.marketing-about-final-cta__btn--primary:hover {
  background: linear-gradient(135deg, #0c4e4a 0%, #0f5a56 100%);
  transform: translateY(-1px);
}

.marketing-about-final-cta__btn--secondary {
  color: #0f5a56;
  background: #fff;
  border: 1px solid rgba(20, 128, 122, 0.45);
  box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.35);
}

.marketing-about-final-cta__btn--secondary:hover {
  background: #f0fdfa;
  border-color: rgba(15, 90, 86, 0.55);
  transform: translateY(-1px);
}

html.dark .marketing-about-final-cta__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #14807a 0%, #0c4e4a 100%);
  border-color: rgba(165, 180, 252, 0.45);
}

html.dark .marketing-about-final-cta__btn--secondary {
  color: #e0e7ff;
  background: rgba(30, 41, 59, 0.72);
  border-color: rgba(165, 180, 252, 0.4);
}

html.dark .marketing-about-final-cta__btn--secondary:hover {
  background: rgba(51, 65, 85, 0.85);
}

.marketing-about-final-cta__btn:focus-visible {
  outline: 2px solid #2dd4bf;
  outline-offset: 2px;
}

.marketing-about-platform-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

.marketing-about-platform-stack {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketing-about-platform-stack li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  border-radius: 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgb(226 232 240 / 0.92);
  background: rgb(255 255 255 / 0.88);
  box-shadow: 0 12px 32px -26px rgb(15 23 42 / 0.35);
}

html.dark .marketing-about-platform-stack li {
  border-color: rgb(51 65 85 / 0.9);
  background: rgb(30 41 59 / 0.72);
}

.marketing-about-platform-stack__num {
  display: inline-flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f0fdfa;
  color: #0c4e4a;
  font-size: 0.82rem;
  font-weight: 900;
}

html.dark .marketing-about-platform-stack__num {
  background: rgb(12 78 74 / 0.28);
  color: #99f6e4;
}

.marketing-about-platform-stack strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
}

html.dark .marketing-about-platform-stack strong {
  color: #f8fafc;
}

.marketing-about-platform-stack p {
  margin: 0;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.45;
}

html.dark .marketing-about-platform-stack p {
  color: #cbd5e1;
}

@media (max-width: 767px) {
  .marketing-about-flow-track {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .marketing-about-flow-track__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0.85rem;
    padding: 0;
  }

  .marketing-about-flow-track__step:not(:last-child)::after {
    display: none;
  }

  .marketing-about-flow-track__badge {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .marketing-about-audience-grid,
  .marketing-about-platform-split,
  .marketing-about-product-split {
    grid-template-columns: 1fr;
  }
}

/* Marketing About + homepage: scroll reveals (paired with aboutScrollReveal.js) */
/* Keep native scrolling — smooth-behavior fights wheel/trackpad + motion and feels laggy. */
html:has(:is(body.marketing-about-body, body.marketing-landing-body)) {
  scroll-behavior: auto;
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  -webkit-transform: translate3d(0, 1.75rem, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--about-reveal-delay, 0ms);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--hero {
  transform: translate3d(0, 1.5rem, 0);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--hero-mock {
  transform: translate3d(1.25rem, 1rem, 0) scale(0.96);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--hero-mock.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--section {
  transform: translate3d(0, 2rem, 0);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--card {
  transform: translate3d(0, 1.5rem, 0) scale(0.96);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--card.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--left {
  transform: translate3d(-1.5rem, 0.75rem, 0);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--right {
  transform: translate3d(1.5rem, 0.75rem, 0);
}

/* --left/--right sit after .is-visible in the cascade; reset once revealed so
   mobile section overflow-x:clip does not shear the App Store badge. */
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--left.is-visible,
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--right.is-visible {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow-step {
  transform: translate3d(0, 1.5rem, 0) scale(0.96);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow-step.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow-step .marketing-about-flow-step__num {
  opacity: 0;
  transform: scale(0.75);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow-step.is-visible .marketing-about-flow-step__num {
  animation: marketing-landing-flow-num-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--about-reveal-delay, 0ms) + 80ms);
}

/* Listing grid: one reveal target; children stagger via CSS (avoids N IO + N paint storms) */
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid {
  opacity: 1;
  transform: none;
  transition: none;
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid > [role="listitem"] {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(1) {
  transition-delay: 0ms;
}
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(2) {
  transition-delay: 60ms;
}
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(3) {
  transition-delay: 120ms;
}
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(4) {
  transition-delay: 180ms;
}
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(5) {
  transition-delay: 240ms;
}
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(6) {
  transition-delay: 300ms;
}
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(7) {
  transition-delay: 360ms;
}
:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"]:nth-child(n + 8) {
  transition-delay: 400ms;
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid.is-visible > [role="listitem"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow {
  opacity: 1;
  transform: none;
  transition: none;
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow .marketing-about-flow-track__badge {
  transform: scale(0.82);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--about-reveal-delay, 0ms) + 40ms);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow .marketing-about-flow-track__body {
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--about-reveal-delay, 0ms) + 90ms);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow.is-visible .marketing-about-flow-track__badge {
  transform: scale(1);
  opacity: 1;
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow.is-visible .marketing-about-flow-track__body {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow:not(:last-child)::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--about-reveal-delay, 0ms) + 140ms);
}

:is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow.is-visible:not(:last-child)::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  :is(body.marketing-about-body, body.marketing-landing-body) .about-reveal,
  :is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow .marketing-about-flow-track__badge,
  :is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow .marketing-about-flow-track__body,
  :is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow-step .marketing-about-flow-step__num,
  :is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--listing-grid > [role="listitem"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  :is(body.marketing-about-body, body.marketing-landing-body) .about-reveal--flow:not(:last-child)::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  :is(body.marketing-about-body, body.marketing-landing-body) .marketing-landing-bg-orbs > div {
    transform: none !important;
  }

  body.marketing-landing-body .marketing-about-hero .marketing-landing-hero-mock,
  body.marketing-landing-body .marketing-about-hero .marketing-landing-hero-mock .rounded-full.bg-emerald-500,
  body.marketing-about-body .marketing-landing-hero-mock,
  body.marketing-about-body .marketing-about-booking-mock,
  body.marketing-about-body .marketing-landing-hero-mock .rounded-full.bg-emerald-500 {
    animation: none !important;
  }

  body.marketing-about-body .marketing-about-contrast-row,
  body.marketing-about-body .marketing-about-audience-card {
    transition: none !important;
  }
}

/* About + landing: restrained card float (post-reveal). Hover on fine pointers; ambient on touch. */
@media (prefers-reduced-motion: no-preference) {
  body.marketing-about-body .marketing-about-contrast-row.about-reveal.is-visible,
  body.marketing-about-body .marketing-about-audience-card.about-reveal.is-visible,
  body.marketing-landing-body .marketing-about-audience-card.about-reveal.is-visible {
    transition:
      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.28s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    body.marketing-about-body .marketing-about-contrast-row.about-reveal.is-visible:hover {
      transform: translate3d(0, -0.08rem, 0);
      box-shadow: 0 12px 28px -22px rgb(15 23 42 / 0.28);
    }

    body.marketing-about-body .marketing-about-audience-card.about-reveal.is-visible:hover,
    body.marketing-landing-body .marketing-about-audience-card.about-reveal.is-visible:hover {
      transform: translate3d(0, -0.12rem, 0);
    }

    body.marketing-about-body .marketing-about-audience-card--renter.about-reveal.is-visible:hover {
      box-shadow: 0 18px 40px -24px rgb(15 90 86 / 0.48);
    }

    body.marketing-about-body .marketing-about-audience-card--host.about-reveal.is-visible:hover {
      box-shadow:
        0 20px 44px -22px rgb(15 23 42 / 0.65),
        inset 0 1px 0 rgb(255 255 255 / 0.08);
    }
  }

  /* Touch / coarse: hover never fires — give revealed cards a soft ambient levitate */
  @media (hover: none), (pointer: coarse) {
    body.marketing-about-body .marketing-about-contrast-row.about-reveal.is-visible,
    body.marketing-about-body .marketing-about-audience-card.about-reveal.is-visible,
    body.marketing-landing-body .marketing-about-audience-card.about-reveal.is-visible {
      animation: marketing-landing-card-float-soft 5.25s ease-in-out infinite;
    }

    body.marketing-about-body .marketing-about-contrast-row.about-reveal.is-visible:nth-child(2n),
    body.marketing-about-body .marketing-about-audience-card.about-reveal.is-visible:nth-child(2n),
    body.marketing-landing-body .marketing-about-audience-card.about-reveal.is-visible:nth-child(2n) {
      animation-delay: -1.4s;
    }
  }

  html.marketing-is-scrolling body.marketing-about-body .marketing-about-contrast-row.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-about-body .marketing-about-audience-card.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-landing-body .marketing-about-audience-card.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-about-body .marketing-landing-hero-mock.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-about-body .marketing-about-booking-mock.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-landing-body .marketing-hero-listing-showcase.about-reveal.is-visible,
  html.marketing-is-scrolling body.marketing-about-body .marketing-hero-listing-showcase.about-reveal.is-visible {
    animation-play-state: paused;
  }

  html.marketing-is-scrolling body.marketing-about-body .marketing-about-contrast-row.about-reveal.is-visible:hover,
  html.marketing-is-scrolling body.marketing-about-body .marketing-about-audience-card.about-reveal.is-visible:hover,
  html.marketing-is-scrolling body.marketing-landing-body .marketing-about-audience-card.about-reveal.is-visible:hover {
    transform: translate3d(0, 0, 0);
  }
}

/* About page — space tags, product split, host vision */
.marketing-about-space-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketing-about-space-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.55rem 0.95rem 0.55rem 0.75rem;
  border: 1px solid rgb(153 246 228 / 0.9);
  background:
    linear-gradient(135deg, rgb(240 253 250 / 0.75), rgb(255 255 255 / 0.95));
  color: #334155;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 10px 28px -20px rgb(15 90 86 / 0.5);
}

.marketing-about-space-tags li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgb(20 128 122 / 0.12);
  color: #0f5a56;
  font-size: 0.72rem;
  flex-shrink: 0;
}

html.dark .marketing-about-space-tags li {
  border-color: rgb(12 78 74 / 0.45);
  background:
    linear-gradient(135deg, rgb(8 63 60 / 0.35), rgb(30 41 59 / 0.85));
  color: #e2e8f0;
}

html.dark .marketing-about-space-tags li i {
  background: rgb(45 212 191 / 0.18);
  color: #5eead4;
}

.marketing-about-product-split .marketing-about-platform-panel {
  max-width: none;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.marketing-about-product-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1.25rem;
  align-items: stretch;
}

@media (max-width: 899px) {
  .marketing-about-product-split {
    grid-template-columns: 1fr;
  }
}

.marketing-about-booking-mock {
  height: 100%;
}

.marketing-about-booking-mock .rounded-full.bg-emerald-500 {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
}

.marketing-about-vision-pill {
  display: inline-flex;
  align-items: center;
  margin-right: 0.35rem;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  background: rgb(20 128 122 / 0.14);
  color: #0c4e4a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

html.dark .marketing-about-vision-pill {
  background: rgb(45 212 191 / 0.2);
  color: #99f6e4;
}

/* Homepage live listing grid (Airbnb-style browse preview) */
.homepage-listing-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .homepage-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
  }
}

@media (min-width: 1024px) {
  .homepage-listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.homepage-listing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 0.875rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.homepage-listing-card:hover,
.homepage-listing-card:focus-visible {
  transform: translateY(-2px);
}

.homepage-listing-card:focus-visible {
  outline: 2px solid rgb(20 128 122 / 0.65);
  outline-offset: 3px;
}

.homepage-listing-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0.875rem;
  overflow: hidden;
  background: rgb(241 245 249);
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.05),
    0 0 0 1px rgb(15 23 42 / 0.04);
}

html.dark .homepage-listing-card__media {
  background: rgb(30 41 59);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.25),
    0 0 0 1px rgb(148 163 184 / 0.12);
}

.homepage-listing-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.homepage-listing-card:hover .homepage-listing-card__photo,
.homepage-listing-card:focus-visible .homepage-listing-card__photo {
  transform: scale(1.03);
}

.homepage-listing-card__photo--placeholder {
  background: linear-gradient(145deg, rgb(226 232 240), rgb(203 213 225));
}

html.dark .homepage-listing-card__photo--placeholder {
  background: linear-gradient(145deg, rgb(51 65 85), rgb(30 41 59));
}

.homepage-listing-card__chip {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 1;
}

.homepage-listing-card__type-chip {
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

/* Dark mode: chips sit on photos — opaque panel + brighter text so labels stay readable */
html.dark .homepage-listing-card__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3.75rem;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(15 23 42 / 0.62), transparent);
}

html.dark .homepage-listing-card__type-chip {
  /* Prefer solid fills over blur — cheaper while scrolling past listing photos */
  box-shadow:
    0 2px 10px rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(255 255 255 / 0.08);
}

html.dark .homepage-listing-card__type-chip.bg-blue-100 {
  background-color: rgb(30 64 175 / 0.95) !important;
  color: #eff6ff !important;
  border-color: rgb(147 197 253 / 0.7) !important;
}

html.dark .homepage-listing-card__type-chip.bg-purple-100 {
  background-color: rgb(107 33 168 / 0.95) !important;
  color: #f3e8ff !important;
  border-color: rgb(216 180 254 / 0.7) !important;
}

html.dark .homepage-listing-card__type-chip.bg-indigo-100 {
  background-color: rgb(12 78 74 / 0.95) !important;
  color: #f0fdfa !important;
  border-color: rgb(165 180 252 / 0.7) !important;
}

.homepage-listing-card__body {
  padding: 0.65rem 0.15rem 0.25rem;
}

.homepage-listing-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgb(15 23 42);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.dark .homepage-listing-card__title {
  color: rgb(248 250 252);
}

.homepage-listing-card__location {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgb(100 116 139);
}

html.dark .homepage-listing-card__location {
  color: rgb(148 163 184);
}

.homepage-listing-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.homepage-listing-card__price {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(15 23 42);
}

html.dark .homepage-listing-card__price {
  color: rgb(248 250 252);
}

.homepage-listing-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(15 23 42);
  white-space: nowrap;
}

html.dark .homepage-listing-card__rating {
  color: rgb(248 250 252);
}

.homepage-listing-card__star {
  width: 0.85rem;
  height: 0.85rem;
  color: rgb(245 158 11);
}

.homepage-listing-empty {
  border: 1px solid rgb(226 232 240);
  background: rgb(255 255 255 / 0.92);
}

html.dark .homepage-listing-empty {
  border-color: rgb(51 65 85);
  background: rgb(15 23 42 / 0.55);
}

/* Sparse mid-page grids (when hero did not already show the same 1–2 cards) */
.homepage-listing-grid--single {
  max-width: 22rem;
  margin-inline: auto;
}

.homepage-listing-grid--pair {
  max-width: 40rem;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .homepage-listing-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .homepage-listing-grid--single,
  .homepage-listing-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .homepage-listing-grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 22rem;
  }
}

.marketing-featured-listings-bridge {
  border: 1px solid rgb(226 232 240 / 0.95);
  background: rgb(255 255 255 / 0.88);
}

html.dark .marketing-featured-listings-bridge {
  border-color: rgb(51 65 85 / 0.9);
  background: rgb(15 23 42 / 0.55);
}

/* Hero live listing showcase (1–2 real photos, not UI mock) */
.marketing-hero-listing-showcase {
  min-width: 0;
  width: 100%;
}

.marketing-hero-listing-showcase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.85rem;
}

.marketing-hero-listing-showcase__eyebrow {
  margin: 0;
  color: #14807a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html.dark .marketing-hero-listing-showcase__eyebrow {
  color: #5eead4;
}

.marketing-hero-listing-showcase__count {
  margin: 0;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 600;
}

html.dark .marketing-hero-listing-showcase__count {
  color: #94a3b8;
}

.marketing-hero-listing-showcase__grid {
  display: grid;
  gap: 0.85rem;
}

.marketing-hero-listing-showcase--1 .marketing-hero-listing-showcase__grid {
  max-width: 26rem;
  margin-inline: auto;
}

.marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: stretch;
    gap: 0.75rem;
  }
}

.marketing-hero-listing-showcase--1 .homepage-listing-card__media {
  aspect-ratio: 16 / 11;
}

.marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__item--primary .homepage-listing-card__media {
  aspect-ratio: 4 / 3;
}

.marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__item:not(.marketing-hero-listing-showcase__item--primary) .homepage-listing-card__media {
  aspect-ratio: 1 / 1;
}

@media (min-width: 480px) {
  .marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__item:not(.marketing-hero-listing-showcase__item--primary) .homepage-listing-card__title {
    font-size: 0.92rem;
  }

  .marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__item:not(.marketing-hero-listing-showcase__item--primary) .homepage-listing-card__location,
  .marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__item:not(.marketing-hero-listing-showcase__item--primary) .homepage-listing-card__price {
    font-size: 0.78rem;
  }
}

.marketing-hero-listing-showcase__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  color: #0f5a56;
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}

.marketing-hero-listing-showcase__map-link:hover {
  color: #3730a3;
}

html.dark .marketing-hero-listing-showcase__map-link {
  color: #5eead4;
}

html.dark .marketing-hero-listing-showcase__map-link:hover {
  color: #99f6e4;
}

.marketing-hero-listing-showcase--empty {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240 / 0.95);
  background: rgb(255 255 255 / 0.9);
  padding: 1.35rem 1.25rem;
  text-align: center;
}

html.dark .marketing-hero-listing-showcase--empty {
  border-color: rgb(51 65 85 / 0.9);
  background: rgb(15 23 42 / 0.55);
}

.marketing-hero-listing-showcase__empty-title {
  margin: 0.55rem 0 0.4rem;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.35;
}

html.dark .marketing-hero-listing-showcase__empty-title {
  color: #f8fafc;
}

.marketing-hero-listing-showcase__empty-body {
  margin: 0 0 1rem;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.5;
}

html.dark .marketing-hero-listing-showcase__empty-body {
  color: #94a3b8;
}

.marketing-hero-listing-showcase__empty-cta {
  display: inline-flex;
}

/* About hero: compact framed live-listings panel (tight vertical rhythm) */
.marketing-hero-listing-showcase--about:not(.marketing-hero-listing-showcase--empty) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding: 0.7rem 0.75rem 0.65rem;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240 / 0.95);
  background:
    linear-gradient(165deg, rgb(255 255 255 / 0.97), rgb(248 250 252 / 0.9));
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.75) inset,
    0 14px 32px -24px rgb(15 23 42 / 0.22);
}

html.dark .marketing-hero-listing-showcase--about:not(.marketing-hero-listing-showcase--empty) {
  border-color: rgb(71 85 105 / 0.85);
  background:
    linear-gradient(165deg, rgb(30 41 59 / 0.78), rgb(15 23 42 / 0.62));
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.04) inset,
    0 14px 32px -22px rgb(0 0 0 / 0.55);
}

.marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__head {
  margin-bottom: 0;
  gap: 0.2rem 0.75rem;
  align-items: center;
}

.marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__count {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: #64748b;
}

html.dark .marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__count {
  color: #94a3b8;
}

.marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__grid {
  gap: 0.5rem;
}

.marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--1 .marketing-hero-listing-showcase__grid {
  max-width: none;
  margin-inline: 0;
}

.marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: start;
  gap: 0.5rem;
}

.marketing-hero-listing-showcase--about .homepage-listing-card {
  border-radius: 0.7rem;
}

.marketing-hero-listing-showcase--about .homepage-listing-card:hover,
.marketing-hero-listing-showcase--about .homepage-listing-card:focus-visible {
  transform: translateY(-1px);
}

.marketing-hero-listing-showcase--about .homepage-listing-card__media {
  border-radius: 0.7rem;
  aspect-ratio: 16 / 11;
}

.marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--2
  .marketing-hero-listing-showcase__item--primary
  .homepage-listing-card__media {
  aspect-ratio: 16 / 11;
}

.marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--2
  .marketing-hero-listing-showcase__item:not(.marketing-hero-listing-showcase__item--primary)
  .homepage-listing-card__media {
  aspect-ratio: 5 / 4;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__chip {
  top: 0.45rem;
  left: 0.45rem;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__type-chip {
  padding: 0.12rem 0.4rem;
  font-size: 0.65rem;
  line-height: 1.2;
  border-radius: 0.35rem;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__type-chip svg {
  width: 0.65rem;
  height: 0.65rem;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__body {
  padding: 0.4rem 0.1rem 0.05rem;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__title {
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
  -webkit-line-clamp: 1;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__location {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  line-height: 1.25;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__meta {
  margin-top: 0.2rem;
}

.marketing-hero-listing-showcase--about .homepage-listing-card__price {
  font-size: 0.75rem;
  line-height: 1.25;
}

.marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__map-link {
  margin-top: 0.1rem;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.2;
  align-self: flex-start;
}

.marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__map-link svg {
  width: 0.9rem;
  height: 0.9rem;
}

.marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--empty {
  max-width: 28rem;
  margin-inline: auto;
  padding: 1rem 0.95rem;
}

@media (min-width: 1024px) {
  .marketing-hero-listing-showcase--about:not(.marketing-hero-listing-showcase--empty) {
    max-width: none;
    margin-inline: 0;
    padding: 0.8rem 0.85rem 0.7rem;
    gap: 0.55rem;
  }

  .marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__grid {
    gap: 0.55rem;
  }

  .marketing-hero-listing-showcase--about .homepage-listing-card__title {
    font-size: 0.88rem;
  }

  .marketing-hero-listing-showcase--about .homepage-listing-card__location {
    font-size: 0.75rem;
  }

  .marketing-hero-listing-showcase--about .homepage-listing-card__price {
    font-size: 0.78rem;
  }
}

.marketing-hero-stripe-trust {
  margin-top: 1rem;
}

.marketing-hero-stripe-trust .swiftspot-stripe-trust-inline {
  margin-top: 0;
}

.marketing-hero-stripe-trust--center-mobile {
  text-align: center;
}

.marketing-hero-stripe-trust--center-mobile .swiftspot-stripe-trust-inline__row {
  justify-content: center;
}

@media (min-width: 1024px) {
  .marketing-hero-stripe-trust--center-mobile {
    text-align: left;
  }

  .marketing-hero-stripe-trust--center-mobile .swiftspot-stripe-trust-inline__row {
    justify-content: flex-start;
  }
}

.marketing-platform-trust-line {
  margin: 0.85rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid rgb(148 163 184 / 0.28);
  max-width: 34rem;
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
}

html.dark .marketing-platform-trust-line {
  border-top-color: rgb(71 85 105 / 0.55);
  color: #94a3b8;
}

.marketing-platform-trust-line__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.marketing-platform-trust-line__link:hover {
  text-decoration-color: currentColor;
}

.marketing-platform-trust-line--center-mobile {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (min-width: 1024px) {
  .marketing-platform-trust-line--center-mobile {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }
}

/* Platform authority strip — single quiet trust bar (not a 4-up feature grid) */
.marketing-platform-trust-strip {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid rgb(148 163 184 / 0.28);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0;
  row-gap: 0.35rem;
  max-width: 34rem;
}

html.dark .marketing-platform-trust-strip {
  border-top-color: rgb(71 85 105 / 0.55);
}

.marketing-platform-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.005em;
}

.marketing-platform-trust-strip__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  margin-left: 0.55rem;
  margin-right: 0.55rem;
  border-radius: 999px;
  background: rgb(148 163 184 / 0.85);
  flex: 0 0 auto;
}

html.dark .marketing-platform-trust-strip__item {
  color: #94a3b8;
}

html.dark .marketing-platform-trust-strip__item:not(:last-child)::after {
  background: rgb(100 116 139 / 0.9);
}

.marketing-platform-trust-strip__icon {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0;
  color: #64748b;
  opacity: 0.9;
}

html.dark .marketing-platform-trust-strip__icon {
  color: #94a3b8;
}

.marketing-platform-trust-strip__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.marketing-platform-trust-strip__link:hover {
  text-decoration-color: currentColor;
}

.marketing-platform-trust-strip--center-mobile {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

@media (min-width: 1024px) {
  .marketing-platform-trust-strip--center-mobile {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
  }
}

.marketing-about-hero-support .marketing-platform-trust-strip {
  max-width: none;
}

/* Verified host on marketing cards — same quiet chip language as marketplace */
.homepage-listing-card__verified {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.2rem;
  margin: 0.4rem 0 0;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  background: rgba(120, 113, 108, 0.1);
  color: #44403c;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

html.dark .homepage-listing-card__verified {
  background: rgba(168, 162, 158, 0.16);
  color: #e7e5e4;
}

.homepage-listing-card__verified-icon {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.9;
}

/* Stacked hero follows reading and keyboard order: introduction, action, listings. */
@media (max-width: 1023px) {
  .marketing-hero-split {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
  }

  .marketing-about-hero {
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }

  .marketing-about-hero-copy {
    align-items: center;
    text-align: center;
    max-width: none;
  }

  .marketing-about-hero .marketing-about-kicker {
    margin-bottom: 0.4rem;
  }

  .marketing-about-hero-title {
    font-size: clamp(1.55rem, 6.2vw, 1.9rem);
    line-height: 1.14;
    margin-bottom: 0.6rem;
    max-width: 16em;
  }

  .marketing-about-hero-lead,
  .marketing-about-hero .marketing-hero-lead {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
  }

  .marketing-about-hero-support {
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.9rem;
    max-width: 28rem;
  }

  /* Optional legacy hide (homepage may still use desktop-only metrics) */
  body.marketing-landing-body .marketing-about-hero-metrics--desktop-only {
    display: none !important;
  }

  /* About: keep journey teaser on mobile — compact 3-up row */
  body.marketing-about-body .marketing-about-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.65rem;
    justify-content: stretch;
    text-align: left;
  }

  body.marketing-about-body .marketing-about-hero-metrics li {
    padding: 0;
  }

  body.marketing-about-body .marketing-about-hero-metrics li:not(:last-child) {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }

  body.marketing-about-body .marketing-about-hero-metrics span {
    font-size: 0.625rem;
  }

  body.marketing-about-body .marketing-about-hero-metrics strong {
    font-size: 0.78rem;
    line-height: 1.3;
  }

  body.marketing-about-body .marketing-about-hero-support .marketing-hero-stripe-trust {
    margin-top: 0.95rem;
  }

  .marketing-about-hero-support .marketing-hero-stripe-trust {
    margin-top: 0;
  }

  .marketing-hero-actions {
    gap: 0.55rem !important;
  }

  .marketing-about-hero a.marketing-landing-cta-primary,
  .marketing-about-hero a.marketing-landing-cta-secondary {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
  }

  .marketing-about-hero a.marketing-hero-actions__secondary {
    width: auto;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.15rem;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #0f5a56;
    font-size: 0.875rem;
    font-weight: 650;
  }

  html.dark .marketing-about-hero a.marketing-hero-actions__secondary {
    color: #5eead4;
    background: transparent;
    border: none;
  }

  .marketing-landing-bg-orbs {
    opacity: 0.45;
  }

  .marketing-hero-stripe-trust {
    margin-top: 0.7rem;
  }

  .marketing-hero-listing-showcase__head {
    margin-bottom: 0.55rem;
  }

  .marketing-hero-listing-showcase__eyebrow {
    font-size: 0.62rem;
  }

  .marketing-hero-listing-showcase__count {
    font-size: 0.8125rem;
  }

  .marketing-hero-listing-showcase__grid {
    gap: 0.55rem;
  }

  .marketing-hero-listing-showcase--1 .marketing-hero-listing-showcase__grid {
    max-width: none;
  }

  .marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .marketing-hero-listing-showcase--1 .homepage-listing-card__media,
  .marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__item--primary .homepage-listing-card__media,
  .marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__item:not(.marketing-hero-listing-showcase__item--primary) .homepage-listing-card__media {
    aspect-ratio: 5 / 4;
  }

  .marketing-hero-listing-showcase .homepage-listing-card__body {
    padding-top: 0.45rem;
  }

  .marketing-hero-listing-showcase .homepage-listing-card__title {
    font-size: 0.86rem;
    line-height: 1.25;
  }

  .marketing-hero-listing-showcase .homepage-listing-card__location,
  .marketing-hero-listing-showcase .homepage-listing-card__price {
    font-size: 0.8125rem;
  }

  .marketing-hero-listing-showcase__map-link {
    margin-top: 0.55rem;
    font-size: 0.8rem;
  }

  .marketing-hero-listing-showcase--empty {
    padding: 1rem 0.95rem;
  }

  /* About showcase: keep compact frame (override denser-hero card relax rules) */
  .marketing-hero-listing-showcase--about:not(.marketing-hero-listing-showcase--empty) {
    padding: 0.6rem 0.65rem 0.55rem;
    gap: 0.4rem;
  }

  .marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__head {
    margin-bottom: 0;
  }

  .marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__grid {
    gap: 0.4rem;
  }

  .marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--2 .marketing-hero-listing-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marketing-hero-listing-showcase--about .homepage-listing-card__media,
  .marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--1 .homepage-listing-card__media,
  .marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--2
    .marketing-hero-listing-showcase__item--primary
    .homepage-listing-card__media,
  .marketing-hero-listing-showcase--about.marketing-hero-listing-showcase--2
    .marketing-hero-listing-showcase__item:not(.marketing-hero-listing-showcase__item--primary)
    .homepage-listing-card__media {
    aspect-ratio: 3 / 2;
  }

  .marketing-hero-listing-showcase--about .homepage-listing-card__body {
    padding: 0.32rem 0.1rem 0.05rem;
  }

  .marketing-hero-listing-showcase--about .homepage-listing-card__title {
    font-size: 0.78rem;
    line-height: 1.22;
  }

  .marketing-hero-listing-showcase--about .homepage-listing-card__location,
  .marketing-hero-listing-showcase--about .homepage-listing-card__price {
    font-size: 0.8125rem;
  }

  .marketing-hero-listing-showcase--about .marketing-hero-listing-showcase__map-link {
    margin-top: 0.05rem;
    font-size: 0.75rem;
  }

  body.marketing-landing-body section.py-8,
  body.marketing-landing-body section.py-10,
  body.marketing-about-body .marketing-about-section,
  body.marketing-about-body .marketing-about-section-alt {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  body.marketing-about-body .marketing-about-section--after-hero {
    padding-top: 1.75rem !important;
  }

  .marketing-about-platform-panel,
  .marketing-about-audience-card,
  .marketing-landing-mock.rounded-2xl {
    padding: 1.1rem 1rem !important;
    border-radius: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.marketing-landing-body .marketing-about-hero .marketing-hero-listing-showcase,
  body.marketing-about-body .marketing-hero-listing-showcase,
  body.marketing-about-body .marketing-about-contrast-row,
  body.marketing-about-body .marketing-about-audience-card,
  body.marketing-landing-body .marketing-about-audience-card {
    animation: none !important;
  }
}

/* Marketing proof strip — real counts only */
.marketing-proof-strip {
  margin: 1rem 0 0;
}
.marketing-proof-strip__list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid rgb(148 163 184 / 0.28);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  max-width: 36rem;
}
html.dark .marketing-proof-strip__list {
  border-top-color: rgb(71 85 105 / 0.55);
}
.marketing-proof-strip__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 5.5rem;
}
.marketing-proof-strip__value {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}
html.dark .marketing-proof-strip__value {
  color: #f8fafc;
}
.marketing-proof-strip__label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.3;
}
html.dark .marketing-proof-strip__label {
  color: #94a3b8;
}
.marketing-proof-strip--center-mobile .marketing-proof-strip__list {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
@media (min-width: 1024px) {
  .marketing-proof-strip--center-mobile .marketing-proof-strip__list {
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
  }
}
.marketing-proof-strip--host .marketing-proof-strip__list {
  max-width: none;
  border-top-color: rgb(148 163 184 / 0.35);
}

/* You are covered — Guarantee · Support · Cancellation */
.marketing-youre-covered {
  border-bottom: 1px solid rgb(226 232 240 / 0.8);
}
html.dark .marketing-youre-covered {
  border-bottom-color: rgb(30 41 59);
}
.marketing-youre-covered__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .marketing-youre-covered__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}
.marketing-youre-covered__card {
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240 / 0.95);
  background: rgb(255 255 255 / 0.72);
}
html.dark .marketing-youre-covered__card {
  border-color: rgb(51 65 85 / 0.9);
  background: rgb(15 23 42 / 0.55);
}
.marketing-youre-covered__title {
  margin: 0 0 0.45rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
html.dark .marketing-youre-covered__title {
  color: #f8fafc;
}
.marketing-youre-covered__body {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #475569;
}
html.dark .marketing-youre-covered__body {
  color: #94a3b8;
}
.marketing-youre-covered__link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f766e;
  text-decoration: none;
}
.marketing-youre-covered__link:hover {
  text-decoration: underline;
}
html.dark .marketing-youre-covered__link {
  color: #5eead4;
}
.marketing-youre-covered__footer {
  margin: 1.5rem 0 0;
}

/* Real booking-backed reviews (gated — omit when empty) */
.marketing-real-reviews {
  border-bottom: 1px solid rgb(226 232 240 / 0.8);
}
html.dark .marketing-real-reviews {
  border-bottom-color: rgb(30 41 59);
}
.marketing-real-reviews__sub,
.marketing-real-reviews__aggregate {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #64748b;
}
html.dark .marketing-real-reviews__sub,
html.dark .marketing-real-reviews__aggregate {
  color: #94a3b8;
}
.marketing-real-reviews__aggregate {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.55rem;
}
.marketing-real-reviews__stars,
.marketing-real-reviews__card-stars {
  display: inline-flex;
  gap: 0.05rem;
  letter-spacing: 0.02em;
}
.marketing-real-reviews__star {
  color: #cbd5e1;
  font-size: 0.85rem;
  line-height: 1;
}
.marketing-real-reviews__star.is-on {
  color: #ca8a04;
}
html.dark .marketing-real-reviews__star {
  color: #475569;
}
html.dark .marketing-real-reviews__star.is-on {
  color: #eab308;
}
.marketing-real-reviews__avg {
  font-weight: 700;
  color: #0f172a;
}
html.dark .marketing-real-reviews__avg {
  color: #f8fafc;
}
.marketing-real-reviews__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .marketing-real-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .marketing-real-reviews__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.marketing-real-reviews__card {
  margin: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240 / 0.95);
  background: rgb(255 255 255 / 0.72);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}
html.dark .marketing-real-reviews__card {
  border-color: rgb(51 65 85 / 0.9);
  background: rgb(15 23 42 / 0.55);
}
.marketing-real-reviews__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.marketing-real-reviews__verified {
  font-size: 0.6875rem;
  font-weight: 650;
  color: #0f766e;
  white-space: nowrap;
}
html.dark .marketing-real-reviews__verified {
  color: #5eead4;
}
.marketing-real-reviews__quote {
  margin: 0;
  flex: 1 1 auto;
}
.marketing-real-reviews__quote p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #334155;
}
html.dark .marketing-real-reviews__quote p {
  color: #cbd5e1;
}
.marketing-real-reviews__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
  font-size: 0.75rem;
  color: #64748b;
}
html.dark .marketing-real-reviews__meta {
  color: #94a3b8;
}
.marketing-real-reviews__author {
  font-weight: 650;
  color: #0f172a;
}
html.dark .marketing-real-reviews__author {
  color: #e2e8f0;
}
.marketing-real-reviews__spot {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Focus remains visible on text links and cards in either theme. */
body:is(.marketing-landing-body, .marketing-about-body) main a:focus-visible {
  outline: 3px solid #0f766e;
  outline-offset: 4px;
}

html.dark body:is(.marketing-landing-body, .marketing-about-body) main a:focus-visible {
  outline-color: #5eead4;
}

#about-story {
  scroll-margin-top: 7rem;
}

.marketing-hero-copy h1 {
  text-wrap: balance;
}

/* Explicit columns: marketing pages must not depend on generated arbitrary utilities. */
@media (min-width: 1024px) {
  body.marketing-about-body .marketing-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.marketing-about-hero-support .marketing-platform-trust-strip {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.marketing-hero-actions__secondary {
  gap: 0.5rem;
}

/* Trust content uses quiet separators so policy details remain easy to scan. */
.marketing-trust-page .marketing-landing-bg-orbs { display: none; }
.marketing-trust-page .trust-principle {
  padding: 1.25rem 0;
  border-top: 1px solid rgb(148 163 184 / 24%);
}
.marketing-trust-page .trust-principle h3 { color: inherit; }
@media (max-width: 639px) {
  .marketing-trust-page .marketing-about-hero { padding-block: 2rem; }
  .marketing-trust-page #trust-hero-heading {
    font-size: 2rem;
    line-height: 1.16;
    letter-spacing: -0.035em;
  }
}