/* YourPlot home page — visual tokens per CLAUDE.md "Design direction" */
:root {
	--color-bg: #FFFFFF;
	--color-surface: #FAFAFA;
	--color-ink: #1A1A1A;
	--color-accent: #9C1D26;
	--color-muted: #6B6B6B;
	--color-unavailable: #E3E3E3;
	--color-glow: #D9A441;
	--color-badge-bg: #F7E5E7;
	--color-badge-text: #7A161D;
	--color-border: rgba(26, 26, 26, 0.08);
	/* Deliberately distinct from --color-accent — maroon means "selected",
	   this means "wrong", and CLAUDE.md's visual system says they must
	   never look related. */
	--color-error: #D62839;
	--radius: 10px;
	--radius-pill: 999px;
	--shadow-soft: 0 8px 24px rgba(26, 26, 26, 0.06);
	--font-heading: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

.icon {
	width: 20px;
	height: 20px;
	display: block;
}

.icon--sm {
	width: 14px;
	height: 14px;
}

.icon--lg {
	width: 36px;
	height: 36px;
}

.icon--xl {
	width: 48px;
	height: 48px;
}

/* Generic button — shared by every page (map's empty-state CTA and sticky
   Continue bar, the confirmation screen's "Back to Home", the login page's
   form submits). */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--radius);
	padding: 12px 20px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}

.button--primary {
	background: var(--color-accent);
	color: #FFFFFF;
}

/* Disabled state — e.g. Manage Plots' Details/Update, which stay
   disabled until at least one plot is selected. Dimmed + a
   non-interactive cursor is enough; the disabled attribute itself
   already blocks clicks and :hover. */
.button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Generic form field — shared by the booking sheet's contact form and the
   login page's email/mobile/OTP forms. */
.form-field {
	margin-bottom: 16px;
}

.form-field label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-muted);
	margin-bottom: 6px;
}

.form-field input {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--radius);
	border: 0.5px solid var(--color-border);
	background: var(--color-surface);
	font-family: var(--font-body);
	font-size: 0.92rem;
	color: var(--color-ink);
}

.form-field input:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

.form-field input[readonly] {
	color: var(--color-muted);
}

.form-field__error {
	color: var(--color-error);
	font-size: 0.78rem;
	margin: 6px 0 0;
}

/* Top bar */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 0.5px solid var(--color-border);
	position: sticky;
	top: 0;
	background: var(--color-bg);
	z-index: 20;
}

.topbar__start {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.topbar__wordmark {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	flex: 0 0 auto;
}

/* Quiet, BookMyShow-style location chip — informational/optional, never a
   gate: it must stay usable (and skippable) without blocking anything
   else on the page. Opens the city-select sheet below; never an
   alert()/confirm() (CLAUDE.md's no-blocking-dialogs rule). */
.city-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 6px 10px;
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.8rem;
	cursor: pointer;
}

.city-chip:hover {
	background: #F0F0F0;
}

.city-chip .icon {
	color: var(--color-muted);
	flex: 0 0 auto;
}

.city-chip__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 120px;
}

.topbar__search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	color: var(--color-ink);
}

.topbar__search:hover {
	background: var(--color-surface);
}

/* Hero carousel */
.hero {
	position: relative;
	margin: 16px 20px 8px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.hero__viewport {
	overflow: hidden;
	width: 100%;
}

.hero__track {
	display: flex;
	transition: transform 380ms ease;
	touch-action: pan-y;
}

.hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	background: linear-gradient(135deg, var(--color-surface), #F0F0F0);
}

.hero__image {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-border);
}

/* object-fit: cover so a real banner photo of any aspect ratio fills the
   16:9 .hero__slide box without distortion — see CLAUDE.md's Visual
   system > Image specifications for the recommended source dimensions
   this is designed around (matches layout_banner's spec). */
.hero__image-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	background: linear-gradient(0deg, rgba(26, 26, 26, 0.68) 0%, rgba(26, 26, 26, 0) 65%);
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hero__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.4rem;
	margin: 0;
}

.hero__subtitle {
	font-family: var(--font-body);
	font-size: 0.9rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
}

.hero__nav--prev {
	left: 12px;
}

.hero__nav--next {
	right: 12px;
}

.hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
}

.hero__dot.is-active {
	background: #FFFFFF;
	width: 18px;
	border-radius: var(--radius-pill);
}

/* Filter chip row */
.chip-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 20px 16px;
	scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
	display: none;
}

.chip {
	flex: 0 0 auto;
	border: none;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--color-badge-bg);
	color: var(--color-badge-text);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.85rem;
	cursor: pointer;
	white-space: nowrap;
}

.chip.is-active {
	background: var(--color-accent);
	color: #FFFFFF;
}

/* Badges */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.72rem;
	width: fit-content;
}

.badge--availability {
	background: var(--color-badge-bg);
	color: var(--color-badge-text);
}

/* Same tint pairing as availability — a different lower-emphasis info
   chip (Explore's starting-price badge), not a different visual weight. */
.badge--price {
	background: var(--color-badge-bg);
	color: var(--color-badge-text);
}

/* Quiet promoter/developer entry point — shared by the top-of-page link
   (just under the hero) and the footer. Deliberately not button-styled or
   accent-colored: it must never compete with buyer-facing content, per
   CLAUDE.md's "Two-page structure" rule. */
.developer-link {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.82rem;
	color: var(--color-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.developer-link:hover {
	color: var(--color-ink);
}

.developer-link--top {
	margin: 14px 20px 0;
}

/* SEO/breathing-room intro directly under the hero — carries the page's
   one real <h1>. Buyer-facing only; no promoter/SaaS positioning copy
   belongs here (that's /for-developers). */
.home-intro {
	padding: 10px 20px 4px;
}

.home-intro__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	line-height: 1.25;
	margin: 0 0 8px;
	color: var(--color-ink);
}

.home-intro__text {
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-muted);
	margin: 0;
	max-width: 560px;
}

/* Short heading + supporting line ahead of a section's card row (Featured
   Plots, Explore Plots) — same SEO/breathing-room purpose as .home-intro,
   scoped per-section. No horizontal padding of its own: it's always
   nested inside .listings/.explore-nav, which already provide it — an
   extra 20px here would double the indent against the card row below. */
.section-heading {
	margin: 0 0 12px;
}

.section-heading__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0;
	color: var(--color-ink);
}

.section-heading__text {
	font-family: var(--font-body);
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--color-muted);
	margin: 4px 0 0;
	max-width: 520px;
}

/* Listings */
.listings {
	padding: 8px 20px 40px;
}

.explore-nav {
	padding: 8px 20px 40px;
}

.recently-added {
	padding: 8px 20px 40px;
}

.nearby-locations {
	padding: 8px 20px 40px;
}

.listings__empty {
	color: var(--color-muted);
	font-size: 0.9rem;
}

.listings__see-all {
	display: inline-flex;
	margin-top: 20px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--color-accent);
}

.listings__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

/* Horizontal scroll-snap row, BookMyShow "now showing" style — the next
   card deliberately peeks in from the edge (not fully hidden, not fully
   cropped) rather than exactly filling the viewport. Used by Featured
   Plots and Explore Plots on mobile; both switch to a wrapping grid on
   desktop instead (see the min-width: 900px block below). */
.scroll-row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 4px 20px 8px;
	scrollbar-width: none;
}

.scroll-row::-webkit-scrollbar {
	display: none;
}

.scroll-row > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}

.scroll-row--featured > * {
	width: 78%;
	max-width: 320px;
}

/* Recently Added Plots — narrower than Featured Plots since these cards
   are portrait, not landscape (see .poster-card below); two fit
   comfortably on one mobile screen with the next one peeking. */
.scroll-row--recent > * {
	width: 46%;
	max-width: 220px;
}

/* Explore Plots cards stay deliberately smaller/lighter than Featured
   Plots cards — navigation aids, not primary content (CLAUDE.md's
   Explore Plots hierarchy rule). */
.scroll-row--explore > * {
	width: 34%;
	max-width: 160px;
}

/* Lightweight icon/image + label navigation card (Explore Plots) — never
   the full layout_card treatment (no title/badge/meta weight). Same
   movie-poster-tile structure as .layout-card below: the card itself
   carries no padding around the image (overflow: hidden clips the image
   to the card's own rounded corners instead), so the image fills the
   card edge-to-edge with no visible gap; the label gets its own padded
   text area below, outside the filled image. */
.nav-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	text-align: center;
}

.nav-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #F0F0F0, var(--color-surface));
	color: var(--color-border);
}

.nav-card__image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nav-card__label {
	padding: 8px 10px 10px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--color-ink);
}

/* Recently Added Plots — a portrait, movie-poster-style card: deliberately
   distinct from Featured Plots' landscape .layout-card (which stays
   unchanged), for visual rhythm/variety. Same edge-to-edge image
   treatment as every other card on this page (overflow: hidden on the
   card itself, no padding wrapping the image, object-fit: cover) — see
   CLAUDE.md's Image specifications for the recommended source size this
   3:4 ratio is designed around. */
.poster-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.poster-card__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #F0F0F0, var(--color-surface));
	color: var(--color-border);
}

.poster-card__image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.poster-card__title {
	padding: 10px 12px 12px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--color-ink);
}

/* Explore Plots by Location — a quiet prompt (no city known yet) or a row
   of .chip links (reusing the existing chip/tint styling, not a new
   visual language) once home-city.js swaps in real content. */
.nearby-locations__prompt {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--color-muted);
}

.nearby-locations__prompt .icon {
	flex: 0 0 auto;
	color: var(--color-muted);
}

.nearby-locations__prompt-link {
	border: none;
	background: none;
	padding: 0;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--color-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.nearby-locations__prompt-link:hover {
	color: var(--color-ink);
}

.nearby-locations__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nearby-locations__empty {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.85rem;
}

/* Standard footer — repeats the developer-partner link (see .developer-link
   above) as the common "near top nav + footer, nowhere else" pattern. */
.site-footer {
	border-top: 0.5px solid var(--color-border);
	padding: 24px 20px 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__wordmark {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--color-ink);
}

.layout-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.layout-card__image {
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #F0F0F0, var(--color-surface));
	color: var(--color-border);
	overflow: hidden;
}

/* object-fit: cover so a real photo of any aspect ratio fills this 16:10
   box without distortion (cropping instead of stretching) — see
   CLAUDE.md's Visual system > Image specifications for the recommended
   source dimensions this is designed around. */
.layout-card__image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.layout-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.layout-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.layout-card__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1rem;
	margin: 0;
	color: var(--color-ink);
}

.layout-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	color: var(--color-muted);
	font-size: 0.82rem;
}

.layout-card__meta .icon {
	color: var(--color-muted);
	flex: 0 0 auto;
}

.layout-card__promoter--separated::before {
	content: "\2022";
	margin-right: 6px;
	color: var(--color-border);
}

/* Promoters — a row of logo cards. */
.promoters {
	padding: 8px 20px 40px;
}

.scroll-row--promoters > * {
	width: 30%;
	max-width: 140px;
}

/* Same edge-to-edge treatment as .layout-card/.nav-card — no padding
   around the logo, overflow: hidden clips it to the card's own rounded
   corners instead of leaving a visible gap. */
.promoter-card {
	display: flex;
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.promoter-card__logo {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-border);
}

/* object-fit: cover, matching every other card image on this page (see
   CLAUDE.md's Image specifications) — fills the square frame edge-to-
   edge, cropping as needed rather than padding/letterboxing. */
.promoter-card__logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* How It Works — a fixed 3-step explainer, display-only (no navigation). */
.how-it-works {
	padding: 32px 20px 8px;
}

.how-it-works__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 20px;
	color: var(--color-ink);
	text-align: center;
}

.how-it-works__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.how-it-works__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}

.how-it-works__step-icon {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-badge-bg);
	color: var(--color-accent);
	overflow: hidden;
}

.how-it-works__step-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.how-it-works__step-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0;
	color: var(--color-ink);
}

.how-it-works__step-text {
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--color-muted);
	margin: 0;
	max-width: 260px;
}

/* Promoter Banner — a single, quiet CTA row, deliberately smaller/lower-
   key than the hero: no full-bleed background image or overlay gradient,
   just a bordered card like the rest of the page's components. */
.promoter-banner {
	padding: 8px 20px 32px;
}

.promoter-banner__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--color-surface);
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius);
	padding: 16px;
}

.promoter-banner__image {
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: 8px;
	object-fit: cover;
}

.promoter-banner__content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.promoter-banner__headline {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	margin: 0;
	color: var(--color-ink);
}

.promoter-banner__subline {
	font-family: var(--font-body);
	font-size: 0.82rem;
	margin: 0;
	color: var(--color-muted);
}

/* Trust Badges — hardcoded content (see index.html), not doctype-driven. */
.trust-badges {
	padding: 32px 20px;
	background: var(--color-surface);
}

.trust-badges__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 20px;
	color: var(--color-ink);
	text-align: center;
}

.trust-badges__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.trust-badges__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.trust-badges__item .icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--color-accent);
}

.trust-badges__item p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--color-ink);
}

/* FAQ — hardcoded content (see index.html), native <details>/<summary> so
   every answer is in the page source (crawlable) regardless of open
   state, and expand/collapse needs no custom height/transition logic. */
.faq {
	padding: 32px 20px 40px;
}

.faq__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 16px;
	color: var(--color-ink);
}

.faq__list {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.faq__item {
	border: 0.5px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	overflow: hidden;
}

.faq__question {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-ink);
	cursor: pointer;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--color-muted);
	transition: transform 200ms ease;
}

.faq__item[open] .faq__icon {
	transform: rotate(180deg);
}

.faq__answer {
	margin: 0;
	padding: 0 16px 16px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--color-muted);
}

/* City-select bottom sheet — opened by .city-chip, toggled via the
   `hidden` attribute. Per gotcha #9, an author `display` on a
   [hidden]-toggled element fights the attribute unless the [hidden]
   override comes after it in source order, so that rule is last here. */
.sheet-overlay {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.4);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 50;
}

.sheet {
	width: 100%;
	max-width: 420px;
	max-height: 70vh;
	background: var(--color-bg);
	border-radius: 16px 16px 0 0;
	padding: 4px 0 24px;
	overflow-y: auto;
	box-shadow: var(--shadow-soft);
}

.sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 12px;
}

.sheet__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
	color: var(--color-ink);
}

.sheet__close {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	padding: 4px;
	color: var(--color-muted);
	cursor: pointer;
}

.city-list {
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
}

.city-list__item {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background: none;
	padding: 12px 20px;
	font-family: var(--font-body);
	font-size: 0.92rem;
	color: var(--color-ink);
	cursor: pointer;
}

.city-list__item:hover {
	background: var(--color-surface);
}

.sheet-overlay[hidden] {
	display: none;
}

@media (min-width: 640px) {
	.hero {
		margin: 20px 32px 8px;
	}

	.chip-row {
		padding: 4px 32px 16px;
	}

	.developer-link--top {
		margin: 14px 32px 0;
	}

	.home-intro {
		padding-left: 32px;
		padding-right: 32px;
	}

	.listings,
	.explore-nav,
	.recently-added,
	.nearby-locations {
		padding: 8px 32px 48px;
	}

	.promoters,
	.how-it-works,
	.promoter-banner,
	.trust-badges,
	.faq {
		padding-left: 32px;
		padding-right: 32px;
	}

	.scroll-row {
		padding: 4px 32px 8px;
	}

	.site-footer {
		padding: 24px 32px 32px;
	}

	.sheet-overlay {
		align-items: center;
	}

	.sheet {
		border-radius: var(--radius);
		max-height: 60vh;
	}
}

/* Desktop: Featured Plots and Explore Plots switch from a horizontal
   scroll-snap row to a wrapping grid — a peek-ahead scroller is a mobile
   affordance, not "a squeezed mobile layout" stretched wide. */
@media (min-width: 900px) {
	.scroll-row {
		flex-wrap: wrap;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.scroll-row--featured {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}

	.scroll-row--recent {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}

	.scroll-row--explore {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	.scroll-row--promoters {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}

	.scroll-row--featured > *,
	.scroll-row--recent > *,
	.scroll-row--explore > *,
	.scroll-row--promoters > * {
		width: auto;
		max-width: none;
	}

	.site-footer {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.how-it-works__steps {
		flex-direction: row;
		justify-content: center;
		gap: 40px;
	}

	.how-it-works__step {
		flex: 1;
		max-width: 280px;
	}

	.trust-badges__list {
		flex-direction: row;
	}

	.trust-badges__item {
		flex: 1;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}