/* Events landing - Crony bold inspo, light + dark via prefers-color-scheme */
:root {
 --land-bg: #0A0A09;
 --land-surface: #141412;
 --land-text: #F5F4F0;
 --land-muted: #9A9790;
 --land-line: rgba(245, 244, 240, 0.12);
 --land-nav-bg: rgba(10, 10, 9, 0.82);
 --land-fade: rgba(10, 10, 9, 1);
 --land-fade-soft: rgba(10, 10, 9, 0.55);
 --land-card: #161614;
 --land-on-grad: #12110f;
 --land-ink-bg: #F5F4F0;
 --land-ink-fg: #12110f;
 --grad: linear-gradient(120deg, #95CEE9, #AFBAD7 40%, #D3B5D4 65%, #DCA0BC);
 --grad-soft: linear-gradient(135deg, rgba(149,206,233,0.4), rgba(220,160,188,0.3));
 --display: "Archivo Black", "Arial Black", Impact, sans-serif;
 --body: "DM Sans", system-ui, -apple-system, sans-serif;
 --logo-on-dark: block;
 --logo-on-light: none;
 color-scheme: dark;
}
@media (prefers-color-scheme: light) {
 :root {
 --land-bg: #F0EEE9;
 --land-surface: #FFFFFF;
 --land-text: #1F1E1D;
 --land-muted: #6B6760;
 --land-line: rgba(31, 30, 29, 0.12);
 --land-nav-bg: rgba(240, 238, 233, 0.9);
 --land-fade: rgba(240, 238, 233, 1);
 --land-fade-soft: rgba(240, 238, 233, 0.65);
 --land-card: #FFFFFF;
 --land-on-grad: #12110f;
 --land-ink-bg: #12110f;
 --land-ink-fg: #fff;
 --logo-on-dark: none;
 --logo-on-light: block;
 color-scheme: light;
 }
}

body.on-home {
 background: var(--land-bg);
 color: var(--land-text);
 font-family: var(--body);
 scroll-behavior: smooth;
}
#find,
#join,
#host,
#faq,
#whats-on,
#how,
#loop {
 scroll-margin-top: 88px;
}

body.on-home .app {
 max-width: none !important;
 width: 100%;
 margin: 0;
 padding: 0 !important;
 min-height: 100dvh;
}

body.on-home .map-veil {
 display: none !important;
}

body.on-home > .map-bg {
 display: none !important;
}

#view-home {
 width: 100%;
 max-width: none;
 padding: 0;
}
/* .view.active is display:flex - keep full-bleed bands stretched, center content rails */
#view-home.view.active {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 width: 100%;
}
.land-hero,
.land-section {
 width: 100%;
 max-width: 1120px;
 margin-inline: auto;
 box-sizing: border-box;
}
.land-nav,
.map-band,
.marquee,
.land-footer {
 width: 100%;
 max-width: none;
 align-self: stretch;
}

.land-nav {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 40;
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 gap: 12px;
 padding: 14px clamp(18px, 4vw, 48px);
 background: var(--land-nav-bg);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom: none;
 transform: translateY(0);
 transition: transform 0.28s ease, opacity 0.2s ease, box-shadow 0.2s ease;
 will-change: transform;
}
.land-nav.is-hidden {
 transform: translateY(-110%);
 opacity: 0;
 pointer-events: none;
 box-shadow: none;
}
/* Invisible strip at top - hover to peek the nav when it's hidden */
.nav-peek-zone {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 18px;
 z-index: 41;
 pointer-events: none;
}
.nav-peek-zone.on {
 pointer-events: auto;
}
body.on-home #view-home {
 padding-top: 60px;
}
.land-nav .brand {
 display: flex;
 align-items: center;
 justify-content: center;
 justify-self: center;
 grid-column: 2;
 gap: 10px;
 text-decoration: none;
 color: inherit;
}
.land-nav .brand img {
 height: 28px;
 width: auto;
 display: block;
}
.land-nav .nav-jump {
 display: flex;
 grid-column: 1;
 justify-self: start;
 align-items: center;
 gap: 14px;
}
.land-nav .nav-mark {
 width: 22px;
 height: 22px;
 object-fit: contain;
 flex: 0 0 auto;
 display: block;
}
.land-nav .links {
 display: none;
 align-items: center;
 gap: 22px;
 margin-left: 0;
}
.land-nav .links a,
.land-nav .links button {
 font: inherit;
 font-size: 13px;
 font-weight: 600;
 color: var(--land-muted);
 background: none;
 border: none;
 cursor: pointer;
 text-decoration: none;
}
.land-nav .links a:hover,
.land-nav .links button:hover {
 color: var(--land-text);
}
.land-nav .nav-cta {
 grid-column: 3;
 justify-self: end;
 margin-left: 0;
 display: flex;
 align-items: center;
 gap: 10px;
}
.land-nav .user-chip {
 align-self: center;
 margin: 0;
 font-size: 12px;
}
.land-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 font: inherit;
 font-size: 13px;
 font-weight: 700;
 padding: 10px 18px;
 border-radius: 999px;
 border: 1.5px solid var(--land-line);
 background: transparent;
 color: var(--land-text);
 cursor: pointer;
 text-decoration: none;
}
.land-pill .ico {
 width: 15px;
 height: 15px;
}
.land-pill.ink-outline {
 border-color: var(--land-text);
 color: var(--land-text);
 background: transparent;
}
.land-pill.ink-outline:hover,
.land-pill.ink-outline:focus-visible {
 background: color-mix(in srgb, var(--land-text) 8%, transparent);
 outline: none;
}
.land-pill.solid {
 border: 1.5px solid transparent;
 color: #fff;
 background: linear-gradient(120deg, #95CEE9, #AFBAD7 30%, #D3B5D4 50%, #DCA0BC 70%, #D3B5D4 85%, #95CEE9);
 background-size: 250% 100%;
 animation: landShimmer 7s ease-in-out infinite, landBeat 5.6s ease-in-out infinite;
 box-shadow: 0 6px 24px rgba(220, 160, 188, 0.28);
 transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
/* Colourful → ink (white/black) on hover */
.land-pill.solid:hover,
.land-pill.solid:focus-visible {
 color: var(--land-ink-fg);
 border-color: var(--land-ink-bg);
 background: var(--land-ink-bg);
 background-size: auto;
 animation: none;
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
 filter: none;
 outline: none;
}
/* Outline gradient → solid shimmer fill on hover */
.land-pill.grad-outline {
 border: 1.5px solid transparent;
 color: var(--land-text);
 background:
 linear-gradient(var(--land-surface), var(--land-surface)) padding-box,
 linear-gradient(
 120deg,
 #95CEE9,
 #AFBAD7 30%,
 #D3B5D4 50%,
 #DCA0BC 70%,
 #D3B5D4 85%,
 #95CEE9
 ) border-box;
 background-size: auto, 280% 100%;
 background-origin: border-box;
 background-clip: padding-box, border-box;
 animation: catOutlineDance 6s ease-in-out infinite;
 box-shadow: none;
 transition: color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.land-pill.grad-outline:hover,
.land-pill.grad-outline:focus-visible {
 color: #fff;
 border-color: transparent;
 background: linear-gradient(120deg, #95CEE9, #AFBAD7 30%, #D3B5D4 50%, #DCA0BC 70%, #D3B5D4 85%, #95CEE9);
 background-size: 250% 100%;
 background-clip: border-box;
 animation: landShimmer 7s ease-in-out infinite, landBeat 5.6s ease-in-out infinite;
 box-shadow: 0 6px 24px rgba(220, 160, 188, 0.28);
 outline: none;
}
/* Inverse fill: black on light / white on dark → colourful on hover */
.land-pill.ink {
 border: 1.5px solid var(--land-ink-bg);
 background-color: var(--land-ink-bg);
 background-image: none;
 color: var(--land-ink-fg);
 transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}
.land-pill.ink:hover,
.land-pill.ink:focus-visible {
 color: #fff;
 border-color: transparent;
 background-color: transparent;
 background-image: linear-gradient(120deg, #95CEE9, #AFBAD7 30%, #D3B5D4 50%, #DCA0BC 70%, #D3B5D4 85%, #95CEE9);
 background-size: 250% 100%;
 animation: landShimmer 7s ease-in-out infinite, landBeat 5.6s ease-in-out infinite;
 box-shadow: 0 8px 28px rgba(220, 160, 188, 0.35);
 filter: none;
 outline: none;
}
/* How-it-works pills: make the colourful hover unmistakable */
.how-card .land-pill.ink:hover,
.how-card .land-pill.ink:focus-visible {
 color: #fff;
 border-color: transparent;
 background-image: linear-gradient(120deg, #95CEE9, #AFBAD7 30%, #D3B5D4 50%, #DCA0BC 70%, #D3B5D4 85%, #95CEE9);
 background-size: 250% 100%;
 box-shadow: 0 10px 32px rgba(220, 160, 188, 0.4);
}
@keyframes landShimmer {
 0%, 100% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
}
@keyframes landBeat {
 0%, 100% { transform: scale(1); }
 38% { transform: scale(0.985); }
 52% { transform: scale(1); }
 64% { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
 .land-nav {
 transition: none;
 }
 .land-nav.is-hidden {
 transform: none;
 opacity: 1;
 pointer-events: auto;
 }
 .nav-peek-zone {
 display: none;
 }
 .land-pill.solid,
 .land-pill.solid:hover,
 .land-pill.ink:hover,
 .land-pill.grad-outline,
 .land-pill.grad-outline:hover,
 .door-cta:hover,
 .door-cta:focus-visible,
 body.on-home .cat-chips span,
 body.on-home .cat-chips span:hover {
 animation: none;
 }
}

.land-hero {
 display: grid;
 gap: 28px;
 padding: 28px clamp(16px, 4vw, 48px) 24px;
 align-items: center;
}
.land-hero > div:first-child {
 max-width: 560px;
 min-width: 0;
}
.land-hero .kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--land-muted);
 border: 1px solid rgba(245, 244, 240, 0.16);
 border-radius: 999px;
 padding: 7px 12px;
 margin-bottom: 18px;
}
.land-hero h1 {
 font-family: var(--display);
 font-size: clamp(46px, 9.5vw, 82px);
 font-weight: 400;
 letter-spacing: -0.04em;
 line-height: 0.98;
 text-transform: uppercase;
 max-width: 11ch;
 overflow-wrap: normal;
 word-break: normal;
 hyphens: none;
 padding-bottom: 0.04em;
}
.land-hero h1 .grad {
 background: var(--grad);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
 display: inline;
 padding-bottom: 0.04em;
}
.land-hero .lede {
 margin-top: 18px;
 font-size: clamp(15px, 2vw, 18px);
 font-weight: 500;
 color: var(--land-muted);
 line-height: 1.55;
 max-width: 34em;
}
.door-row {
 display: grid;
 gap: 10px;
 margin-top: 28px;
}
.ico-sprite {
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}
.ico {
 width: 1.05em;
 height: 1.05em;
 display: inline-block;
 flex: 0 0 auto;
 vertical-align: -0.15em;
}
.door-lead {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}
.door-cta {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px;
 text-align: left;
 width: 100%;
 padding: 16px 18px;
 border-radius: 22px;
 border: 1.5px solid var(--land-line);
 background: var(--land-surface);
 color: var(--land-text);
 font: inherit;
 cursor: pointer;
 transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease, filter 0.15s ease;
}
.door-cta:hover,
.door-cta:focus-visible {
 border-color: transparent;
 color: #fff;
 transform: translateY(-1px);
 outline: none;
 background: linear-gradient(120deg, #95CEE9, #AFBAD7 30%, #D3B5D4 50%, #DCA0BC 70%, #D3B5D4 85%, #95CEE9);
 background-size: 250% 100%;
 animation: landShimmer 7s ease-in-out infinite;
 box-shadow: 0 8px 28px rgba(220, 160, 188, 0.32);
}
.door-cta:hover span,
.door-cta:focus-visible span {
 color: #fff;
 opacity: 0.88;
}
.door-cta strong {
 font-size: 16px;
 font-weight: 800;
}
.door-cta span {
 font-size: 13px;
 font-weight: 500;
 color: var(--land-muted);
 opacity: 1;
}
.trust-mini {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 16px;
 margin-top: 22px;
 font-size: 12px;
 font-weight: 600;
 color: var(--land-muted);
}
.trust-mini span {
 display: inline-flex;
 align-items: center;
 gap: 7px;
}
.trust-mini .ico {
 width: 14px;
 height: 14px;
}
.trust-mini span::before {
 content: none;
}

.hero-collage {
 position: relative;
 min-height: 280px;
 max-width: 100%;
 width: 100%;
 margin-inline: auto;
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 grid-template-rows: 1fr 1fr;
 gap: 12px;
 align-items: stretch;
}
.hero-collage .shot {
 position: relative;
 overflow: hidden;
 border-radius: 22px;
 background: #1a1a18;
 min-height: 0;
 height: 100%;
}
.hero-collage .shot img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.hero-collage .shot.tall {
 grid-row: 1 / -1;
 min-height: 260px;
}
.hero-collage .shot.offset {
 transform: none;
}
.hero-collage .tape {
 position: absolute;
 top: 12px;
 right: 14px;
 width: 54px;
 height: 18px;
 border-radius: 3px;
 background: rgba(245, 244, 240, 0.28);
 transform: rotate(12deg);
 pointer-events: none;
}
.ph-tag {
 position: absolute;
 left: 12px;
 bottom: 12px;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: 5px 8px;
 border-radius: 999px;
 background: rgba(0, 0, 0, 0.45);
 color: #fff;
}

/* Map band - soft fade into map (no ragged edge) */
.map-band {
 position: relative;
 margin: 12px 0 0;
 height: clamp(320px, 48vw, 520px);
 overflow: hidden;
 isolation: isolate;
}
.map-band-mask {
 position: absolute;
 inset: 0;
}
#homeMap.map-bg {
 position: absolute;
 inset: -20px;
 width: calc(100% + 40px);
 height: calc(100% + 40px);
 opacity: 1;
 pointer-events: none;
 z-index: 0;
}
#homeMap .leaflet-container {
 width: 100%;
 height: 100%;
 background: #0B1E26;
}
#homeMap .leaflet-control-attribution {
 display: none !important;
}
.map-band-wash {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 1;
 background:
 linear-gradient(180deg, var(--land-fade) 0%, transparent 28%, transparent 72%, var(--land-fade) 100%),
 linear-gradient(90deg, var(--land-fade-soft), transparent 22%, transparent 78%, var(--land-fade-soft)),
 var(--grad-soft);
 opacity: 1;
}
.map-band-label {
 position: absolute;
 /* Same rail as .land-section / .land-hero (1120px) */
 --map-label-pad: clamp(16px, 4vw, 48px);
 left: max(var(--map-label-pad), calc(50% - 560px + var(--map-label-pad)));
 top: 18%;
 z-index: 4;
 font-family: var(--display);
 font-size: clamp(26px, 5vw, 48px);
 letter-spacing: -0.02em;
 text-transform: uppercase;
 color: #fff;
 text-shadow: 0 2px 18px rgba(10, 10, 9, 0.45);
 max-width: 12ch;
 pointer-events: none;
}
@media (prefers-color-scheme: light) {
 .map-band-label {
 color: #12110f;
 text-shadow: 0 1px 12px rgba(255, 255, 255, 0.75);
 }
}

/* Map pins + popup (kinship with main site) */
.map-band {
 --pin-surface: #FFFFFF;
 --pin-border: rgba(31, 30, 29, 0.1);
 --pin-shadow: 0 2px 8px rgba(31, 30, 29, 0.16);
 --pin-face: #F2F2F7;
 --places: #77D183;
 --events: #A98FE8;
 --people: #74A6F2;
}
@media (prefers-color-scheme: dark) {
 .map-band {
 --pin-surface: #2A2A27;
 --pin-border: rgba(245, 244, 240, 0.12);
 --pin-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
 --pin-face: #3A3A36;
 }
}
.map-band-pins {
 position: absolute;
 inset: 0;
 z-index: 2;
 pointer-events: none;
}
.map-band-pins .pin,
.map-band-pins .person,
.map-band-pins .you {
 position: absolute;
 left: 0;
 top: 0;
 z-index: 4;
 pointer-events: auto;
 cursor: pointer;
 opacity: 0;
 transform: translate(-50%, -50%) scale(0.2);
 transition: opacity 0.28s ease, transform 0.32s ease;
}
.map-band-pins .pin {
 transform: translate(-50%, -100%) scale(0.2);
 transform-origin: 50% 100%;
}
.map-band-pins .pin.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.map-band-pins .pin.event { transform: translate(-50%, -50%) scale(0.2); transform-origin: 50% 50%; }
.map-band-pins .pin.event.show { transform: translate(-50%, -50%) scale(1); }
.map-band-pins .person.show,
.map-band-pins .you.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.map-band-pins .pin .bubble {
 width: 35px;
 height: 35px;
 border-radius: 50% 50% 50% 5px;
 background: var(--pin-surface);
 border: 1px solid var(--pin-border);
 box-shadow: var(--pin-shadow);
 display: grid;
 place-items: center;
 transform: rotate(-45deg);
}
.map-band-pins .pin .face {
 width: 29px;
 height: 29px;
 border-radius: 50%;
 background: var(--pin-face);
 display: grid;
 place-items: center;
 transform: rotate(45deg);
 font-size: 14px;
 line-height: 1;
}
.map-band-pins .pin.event .bubble {
 width: 34px;
 height: 34px;
 border-radius: 10px;
 transform: none;
}
.map-band-pins .pin.event .face {
 width: 25px;
 height: 25px;
 border-radius: 7px;
 transform: none;
 font-size: 12px;
}
.map-band-pins .person .rim {
 width: 35px;
 height: 35px;
 border-radius: 50%;
 background: var(--pin-surface);
 border: 1px solid var(--pin-border);
 box-shadow: var(--pin-shadow);
 padding: 3px;
}
.map-band-pins .person .rim img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
 display: block;
 background: var(--pin-face);
}
.map-band-pins .you {
 width: 35px;
 height: 35px;
 z-index: 6;
 pointer-events: none;
}
.map-band-pins .you .pulse {
 position: absolute;
 inset: 0;
 border-radius: 50%;
 border: 2px solid #DCA0BC;
 opacity: 0;
 animation: youPulse 3.2s ease-out infinite;
}
.map-band-pins .you .pulse.p2 {
 animation-delay: 1.6s;
 border-color: #95CEE9;
}
@keyframes youPulse {
 0% { transform: scale(1); opacity: 0.35; }
 100% { transform: scale(2.75); opacity: 0; }
}
.map-band-pins .you .ring {
 position: relative;
 width: 35px;
 height: 35px;
 border-radius: 50%;
 padding: 3px;
 background: linear-gradient(135deg, #95CEE9, #D3B5D4, #DCA0BC);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.map-band-pins .you .face {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background: #F2F2F7;
 display: grid;
 place-items: center;
 overflow: hidden;
}
.map-band-pins .you .face svg {
 width: 62%;
 height: 62%;
 fill: #2B2A29;
}

@media (prefers-reduced-motion: reduce) {
 .map-band-pins .you .pulse { animation: none; opacity: 0.25; }
}

.marquee {
 overflow: hidden;
 border: none;
 background: var(--grad);
 margin-top: 0;
}
.marquee-track {
 display: flex;
 gap: 0;
 width: max-content;
 animation: marquee 28s linear infinite;
 padding: 14px 0;
}
.marquee-track span {
 font-family: var(--display);
 font-size: clamp(14px, 2vw, 18px);
 letter-spacing: 0.04em;
 text-transform: uppercase;
 padding: 0 22px;
 color: #fff;
 white-space: nowrap;
}
@keyframes marquee {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
 .marquee-track { animation: none; }
}

.land-section {
 padding: 48px clamp(16px, 4vw, 48px);
}
.land-section .eyebrow {
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--land-muted);
 margin-bottom: 10px;
}
.land-section h2 {
 font-family: var(--display);
 font-size: clamp(28px, 5vw, 52px);
 font-weight: 400;
 letter-spacing: -0.03em;
 text-transform: uppercase;
 line-height: 1;
 margin-bottom: 14px;
}
.land-section > .sub {
 font-size: 15.5px;
 font-weight: 500;
 color: var(--land-muted);
 line-height: 1.55;
 max-width: 38em;
 margin-bottom: 28px;
}

.vibe-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: clamp(12px, 1.6vw, 20px);
 width: 100%;
 max-width: none;
 margin-inline: 0;
}
.vibe-card {
 position: relative;
 overflow: hidden;
 border-radius: clamp(22px, 2.4vw, 32px);
 aspect-ratio: 1 / 1;
 width: 100%;
 min-height: 0;
 background: var(--land-card);
 border: 1px solid var(--land-line);
 cursor: pointer;
 text-align: left;
 color: inherit;
 font: inherit;
 padding: 0;
 transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vibe-card:hover,
.vibe-card:focus-visible {
 transform: translateY(-2px);
 box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
 outline: none;
}
.vibe-card img,
.vibe-card video {
 width: 100%;
 height: 100%;
 min-height: 0;
 object-fit: cover;
 display: block;
}
.vibe-card video {
 pointer-events: none;
 object-fit: cover;
}
.vibe-card video::-webkit-media-controls,
.vibe-card video::-webkit-media-controls-start-playback-button,
.vibe-card video::-webkit-media-controls-enclosure {
 display: none !important;
 -webkit-appearance: none;
}

.orbit-wrap {
 max-width: min(1400px, calc(100% - 24px));
}
.orbit {
 position: relative;
 text-align: center;
 padding: 56px clamp(16px, 4vw, 48px) 44px;
 min-height: 460px;
 display: grid;
 place-items: center;
}
.orbit .center {
 position: relative;
 z-index: 2;
 max-width: min(720px, 100%);
 padding-inline: clamp(48px, 10vw, 120px);
 display: flex;
 flex-direction: column;
 align-items: center;
}
.orbit .center .eyebrow {
 margin-bottom: 14px;
}
.orbit .center h2 {
 margin-bottom: 16px;
 font-size: clamp(40px, 8vw, 84px);
 line-height: 1.05;
 max-width: none;
 display: flex;
 flex-direction: column;
 flex-wrap: nowrap;
 align-items: center;
 justify-content: center;
 gap: 0.06em;
}
.orbit .center h2 span {
 display: block;
 white-space: nowrap;
}
.orbit .center .sub {
 margin: 0 auto 20px;
 max-width: 34em;
}
.orbit .center .land-pill {
 margin-top: 4px;
 font-size: clamp(15px, 2.2vw, 18px);
 padding: 14px 28px;
}
.orbit .center .land-pill.grad-outline {
 box-shadow: none;
}
.orbit .center .land-pill.grad-outline:hover,
.orbit .center .land-pill.grad-outline:focus-visible {
 box-shadow: 0 10px 32px rgba(220, 160, 188, 0.36);
}
.orbit .bubble-layer {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
}
.orbit .bubble {
 position: absolute;
 width: clamp(72px, 12vw, 112px);
 height: clamp(72px, 12vw, 112px);
 border-radius: 50%;
 overflow: hidden;
 border: 2.5px solid rgba(255, 255, 255, 0.92);
 box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
 opacity: 0;
 transform: scale(0.72);
 transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
 will-change: opacity, transform;
}
.orbit .bubble.is-on {
 opacity: 1;
 transform: scale(1);
}
.orbit .bubble.is-on.is-float {
 animation: floaty 5.6s ease-in-out infinite;
}
.orbit .bubble img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 opacity: 1;
}
.orbit .bubble[data-slot="0"] { top: 2%; left: 4%; }
.orbit .bubble[data-slot="1"] { top: 0; right: 5%; }
.orbit .bubble[data-slot="2"] { top: 44%; left: 0; }
.orbit .bubble[data-slot="3"] { top: 42%; right: 0; }
.orbit .bubble[data-slot="4"] { bottom: 4%; left: 8%; }
.orbit .bubble[data-slot="5"] { bottom: 2%; right: 7%; }
@keyframes floaty {
 0%, 100% { transform: translateY(0) scale(1); }
 50% { transform: translateY(-10px) scale(1); }
}

.how-grid {
 display: grid;
 gap: 14px;
 margin-top: 8px;
}
.how-card {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 12px;
 padding: 22px 20px 20px;
 border-radius: 24px;
 border: 1.5px solid var(--land-line);
 background: var(--land-surface);
 min-height: 100%;
}
.how-card h3 {
 font-family: var(--display);
 font-size: clamp(26px, 4.5vw, 34px);
 font-weight: 400;
 letter-spacing: -0.03em;
 text-transform: uppercase;
 line-height: 1;
 margin: 0;
 display: flex;
 align-items: center;
 gap: 10px;
}
.how-card h3 .ico {
 width: 0.55em;
 height: 0.55em;
}
.how-card.find h3 .ico { color: #95CEE9; }
.how-card.join h3 .ico { color: #AFBAD7; }
.how-card.host h3 .ico { color: #DCA0BC; }
.how-card.find { border-color: rgba(149, 206, 233, 0.35); }
.how-card.join { border-color: rgba(175, 186, 215, 0.4); }
.how-card.host { border-color: rgba(220, 160, 188, 0.4); }
.how-card p {
 font-size: 15px;
 font-weight: 500;
 color: var(--land-muted);
 line-height: 1.55;
 margin: 0;
 flex: 1;
}
.how-card .land-pill {
 margin-top: 4px;
}

.host-band > .eyebrow {
 margin-bottom: 10px;
}
.host-band > h2 {
 margin-bottom: 22px;
 max-width: none;
}
.host-panel {
 display: grid;
 gap: 18px;
 border-radius: 32px;
 overflow: hidden;
 background: var(--land-surface);
 border: 1px solid var(--land-line);
}
.host-panel .copy {
 padding: 28px 24px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: flex-start;
 gap: 12px;
}
.host-panel .copy > .sub {
 margin: 0;
 font-size: 15.5px;
 font-weight: 500;
 color: var(--land-muted);
 line-height: 1.55;
 max-width: 38em;
}
.host-cta-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
 margin-top: 4px;
}
.host-panel .shot {
 min-height: 220px;
 position: relative;
}
.host-panel .shot img {
 width: 100%;
 height: 100%;
 min-height: 220px;
 object-fit: cover;
 display: block;
}
.cat-chips {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 0;
 margin-bottom: 0;
}
/* Moving Crony gradient outline (app-style shimmer), staggered per chip */
body.on-home .cat-chips span {
 font-size: 13px;
 font-weight: 700;
 padding: 9px 14px;
 border-radius: 999px;
 color: var(--land-text);
 border: 1.5px solid transparent;
 background:
 linear-gradient(var(--land-surface), var(--land-surface)) padding-box,
 linear-gradient(
 120deg,
 #95CEE9,
 #AFBAD7 30%,
 #D3B5D4 50%,
 #DCA0BC 70%,
 #D3B5D4 85%,
 #95CEE9
 ) border-box;
 background-size: auto, 280% 100%;
 background-origin: border-box;
 background-clip: padding-box, border-box;
 animation: catOutlineDance 6s ease-in-out infinite;
 cursor: default;
 transition: color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body.on-home .cat-chips span:hover,
body.on-home .cat-chips span:focus-visible {
 color: var(--land-on-grad);
 border-color: transparent;
 background: linear-gradient(
 120deg,
 #95CEE9,
 #AFBAD7 30%,
 #D3B5D4 50%,
 #DCA0BC 70%,
 #D3B5D4 85%,
 #95CEE9
 );
 background-size: 250% 100%;
 background-clip: border-box;
 animation: landShimmer 2.6s ease-in-out infinite;
 box-shadow: 0 4px 18px rgba(220, 160, 188, 0.35);
 filter: brightness(1.03);
}
@keyframes catOutlineDance {
 0%, 100% { background-position: 0 0, 0% 50%; }
 50% { background-position: 0 0, 100% 50%; }
}
/* Different rates so the cloud feels alive */
body.on-home .cat-chips span:nth-child(1) { animation-duration: 4.6s; animation-delay: 0s; }
body.on-home .cat-chips span:nth-child(2) { animation-duration: 7.2s; animation-delay: -1.1s; }
body.on-home .cat-chips span:nth-child(3) { animation-duration: 5.4s; animation-delay: -2.4s; }
body.on-home .cat-chips span:nth-child(4) { animation-duration: 8.1s; animation-delay: -0.6s; }
body.on-home .cat-chips span:nth-child(5) { animation-duration: 5.9s; animation-delay: -3.2s; }
body.on-home .cat-chips span:nth-child(6) { animation-duration: 6.7s; animation-delay: -1.8s; }
body.on-home .cat-chips span:nth-child(7) { animation-duration: 4.9s; animation-delay: -4.1s; }
body.on-home .cat-chips span:nth-child(8) { animation-duration: 7.8s; animation-delay: -0.3s; }
body.on-home .cat-chips span:nth-child(9) { animation-duration: 5.1s; animation-delay: -2.9s; }
body.on-home .cat-chips span:nth-child(10) { animation-duration: 6.3s; animation-delay: -1.5s; }
body.on-home .cat-chips span:nth-child(11) { animation-duration: 8.6s; animation-delay: -3.7s; }
body.on-home .cat-chips span:nth-child(12) { animation-duration: 5.7s; animation-delay: -0.9s; }
@media (prefers-reduced-motion: reduce) {
 body.on-home .cat-chips span,
 body.on-home .cat-chips span:hover,
 body.on-home .cat-chips span:focus-visible {
 animation: none;
 }
}

.city-check-row {
 position: relative;
 z-index: 1;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 8px;
 align-items: center;
}
.city-check-row select,
.city-check-row input {
 font: inherit;
 font-size: 15px;
 font-weight: 600;
 padding: 12px 14px;
 border-radius: 999px;
 border: 1.5px solid rgba(245, 244, 240, 0.14);
 background: var(--land-surface);
 color: var(--land-text);
 max-width: 100%;
}
.city-check-row select {
 flex: 1 1 160px;
 min-width: 0;
 appearance: none;
 -webkit-appearance: none;
 padding-right: 46px;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C8C5BE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.5 6 6 10.5 1.5'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 20px center;
 background-size: 12px 8px;
}
.city-check-row .land-pill {
 flex: 0 0 auto;
}

.faq {
 max-width: 720px;
 text-align: left;
 width: 100%;
}
.faq > h2 {
 white-space: normal;
 font-size: clamp(26px, 6.2vw, 52px);
}
.faq > .sub {
 margin: 0 auto 8px;
 max-width: 28em;
}
.faq-list {
 margin-top: 22px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 text-align: left;
}
.faq-item {
 background: var(--land-surface);
 border: 1px solid var(--land-line);
 border-radius: 18px;
 padding: 4px 20px;
 box-shadow: 0 8px 24px rgba(31, 30, 29, 0.06);
}
.faq-item summary {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 cursor: pointer;
 list-style: none;
 padding: 14px 0;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: -0.01em;
 color: var(--land-text);
}
.faq-item summary::-webkit-details-marker {
 display: none;
}
.faq-item summary:hover .faq-q,
.faq-item summary:focus-visible .faq-q {
 color: color-mix(in srgb, var(--land-text) 78%, #DCA0BC);
}
.faq-item summary:focus-visible {
 outline: none;
}
.faq-q {
 flex: 1 1 auto;
 min-width: 0;
 text-align: left;
}
.faq-toggle {
 flex: 0 0 auto;
 width: 1.1em;
 text-align: center;
 line-height: 1;
 font-size: 18px;
}
.faq-toggle::before {
 content: "+";
 color: var(--land-muted);
 font-weight: 800;
}
.faq-item[open] .faq-toggle::before {
 content: "-";
 color: var(--land-muted);
}
.faq-a {
 padding: 0 0 14px;
}
.faq-a p {
 margin: 0;
 font-size: 14px;
 font-weight: 500;
 color: var(--land-muted);
 line-height: 1.5;
}

.final-cta {
 text-align: center;
 padding-top: clamp(56px, 8vw, 96px);
 padding-bottom: clamp(56px, 8vw, 96px);
}
.final-cta > h2 {
 max-width: min(18ch, 100%);
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.04em;
 font-size: clamp(28px, 5.2vw, 52px);
 line-height: 1.08;
 letter-spacing: -0.03em;
 background: var(--grad);
 -webkit-background-clip: text;
 background-clip: text;
 color: transparent;
}
.final-cta > h2 .cta-line {
 display: block;
}
@media (min-width: 640px) {
 .final-cta > h2 .cta-line {
 white-space: nowrap;
 }
}
.final-cta .door-row {
 width: 100%;
 max-width: 920px;
 margin-left: auto;
 margin-right: auto;
 grid-template-columns: 1fr;
}
.final-cta .door-cta {
 align-items: center;
 text-align: center;
}

.loop-in {
 text-align: center;
 max-width: 720px;
 width: 100%;
}
.loop-in .sub {
 margin-left: auto;
 margin-right: auto;
 max-width: 28em;
}
.loop-form {
 margin-top: 16px;
 width: 100%;
 max-width: 28em;
 margin-inline: auto;
}
.loop-card {
 background: var(--land-surface);
 border: 1px solid var(--land-line);
 border-radius: 24px;
 padding: 10px;
 box-shadow: 0 8px 24px rgba(31, 30, 29, 0.06);
}
.loop-fields {
 display: flex;
 flex-direction: column;
 gap: 8px;
 align-items: stretch;
 width: 100%;
 max-width: none;
}
.loop-in .loop-fields {
 margin-inline: 0;
}

.loop-faq {
 display: grid;
 gap: 40px;
 align-items: start;
}
.loop-faq .loop-in,
.loop-faq .faq {
 max-width: none;
 margin: 0;
}
.loop-faq .loop-in h2,
.loop-faq .faq h2 {
 font-size: clamp(28px, 5vw, 52px);
 margin-bottom: 12px;
}
.loop-faq .faq > h2 {
 white-space: normal;
}

@media (min-width: 860px) {
 .loop-faq .loop-in,
 .loop-faq .faq {
 text-align: left;
 }
 .loop-faq .loop-in .sub,
 .loop-faq .faq > .sub {
 margin-left: 0;
 margin-right: 0;
 max-width: none;
 }
 .loop-faq .loop-form {
 margin-inline: 0;
 max-width: none;
 width: 100%;
 }
 .loop-faq .loop-fields input {
 max-width: none;
 flex: none;
 width: 100%;
 }
}
@media (min-width: 1200px) {
 .loop-faq {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
 gap: clamp(28px, 4vw, 56px);
 align-items: start;
 }
}
.loop-fields input {
 font: inherit;
 font-size: 15px;
 font-weight: 600;
 padding: 14px 18px;
 border: 1px solid transparent;
 border-radius: 999px;
 background: color-mix(in srgb, var(--land-text) 8%, var(--land-surface));
 color: var(--land-text);
 width: 100%;
 min-width: 0;
 flex: none;
 max-width: none;
 box-sizing: border-box;
 transition: background 0.15s ease, border-color 0.15s ease;
}
.loop-fields input::placeholder {
 color: var(--land-muted);
 font-weight: 500;
}
.loop-fields input:focus {
 outline: none;
 border-color: rgba(175, 186, 215, 0.55);
 background: color-mix(in srgb, var(--land-text) 11%, var(--land-surface));
}
.loop-consent {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin: 10px 4px 2px;
 font-size: 13px;
 font-weight: 500;
 color: var(--land-muted);
 line-height: 1.4;
 cursor: pointer;
}
.loop-consent input {
 flex: 0 0 auto;
 width: 16px;
 height: 16px;
 margin-top: 2px;
 accent-color: #DCA0BC;
}
.loop-consent a {
 color: var(--land-text);
 font-weight: 700;
 text-decoration: none;
}
.loop-consent a:hover {
 text-decoration: underline;
}
.loop-card .land-pill {
 display: flex;
 width: 100%;
 margin: 8px 0 0;
 text-align: center;
 padding: 14px 18px;
 font-size: 15px;
 transform-origin: center;
}
.loop-form .msg {
 display: none;
 margin-top: 12px;
 font-size: 14px;
 font-weight: 600;
 min-height: 1.2em;
}
.loop-form .msg.show { display: block; }
.loop-form .msg.err { color: #E35D6A; }
.loop-form .msg.ok { color: #3FAE7C; }

.pac-container {
 z-index: 60 !important;
 font-family: var(--body);
 background: var(--land-surface);
 border: 1.5px solid var(--land-line);
 border-radius: 18px;
 margin-top: 6px;
 box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
 overflow: hidden;
}
.pac-item {
 font-size: 14px;
 font-weight: 500;
 padding: 10px 18px;
 color: var(--land-muted);
 border-top: 1px solid var(--land-line);
 cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover,
.pac-item-selected {
 background: color-mix(in srgb, var(--land-text) 6%, var(--land-surface));
}
.pac-item-query {
 font-size: 14px;
 font-weight: 700;
 color: var(--land-text);
}
.pac-icon { display: none; }
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

.land-footer {
 margin-top: 20px;
 position: relative;
 padding: 56px clamp(18px, 4vw, 48px) 44px;
 background: var(--land-bg);
 border-top: 1px solid var(--land-line);
}
.land-footer .inner {
 position: relative;
 z-index: 1;
 width: 100%;
 max-width: 1120px;
 margin-inline: auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 22px;
 box-sizing: border-box;
}
.land-footer .brand-row {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 14px;
}
.land-footer img {
 height: 30px;
}
.land-footer .logo-dark { display: var(--logo-on-dark); }
.land-footer .logo-light { display: var(--logo-on-light); }
.land-footer p {
 font-size: 14px;
 color: var(--land-muted);
 line-height: 1.65;
 max-width: 36em;
 margin: 0;
}
.land-footer .contact {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 font-size: 15px;
 font-weight: 600;
}
.land-footer .contact a {
 color: var(--land-text);
}
.land-footer .policies {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px 18px;
 font-size: 14px;
 font-weight: 700;
}
.land-footer .policies a {
 color: var(--land-text);
}
.land-footer .policies span {
 color: var(--land-muted);
}
.land-footer .socials {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
}
.land-footer .social {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 1.5px solid var(--land-line);
 background: var(--land-surface);
 color: var(--land-text);
 transition: transform 0.15s ease, border-color 0.15s ease;
}
.land-footer .social svg {
 width: 18px;
 height: 18px;
 fill: currentColor;
}
.land-footer .social:hover {
 transform: translateY(-2px);
 text-decoration: none;
 border-color: color-mix(in srgb, var(--land-text) 28%, var(--land-line));
}
.land-footer .links {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 12px 18px;
 font-size: 13px;
 font-weight: 700;
 padding-top: 4px;
}
.land-footer a {
 color: var(--land-text);
 text-decoration: none;
}
.land-footer a:hover {
 text-decoration: underline;
}

/* - - Mobile refinements - - */
@media (max-width: 859px) {
 /* Logo sits in the gap between mark and CTAs, not page-centre */
 .land-nav {
 display: flex;
 grid-template-columns: none;
 gap: 10px;
 }
 .land-nav .nav-jump {
 flex: 0 0 auto;
 }
 .land-nav .brand {
 flex: 1 1 auto;
 grid-column: auto;
 justify-self: auto;
 min-width: 0;
 }
 .land-nav .nav-cta {
 flex: 0 0 auto;
 grid-column: auto;
 justify-self: auto;
 margin-left: 0;
 }
}

@media (max-width: 639px) {
 .land-nav {
 gap: 10px;
 padding: 12px 14px;
 }
 .land-nav .nav-mark {
 width: 26px;
 height: 26px;
 }
 .land-nav .nav-cta .land-pill {
 padding: 9px 14px;
 font-size: 12.5px;
 }
 .land-hero h1 {
 font-size: clamp(42px, 12vw, 64px);
 max-width: 11ch;
 line-height: 0.96;
 }
 .door-row {
 grid-template-columns: 1fr;
 }
 .hero-collage {
 max-width: 100%;
 margin-inline: auto;
 min-height: 260px;
 }
 .orbit {
 min-height: 320px;
 padding: 28px 8px 12px;
 }
 .orbit .bubble {
 width: 52px;
 height: 52px;
 }
 .orbit .bubble[data-slot="0"] { top: 0; left: 4%; }
 .orbit .bubble[data-slot="1"] { top: 0; right: 4%; }
 .orbit .bubble[data-slot="2"] { top: 38%; left: 0; }
 .orbit .bubble[data-slot="3"] { top: 38%; right: 0; }
 .orbit .bubble[data-slot="4"] { bottom: 2%; left: 10%; }
 .orbit .bubble[data-slot="5"] { bottom: 2%; right: 10%; }
 .vibe-grid {
 gap: 10px;
 }
 .vibe-card {
 border-radius: 18px;
 }
 .map-band {
 height: clamp(280px, 72vw, 360px);
 margin-top: 12px;
 }
 .map-band-label {
 top: 14%;
 font-size: 24px;
 }
 .land-section {
 padding: 40px 16px;
 }
 .land-section h2 {
 font-size: clamp(26px, 8vw, 36px);
 }
 /* Match The vibe: centre How it works on small screens */
 #how {
 text-align: center;
 }
 #how .how-card {
 align-items: center;
 text-align: center;
 }
 #how .how-card .land-pill {
 align-self: center;
 }
 .orbit .center {
 padding-inline: clamp(56px, 16vw, 72px);
 }
 .orbit .center h2 {
 font-size: clamp(26px, 7vw, 34px);
 line-height: 1.08;
 gap: 0.04em;
 }
 .orbit .center .sub {
 font-size: 14px;
 max-width: 22em;
 }
}

@media (min-width: 640px) and (max-width: 859px) {
 .land-hero {
 gap: 32px;
 }
 .door-row {
 grid-template-columns: 1fr;
 }
 .final-cta .door-row {
 grid-template-columns: repeat(3, 1fr);
 max-width: 100%;
 }
 .vibe-grid {
 grid-template-columns: repeat(3, 1fr);
 }
 .how-grid {
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 }
}

@media (min-width: 860px) {
 .land-nav .links {
 display: flex;
 }
 .land-hero {
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: clamp(20px, 2.5vw, 32px);
 padding-top: 96px;
 padding-bottom: 48px;
 min-height: min(72dvh, 760px);
 align-items: center;
 }
 .land-hero > div:first-child {
 max-width: none;
 }
 .land-hero h1 {
 max-width: 11ch;
 font-size: clamp(50px, 6vw, 80px);
 line-height: 0.98;
 }
 .land-hero .door-row {
 grid-template-columns: 1fr;
 gap: 8px;
 max-width: 100%;
 }
 .land-hero .door-cta {
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 gap: 12px 16px;
 padding: 14px 16px;
 border-radius: 18px;
 }
 .land-hero .door-cta .door-lead {
 flex: 0 1 auto;
 }
 .land-hero .door-cta strong {
 white-space: nowrap;
 flex: 0 0 auto;
 }
 .land-hero .door-cta > span:last-child {
 text-align: right;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 min-width: 0;
 }
 .final-cta .door-row {
 grid-template-columns: repeat(3, 1fr);
 }
 .hero-collage {
 min-height: min(520px, 62dvh);
 width: 100%;
 max-width: none;
 justify-self: stretch;
 margin-inline: 0;
 align-self: stretch;
 }
 .hero-collage .shot {
 border-radius: 24px;
 }
 .hero-collage .shot.tall {
 min-height: 0;
 }
 .vibe-grid {
 grid-template-columns: repeat(3, 1fr);
 }
 .how-grid {
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
 }
 .host-panel {
 grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
 align-items: stretch;
 }
 .host-panel .shot {
 min-height: 100%;
 }
 .land-section {
 padding: 64px clamp(18px, 4vw, 48px);
 }
 .map-band-label {
 --map-label-pad: clamp(18px, 4vw, 48px);
 }
}

/* Half-desktop / narrow laptop: keep two columns, don’t force a tall first screen */
@media (min-width: 860px) and (max-width: 1199px) {
 .land-hero {
 min-height: 0;
 padding-top: 72px;
 padding-bottom: 28px;
 gap: 18px;
 align-items: start;
 }
 .land-hero h1 {
 font-size: clamp(44px, 5vw, 68px);
 line-height: 0.98;
 }
 .land-hero .kicker {
 margin-bottom: 12px;
 }
 .land-hero .lede {
 margin-top: 10px;
 font-size: 15px;
 }
 .trust-mini {
 margin-top: 14px;
 gap: 10px 14px;
 }
 .hero-collage {
 min-height: min(340px, 42dvh);
 gap: 10px;
 }
 .hero-collage .shot {
 border-radius: 18px;
 }
}

@media (min-width: 1100px) {
 .final-cta .door-row {
 grid-template-columns: repeat(3, 1fr);
 }
}

/* - - Find / Join flow screens (match landing) - - */
body:not(.on-home) .app {
 max-width: 720px;
 padding: max(16px, env(safe-area-inset-top)) clamp(16px, 4vw, 28px) max(36px, env(safe-area-inset-bottom));
}

.flow-view.active {
 width: 100%;
}

.flow-nav {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 gap: 12px;
 margin: 0 -4px 8px;
 padding: 6px 0 14px;
 border-bottom: 1px solid var(--line);
 position: sticky;
 top: 0;
 z-index: 20;
 background: color-mix(in srgb, var(--bg) 88%, transparent);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
}
.flow-nav .back {
 justify-self: start;
}
.flow-nav .brand {
 justify-self: center;
 display: flex;
 align-items: center;
 text-decoration: none;
}
.flow-nav .brand img {
 height: 26px;
 width: auto;
}
.flow-nav .brand .logo-dark { display: var(--logo-on-dark); }
.flow-nav .brand .logo-light { display: var(--logo-on-light); }
.flow-nav .flow-side {
 justify-self: end;
 display: flex;
 align-items: center;
 gap: 8px;
}
.flow-nav .side {
 font: inherit;
 font-size: 13px;
 font-weight: 700;
 color: var(--muted);
 background: none;
 border: none;
 cursor: pointer;
}
.flow-nav .side:hover {
 color: var(--text);
}

.flow-body {
 padding-top: 22px;
 width: 100%;
}
.flow-body .eyebrow {
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 10px;
}
.flow-title {
 font-family: var(--display);
 font-size: clamp(28px, 6vw, 42px);
 font-weight: 400;
 letter-spacing: -0.03em;
 text-transform: uppercase;
 line-height: 0.98;
 margin-bottom: 10px;
}
.flow-sub {
 text-align: left !important;
 margin: 0 0 18px !important;
 max-width: 36em;
 align-self: stretch;
}

.flow-view .filter-chips {
 margin: 0 0 18px;
 gap: 8px;
}
.flow-view .filter-chips button {
 font-size: 13px;
 font-weight: 700;
 padding: 9px 14px;
 border-radius: 999px;
 border: 1.5px solid transparent;
 color: var(--text);
 background:
 linear-gradient(var(--surface), var(--surface)) padding-box,
 linear-gradient(
 120deg,
 #95CEE9,
 #AFBAD7 30%,
 #D3B5D4 50%,
 #DCA0BC 70%,
 #D3B5D4 85%,
 #95CEE9
 ) border-box;
 background-size: auto, 280% 100%;
 background-origin: border-box;
 background-clip: padding-box, border-box;
 animation: catOutlineDance 6.5s ease-in-out infinite;
}
.flow-view .filter-chips button:nth-child(odd) { animation-duration: 5.2s; }
.flow-view .filter-chips button:nth-child(3n) { animation-duration: 7.4s; animation-delay: -1.5s; }
.flow-view .filter-chips button:nth-child(4n) { animation-duration: 8s; animation-delay: -2.8s; }
.flow-view .filter-chips button.on {
 animation: landShimmer 7s ease-in-out infinite;
 background: linear-gradient(120deg, #95CEE9, #AFBAD7 30%, #D3B5D4 50%, #DCA0BC 70%, #D3B5D4 85%, #95CEE9);
 background-size: 250% 100%;
 background-clip: border-box;
 color: #fff;
 border-color: transparent;
 box-shadow: 0 4px 16px rgba(220, 160, 188, 0.28);
}

.flow-view .cards {
 gap: 14px;
 margin-top: 0;
}
.flow-view .card {
 border-radius: 22px;
 padding: 18px 18px 16px;
 border: 1px solid var(--line);
 background: var(--surface);
 transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.flow-view .card:hover {
 border-color: transparent;
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
 transform: translateY(-1px);
 background:
 linear-gradient(var(--surface), var(--surface)) padding-box,
 linear-gradient(120deg, #95CEE9, #AFBAD7, #D3B5D4, #DCA0BC) border-box;
 background-origin: border-box;
 background-clip: padding-box, border-box;
 border: 1.5px solid transparent;
}
.flow-view .card .when {
 background: color-mix(in srgb, var(--text) 6%, var(--surface));
 color: var(--muted);
 font-size: 11px;
 letter-spacing: 0.04em;
}
.flow-view .card h3 {
 font-size: 17px;
 font-weight: 800;
 letter-spacing: -0.02em;
}
.flow-view .card .meta .go {
 color: #fff;
 background: linear-gradient(120deg, #95CEE9, #AFBAD7 30%, #D3B5D4 50%, #DCA0BC 70%, #D3B5D4 85%, #95CEE9);
 background-size: 250% 100%;
 animation: landShimmer 7s ease-in-out infinite;
 padding: 8px 14px;
}

.flow-view .empty-find {
 border-radius: 22px;
 border: 1px solid var(--line);
 padding: 24px 20px;
}
.flow-view .empty-find .btn {
 max-width: 280px;
}

@media (prefers-reduced-motion: reduce) {
 .flow-view .filter-chips button,
 .flow-view .filter-chips button.on,
 .flow-view .card .meta .go {
 animation: none;
 }
}

/* Scroll appear / disappear (only when JS enables .has-reveal) */
html.has-reveal [data-reveal] {
 opacity: 0;
 transform: translate3d(0, 28px, 0) scale(0.985);
 transition:
 opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
 transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
 transition-delay: var(--reveal-delay, 0ms);
 will-change: opacity, transform;
}
html.has-reveal [data-reveal="left"] {
 transform: translate3d(-28px, 0, 0);
}
html.has-reveal [data-reveal="right"] {
 transform: translate3d(28px, 0, 0);
}
html.has-reveal [data-reveal="pop"] {
 transform: translate3d(0, 18px, 0) scale(0.92);
}
html.has-reveal [data-reveal="fade"] {
 transform: none;
 transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
html.has-reveal [data-reveal].is-in {
 opacity: 1;
 transform: translate3d(0, 0, 0) scale(1);
}
html.has-reveal [data-reveal="fade"].is-in {
 transform: none;
}
@media (prefers-reduced-motion: reduce) {
 html.has-reveal [data-reveal] {
 opacity: 1;
 transform: none;
 transition: none;
 }
}