/**
 * Enclavians — design system.
 *
 * Loaded after base.css (structure) and owns the visual language: palette,
 * type scale, and every public-facing component. Tokens drive the inner pages
 * further down the file, so re-theming happens in :root rather than per
 * component.
 */

:root {
	/* Brand palette. Green carries actions and trust; gold is an accent only
	   and is never used for large fills or long text. */
	--enc-primary: #0C5A32;
	--enc-primary-strong: #073D24;
	--enc-primary-deep: #052E1D;
	--enc-primary-soft: #EFF7F1;
	--enc-accent: #C89B32;
	--enc-accent-light: #E4C46D;
	--enc-accent-strong: #A87A15;

	--enc-bg: #F7F8F5;
	--enc-surface: #FFFFFF;
	--enc-surface-2: #EFF2EE;
	--enc-glass: rgba(255, 255, 255, 0.92);
	--enc-text: #172019;
	--enc-text-soft: #3D473F;
	--enc-text-muted: #667067;
	--enc-border: #E2E7E2;
	--enc-border-strong: #CBD4CC;
	--enc-success: #15803D;
	--enc-danger: #C2413A;

	/* Legacy tokens from the structural stylesheet, remapped so it inherits
	   this palette instead of fighting it. */
	--z-green: #0C5A32;
	--z-green-dark: #073D24;
	--z-green-light: #EFF7F1;
	--z-gold: #C89B32;
	--z-bg: #F7F8F5;
	--z-card: #FFFFFF;
	--z-ink: #172019;
	--z-muted: #667067;
	--z-line: #E2E7E2;

	/* How far the search card pulls up over the hero. The hero reserves
	   exactly this much bottom padding, so the two cannot disagree. */
	--enc-hero-lift: 3.25rem;
	/* The header and the hero sit edge to edge and must be the SAME surface.
	   Declared once so a copy cannot drift — it already had, by four in the blue
	   channel, which is exactly the kind of difference that shows as a seam and
	   not as a colour. */
	--enc-header-surface: linear-gradient(115deg, #05301C 0%, #0B4A2B 42%, #094729 100%);
	--enc-hero-text: #FFFFFF;
	--enc-hero-muted: rgba(255, 255, 255, 0.86);
	/* The footer is dark in both themes, so its muted tone is one value. */
	--enc-footer-muted: rgba(255, 255, 255, 0.62);

	--enc-radius-sm: 8px;
	--enc-radius: 12px;
	--enc-radius-lg: 18px;

	--enc-shadow-xs: 0 1px 2px rgba(23, 32, 25, 0.05);
	--enc-shadow: 0 1px 3px rgba(23, 32, 25, 0.06), 0 8px 24px -12px rgba(23, 32, 25, 0.14);
	--enc-shadow-hover: 0 2px 6px rgba(23, 32, 25, 0.08), 0 18px 40px -16px rgba(23, 32, 25, 0.22);
	--enc-shadow-lg: 0 24px 60px -24px rgba(5, 46, 29, 0.4);
	--enc-ring: 0 0 0 3px rgba(12, 90, 50, 0.28);

	--enc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--enc-font-display: "Playfair Display", Georgia, serif;
	--enc-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--enc-header-h: 76px;
	color-scheme: light;
}

html[data-theme="dark"] {
	--enc-primary: #3E9A63;
	--enc-primary-strong: #57B67C;
	--enc-primary-deep: #0B160F;
	--enc-primary-soft: rgba(62, 154, 99, 0.14);
	--enc-accent: #D8AC48;
	--enc-accent-light: #E9CC81;
	--enc-accent-strong: #E9CC81;

	--enc-bg: #0E1310;
	--enc-surface: #161C18;
	--enc-surface-2: #1D251F;
	--enc-glass: rgba(14, 19, 16, 0.9);
	--enc-text: #E9EFEA;
	--enc-text-soft: #C4CFC7;
	--enc-text-muted: #94A197;
	--enc-border: #26312A;
	--enc-border-strong: #364438;

	--z-green: #3E9A63;
	--z-green-dark: #57B67C;
	--z-green-light: rgba(62, 154, 99, 0.14);
	--z-bg: #0E1310;
	--z-card: #161C18;
	--z-ink: #E9EFEA;
	--z-muted: #94A197;
	--z-line: #26312A;

	--enc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
	--enc-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 28px -12px rgba(0, 0, 0, 0.6);
	--enc-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.55), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
	--enc-ring: 0 0 0 3px rgba(62, 154, 99, 0.4);
	color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body.site-body {
	font-family: var(--enc-font);
	background: var(--enc-bg);
	color: var(--enc-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* Nothing may cause sideways scroll at any width. */
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--enc-font-display);
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--enc-text);
	line-height: 1.2;
}

.wrap { width: min(100% - 2rem, 1320px); margin-inline: auto; }

:focus-visible { outline: none; box-shadow: var(--enc-ring); border-radius: 6px; }
::selection { background: var(--enc-primary-soft); color: var(--enc-text); }

/* Icon-only controls still need a real touch target. */
.enc-tap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.enc-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Header ───────────────────────────────────────────────────────────── */
/* The header carries the logo, and the logo's wordmark runs gold to WHITE:
   "ENCLA" is gold, "VIANS" is white, and the tagline and the swoosh under it
   are white too. On the near-white bar this used to be, 37.4% of the artwork's
   opaque pixels fell below a 1.6:1 contrast ratio and simply were not there.
   Measured on this gradient instead: 4.9%.

   Everything in the bar is restated below rather than left to inherit, because
   the defaults are tuned for dark-on-light — .btn-post in particular was
   --enc-primary green, which on a green bar would have vanished as thoroughly
   as the wordmark did. */
.top-header {
	position: sticky;
	top: 0;
	z-index: 900;
	/* The lightest stop is #094729, not the brand's #0C5A32, and it is measured
	   rather than chosen: tests/header-contrast-test.php walks the emblem pixel
	   by pixel against every stop this rule declares.

	   It was #0A5430 while the header carried the full lockup. The lockup was
	   mostly white and gold wordmark, which floated its average; the emblem on
	   its own is a third green hillside, and green on a light green bar
	   disappears. At #0A5430 the emblem measures 85.6% visible against a 90%
	   threshold, at #094B2B 89.8%, and at #094729 91.3%.

	   The emblem sits at the left where the bar is darkest, but the gradient's
	   geometry shifts with viewport width, so the whole bar is kept safe rather
	   than relying on where the artwork happens to land. */
	background: var(--enc-header-surface);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 8px 28px -18px rgba(0, 0, 0, 0.55);
}
/* Deeper in dark mode so the bar still reads as a distinct surface rather than
   glowing against the page behind it. */
html[data-theme="dark"] { --enc-header-surface: linear-gradient(115deg, #03210F 0%, #06341E 45%, #0A4526 100%); }
html[data-theme="dark"] .top-header {
	background: var(--enc-header-surface);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.top-header .nav-link { color: rgba(255, 255, 255, 0.86); }
.top-header .nav-link:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}
.top-header .nav-link.is-active { color: #fff; font-weight: 600; }
/* Gold underline against white text: the accent already reads as the brand's,
   and it is the one colour in the logo that survives on both backgrounds. */
.top-header .nav-link.is-active::after { background: var(--enc-accent); }

/* Gold, not green. A green pill on a green bar is a shape you have to hunt
   for, and this is the primary call to action on the page. */
.top-header .btn-post {
	background: var(--enc-accent);
	border-color: var(--enc-accent);
	color: #231904;
}
.top-header .btn-post:hover { background: #D9AC44; border-color: #D9AC44; }

.top-header .header-icon {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.92);
}
.top-header .header-icon:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}
.top-header .nav-toggle {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
}

/* Signed-in pill. Left alone it was a solid white lozenge on the green bar,
   brighter than the logo beside it. The dropdown it opens is a light surface
   and keeps its own dark text — these rules stop at the trigger. */
.top-header .enc-user-btn {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
}
.top-header .enc-user-btn:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.18);
}
.top-header .enc-user-btn svg { color: rgba(255, 255, 255, 0.72); }
/* Gold rather than --enc-primary: a green avatar inside a translucent pill on
   a green bar is three greens deep and the initial stops reading. */
.top-header .enc-user-avatar { background: var(--enc-accent); color: #231904; }
.header-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: var(--enc-header-h);
}
/* ── Header brand lockup ───────────────────────────────────────────────────
   The emblem is artwork; the wordmark and tagline are live text. As a single
   bitmap the whole lockup had to fit the height of the bar, so the scene and
   the brand name shrank together and neither survived.

   align-items and gap are set explicitly because base.css also defines
   .logo-mark (for the admin header) with baseline alignment and a 4px gap, and
   both stylesheets load on public pages. */
.logo-mark {
	display: inline-flex;
	align-items: center;
	gap: clamp(10px, 1vw, 16px);
	text-decoration: none;
	flex: 0 0 auto;
	min-width: 0;
	color: inherit;
}
.logo-mark:focus-visible {
	outline: 2px solid var(--enc-accent-light);
	outline-offset: 4px;
	border-radius: var(--enc-radius-sm);
}
/* Sized by width, not height: the emblem is a landscape band, and constraining
   the height is what made it a sliver in the first place. */
.logo-img {
	display: block;
	width: clamp(72px, 8vw, 116px);
	height: auto;
	flex: 0 0 auto;
}
.logo-mark picture { display: block; flex: 0 0 auto; }

.logo-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	line-height: 1;
}

/* Cinzel is cut from Roman inscriptional capitals, which is what the original
   wordmark was drawn from — Playfair, the site's other display face, is a
   didone and reads as a different brand. Georgia is the fallback because it is
   the closest thing to it that ships everywhere. */
.logo-name {
	font-family: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
	font-size: clamp(20px, 2vw, 30px);
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}
/* Gold on the first four letters, echoing the original artwork's gold-to-white
   wordmark. accent-light, not accent: #C89B32 is a mid gold that goes muddy on
   this bar, and this is the one part of the name that must not recede. */
.logo-name-accent { color: var(--enc-accent-light); }

.logo-tagline {
	margin-top: 4px;
	/* Its own line-height: the column is set to 1 to keep the two lines tight,
	   which would clip the descender in "Your Community". */
	line-height: 1.25;
	font-family: var(--enc-font);
	font-size: clamp(9px, 0.72vw, 11px);
	font-weight: 500;
	letter-spacing: 0.085em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.74);
}

.header-nav { display: flex; align-items: center; gap: 0.25rem; margin-inline: auto; }
.nav-link {
	position: relative;
	padding: 0.55rem 0.85rem;
	border-radius: var(--enc-radius-sm);
	color: var(--enc-text-soft);
	text-decoration: none;
	font-size: 0.94rem;
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.16s var(--enc-ease), background 0.16s var(--enc-ease);
}
.nav-link:hover { color: var(--enc-primary); background: var(--enc-primary-soft); }
.nav-link.is-active { color: var(--enc-primary); font-weight: 600; }
.nav-link.is-active::after {
	content: "";
	position: absolute;
	left: 0.85rem; right: 0.85rem; bottom: 0.15rem;
	height: 2px; border-radius: 2px;
	background: var(--enc-accent);
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.btn-post {
	display: inline-flex; align-items: center; gap: 0.45rem;
	padding: 0.62rem 1.15rem;
	border-radius: 999px;
	background: var(--enc-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	border: 1px solid var(--enc-primary);
	white-space: nowrap;
	transition: background 0.16s var(--enc-ease), transform 0.16s var(--enc-ease);
}
.btn-post:hover { background: var(--enc-primary-strong); transform: translateY(-1px); }

.header-icon {
	position: relative;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--enc-border);
	background: var(--enc-surface);
	color: var(--enc-text-soft);
	text-decoration: none;
	cursor: pointer;
}
.header-icon:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.header-icon__count {
	position: absolute; top: -2px; right: -2px;
	min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 999px;
	background: var(--enc-accent);
	color: #1A1405;
	font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
}

.nav-toggle { display: none; }

/* ── Signed-in user menu ─────────────────────────────────────────────────
   Lost when this stylesheet was rewritten: the markup was still emitting the
   avatar, name and dropdown, so a signed-in header rendered as raw HTML with
   the menu permanently open. */
.enc-user { position: relative; flex: 0 0 auto; }
.enc-user > .nav-link { white-space: nowrap; }

.enc-user-menu[hidden],
.enc-user-drop[hidden] { display: none !important; }

.enc-user-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.7rem 0.35rem 0.35rem;
	min-height: 44px;
	border: 1px solid var(--enc-border);
	border-radius: 999px;
	background: var(--enc-surface);
	color: var(--enc-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.16s var(--enc-ease), background 0.16s var(--enc-ease);
}
.enc-user-btn:hover { border-color: var(--enc-primary); background: var(--enc-primary-soft); }
.enc-user-btn svg { color: var(--enc-text-muted); flex: 0 0 auto; }

.enc-user-avatar {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--enc-primary);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1;
}
.enc-user-name {
	max-width: 9ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.enc-user-drop {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 950;
	min-width: 210px;
	padding: 0.4rem;
	display: grid;
	gap: 0.1rem;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	box-shadow: var(--enc-shadow-hover);
}
.enc-user-drop a,
.enc-user-drop button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.65rem 0.75rem;
	border: 0;
	border-radius: var(--enc-radius-sm);
	background: none;
	color: var(--enc-text);
	font: inherit;
	font-size: 0.9rem;
	text-decoration: none;
	cursor: pointer;
}
.enc-user-drop a:hover,
.enc-user-drop button:hover { background: var(--enc-primary-soft); color: var(--enc-primary); }
/* Sign out is destructive-ish and sits apart from the navigation items. */
.enc-user-drop button#enc-user-signout {
	margin-top: 0.25rem;
	border-top: 1px solid var(--enc-border);
	border-radius: 0 0 var(--enc-radius-sm) var(--enc-radius-sm);
	color: var(--enc-danger);
}
.enc-user-drop button#enc-user-signout:hover { background: rgba(194, 65, 58, 0.09); color: var(--enc-danger); }

/* ── Mobile drawer ────────────────────────────────────────────────────── */
.mobile-drawer {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; grid-template-columns: 1fr min(84vw, 340px);
	visibility: hidden;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer.is-open { visibility: visible; }
.mobile-drawer__scrim {
	background: rgba(5, 46, 29, 0.5);
	opacity: 0;
	transition: opacity 0.24s var(--enc-ease);
	border: 0; padding: 0; cursor: pointer;
}
.mobile-drawer.is-open .mobile-drawer__scrim { opacity: 1; }
.mobile-drawer__panel {
	background: var(--enc-surface);
	box-shadow: var(--enc-shadow-lg);
	padding: 1.1rem 1.2rem 2rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.26s var(--enc-ease);
	display: flex; flex-direction: column; gap: 0.35rem;
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: none; }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.mobile-drawer__link {
	display: block;
	padding: 0.85rem 0.6rem;
	border-radius: var(--enc-radius-sm);
	color: var(--enc-text);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid var(--enc-border);
}
.mobile-drawer__link:hover { background: var(--enc-primary-soft); color: var(--enc-primary); }
.mobile-drawer .btn-post { margin-top: 1rem; justify-content: center; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* The hero is the search, and a surface behind it.
   It measured 580px tall carrying 102px of text — 478px of it empty — with a
   photograph of the Margalla Hills, which is Islamabad, on a portal that now
   covers the whole country. Both problems are gone: the height follows the
   content, and the backdrop is the brand's own colour rather than a picture of
   one city pretending to stand for all of them.

   The text sits at the BOTTOM so it leads into the search instead of floating
   above it, and the bottom padding is exactly the overlap the search card
   pulls back up (--enc-hero-lift), so the reserved space is used rather than
   left blank. */
.hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(220px, 21vw, 288px);
	display: flex;
	align-items: flex-end;
	padding: clamp(3rem, 7vw, 5rem) 0 calc(var(--enc-hero-lift) + clamp(1.25rem, 2vw, 2rem));
	color: #fff;
	overflow: hidden;
	/* The SAME gradient the header carries, not merely a similar one.
	   The two sit edge to edge with nothing between them, so any difference in
	   angle or stop reads as a seam — an accident, not a decision. Matched, the
	   header and the hero are one deep-green field that the search card sits in.
	   Kept in sync by hand because the header's rule is in the structural sheet;
	   if you change one, change the other.

	   The green stays as the BASE even though a photograph sits on it: it is
	   what the band shows while the image is still arriving, so the top of the
	   page is never white and never shifts, and it is the same gradient the
	   header carries so the two remain one surface. */
	background: var(--enc-header-surface);
}
.hero__media {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
	/* The subject — mosque, skyline, the Margallas — sits on the horizon, which
	   is above centre in this frame. A centred crop puts the empty foreground on
	   screen and the skyline half out of it. */
	object-position: center 42%;
}
/* Readability scrim, angled from the lower left.
   The photograph is a sunset: bright and warm on the right, dark and green on
   the left. The headline sits bottom-left, so the scrim is heaviest exactly
   there and clears almost entirely by the right-hand edge, where there is no
   text to protect and the light is the whole point of the picture.

   The second gradient darkens the top edge, where the hero meets the header —
   without it the photograph's sky starts abruptly against the header's green
   and the join reappears that --enc-header-surface exists to remove. */
.hero::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(100deg, rgba(5, 48, 28, 0.93) 0%, rgba(5, 48, 28, 0.74) 28%, rgba(5, 48, 28, 0.34) 58%, rgba(5, 48, 28, 0.12) 100%),
		linear-gradient(180deg, rgba(5, 48, 28, 0.62) 0%, rgba(5, 48, 28, 0) 42%);
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: 2.5rem; align-items: start; width: 100%; }
.hero h1 {
	color: #fff;
	font-size: clamp(2.15rem, 4.4vw, 3.6rem);
	line-height: 1.08;
	margin: 0 0 1rem;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
	/* Long words must be allowed to break rather than push the layout wider
	   than the viewport. */
	overflow-wrap: break-word;
}
.hero h1 em { font-style: normal; color: var(--enc-accent-light); }
/* A line break only where there is width for it. Below that the heading wraps
   naturally — a hard <br> here overflowed a 390px screen. */
.hero__break { display: none; }
@media (min-width: 900px) { .hero__break { display: block; } }
.hero__sub {
	color: var(--enc-hero-muted);
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	max-width: 54ch;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Community panel */
.hero__communities {
	background: rgba(7, 61, 36, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--enc-radius-lg);
	padding: 1.25rem 1.35rem;
	box-shadow: var(--enc-shadow-lg);
}
.hero__communities h2 {
	color: #fff; font-size: 1.05rem; margin: 0 0 0.9rem;
	font-family: var(--enc-font); font-weight: 600; letter-spacing: 0.01em;
}
.hero__communities ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.hero__communities a {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.55rem 0.4rem;
	border-radius: var(--enc-radius-sm);
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none; font-size: 0.92rem; font-weight: 500;
}
.hero__communities a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.hero__dot {
	width: 30px; height: 30px; flex: 0 0 auto;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(232, 200, 120, 0.4);
	display: grid; place-items: center;
	font-size: 0.82rem; color: var(--enc-accent-light); font-weight: 700;
}
.hero__count { margin-left: auto; font-size: 0.78rem; color: rgba(255, 255, 255, 0.62); font-weight: 500; }

/* ── Search panel ─────────────────────────────────────────────────────── */
/* Pulled up over the hero's lower edge so the fold shows search + listings. */
.searchbar { margin-top: clamp(-5.5rem, -7vw, -4.5rem); position: relative; z-index: 5; }
.searchbar__card {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow-lg);
	/* NOT overflow:hidden. It was here to clip the tab strip to the rounded
	   corners, and it also clipped the location typeahead's dropdown — the
	   panel appeared cut off mid-result. The tab strip rounds its own corners
	   instead, which is the narrower fix. */
}
.searchbar__tabs {
	display: flex; gap: 0; border-bottom: 1px solid var(--enc-border);
	background: var(--enc-surface-2);
	border-radius: var(--enc-radius-lg) var(--enc-radius-lg) 0 0;
}
.searchbar__tab {
	flex: 0 0 auto;
	padding: 0.9rem 1.6rem;
	border: 0; background: transparent;
	font: inherit; font-weight: 600; font-size: 0.95rem;
	color: var(--enc-text-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	text-decoration: none;
}
.searchbar__tab:hover { color: var(--enc-primary); }
.searchbar__tab.is-active {
	color: var(--enc-primary);
	background: var(--enc-surface);
	border-bottom-color: var(--enc-primary);
}
.searchbar__body { padding: 1.1rem 1.2rem 1.2rem; }
.searchbar__fields {
	display: grid;
	grid-template-columns: 1.3fr 1.1fr 1fr 0.9fr 0.9fr auto;
	gap: 0.7rem;
	align-items: end;
}
.searchbar__field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.searchbar__field label {
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--enc-text-muted);
}
.searchbar__field select,
.searchbar__field input {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--enc-border-strong);
	border-radius: var(--enc-radius-sm);
	background: var(--enc-surface);
	color: var(--enc-text);
	font: inherit; font-size: 0.94rem;
	min-height: 44px;
}
.searchbar__field select:focus, .searchbar__field input:focus { border-color: var(--enc-primary); }
.btn-search {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.78rem 1.6rem; min-height: 46px;
	border: 0; border-radius: var(--enc-radius-sm);
	background: var(--enc-primary); color: #fff;
	font: inherit; font-weight: 600; font-size: 0.95rem;
	cursor: pointer; white-space: nowrap;
	transition: background 0.16s var(--enc-ease);
}
.btn-search:hover { background: var(--enc-primary-strong); }
.searchbar__foot {
	display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
	margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--enc-border);
}
.searchbar__foot-label { font-size: 0.82rem; color: var(--enc-text-muted); font-weight: 500; }
.searchbar__chip {
	padding: 0.36rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--enc-border-strong);
	background: var(--enc-surface);
	color: var(--enc-text-soft);
	font-size: 0.82rem; font-weight: 500; text-decoration: none;
}
.searchbar__chip:hover { border-color: var(--enc-primary); color: var(--enc-primary); background: var(--enc-primary-soft); }
.searchbar__more {
	margin-left: auto; background: none; border: 0; font: inherit;
	color: var(--enc-primary); font-weight: 600; font-size: 0.86rem; cursor: pointer;
}

/* `[hidden]` does not hide an element whose display is grid or flex — the
   browser's own rule is display:none, which loses on specificity. Toggled
   containers need this explicitly (CLAUDE.md §8). */
.searchbar__fields[hidden],
.pgrid[hidden],
.trust[hidden],
.cgrid[hidden],
.detail-bar[hidden] { display: none !important; }

/* ── Trust strip ──────────────────────────────────────────────────────── */
.trust {
	margin-top: 1.5rem;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.trust__item { display: flex; align-items: center; gap: 0.9rem; padding: 1.15rem 1.3rem; }
.trust__item + .trust__item { border-left: 1px solid var(--enc-border); }
.trust__icon {
	width: 52px; height: 52px; flex: 0 0 auto;
	border-radius: 999px;
	background: var(--enc-primary-soft);
	display: grid; place-items: center;
}
.trust__icon img { width: 30px; height: 30px; object-fit: contain; }
.trust__title { font-family: var(--enc-font); font-weight: 600; font-size: 0.95rem; margin: 0; }
.trust__text { margin: 0.1rem 0 0; font-size: 0.83rem; color: var(--enc-text-muted); line-height: 1.45; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0; }
.section--soft { background: var(--enc-primary-soft); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.section__title { font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin: 0; }
.section__sub { margin: 0.3rem 0 0; color: var(--enc-text-muted); font-size: 0.95rem; }
.section__link { color: var(--enc-primary); font-weight: 600; text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.section__link:hover { text-decoration: underline; }

/* ── Property grid + card ─────────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1180px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pgrid { grid-template-columns: 1fr; } }

.pcard {
	display: flex; flex-direction: column;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	overflow: hidden;
	transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease), border-color 0.18s var(--enc-ease);
	height: 100%;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); border-color: var(--enc-border-strong); }
.pcard:focus-within { box-shadow: var(--enc-ring); }
.pcard.is-featured { border-color: var(--enc-accent); }

.pcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--enc-surface-2); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--enc-ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__badges { position: absolute; top: 0.65rem; left: 0.65rem; display: flex; gap: 0.35rem; flex-wrap: wrap; max-width: calc(100% - 4rem); }
.pbadge {
	padding: 0.28rem 0.6rem;
	border-radius: 6px;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: #fff; background: var(--enc-primary);
	white-space: nowrap;
}
.pbadge--rent { background: #1F5E8C; }
.pbadge--wanted { background: var(--enc-accent-strong); }
.pbadge--featured { background: var(--enc-accent); color: #241A05; }
.pbadge--verified { background: var(--enc-success); }
/* Files are a distinct product — non-possession, still on DHA installments —
   so the badge is neutral rather than borrowing a sale/rent colour. */
.pbadge--file { background: #6B4E1E; }

.pcard__fav {
	position: absolute; top: 0.55rem; right: 0.55rem;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 999px; border: 0;
	background: rgba(255, 255, 255, 0.92);
	color: var(--enc-text-soft);
	cursor: pointer;
	box-shadow: var(--enc-shadow-xs);
}
.pcard__fav:hover { color: var(--enc-danger); }
.pcard__fav.is-on { color: var(--enc-danger); }

.pcard__body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.pcard__price { font-family: var(--enc-font); font-size: 1.15rem; font-weight: 700; color: var(--enc-primary); margin: 0; letter-spacing: -0.01em; }
.pcard__price span { font-size: 0.8rem; font-weight: 500; color: var(--enc-text-muted); }
/* "Profit" reads as a label on the figure, not muted small print like /month. */
.pcard__price .pcard__pricetag {
	font-size: 0.66rem; font-weight: 700; color: #6B4E1E;
	background: #F4ECD8; border-radius: 5px; padding: 0.08em 0.4em;
	letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 0.12em;
}
.pcard__title {
	margin: 0; font-family: var(--enc-font); font-size: 0.98rem; font-weight: 600; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__title a { color: inherit; text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; }
.pcard__loc { margin: 0; font-size: 0.85rem; color: var(--enc-text-muted); display: flex; align-items: center; gap: 0.3rem; }
.pcard__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; }
.pcard__meta span {
	display: inline-flex; align-items: center; gap: 0.28rem;
	padding: 0.28rem 0.5rem;
	border-radius: 6px;
	background: var(--enc-surface-2);
	font-size: 0.78rem; color: var(--enc-text-soft); font-weight: 500;
}
.pcard__foot { display: flex; gap: 0.5rem; padding: 0 1rem 1rem; }
.pcard__cta {
	flex: 1; text-align: center;
	padding: 0.6rem 0.8rem; min-height: 42px;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
	border-radius: var(--enc-radius-sm);
	background: var(--enc-primary); color: #fff;
	font-weight: 600; font-size: 0.88rem; text-decoration: none;
	position: relative; z-index: 1;
}
.pcard__cta:hover { background: var(--enc-primary-strong); }
/* "Reach this person". Renamed from .pcard__wa along with the glyph — it was
   a WhatsApp mark on a control that opens the reveal, not a chat. Sized to
   match the button beside it so the pair reads as one action row rather than
   a button with something stuck on the end. */
.pcard__contact {
	width: 44px; align-self: stretch;
	display: inline-grid; place-items: center;
	border-radius: var(--enc-radius-sm);
	border: 1px solid var(--enc-border-strong);
	color: var(--enc-text-soft); text-decoration: none;
	position: relative; z-index: 1;
	transition: border-color .15s, color .15s, background-color .15s;
}
.pcard__contact:hover { border-color: var(--enc-primary); color: var(--enc-primary); background: var(--enc-primary-soft); }
.pcard__contact:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 2px; }
/* Freshness, on the image rather than in a row of its own beneath the card.
   It cost 33px of every card on every page to say four words, and read as an
   afterthought — when how recently a listing was posted is one of the two
   things that decide whether somebody believes it. */
.pcard__age {
  position: absolute; left: 0.65rem; bottom: 0.65rem; z-index: 1;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: .01em;
  color: #fff; background: rgba(5, 46, 29, 0.72);
  backdrop-filter: blur(3px);
}
.pcard__date { font-size: 0.74rem; color: var(--enc-text-muted); }

/* Marks a stock image so it cannot be read as a photograph of the property. */
.pcard__stock {
	position: absolute;
	left: 0.65rem;
	bottom: 0.65rem;
	padding: 0.24rem 0.55rem;
	border-radius: 5px;
	background: rgba(23, 32, 25, 0.78);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.detail-gallery .hero-img { position: relative; }
.detail-stock { left: 1rem; bottom: 1rem; font-size: 0.75rem; }

/* Wanted cards read as requirements, not inventory. */
.pcard--wanted { background: var(--enc-primary-soft); border-color: rgba(12, 90, 50, 0.18); }
.pcard--wanted .pcard__media { display: grid; place-items: center; aspect-ratio: 16 / 9; background: transparent; }
.pcard__wantmark { text-align: center; padding: 1rem; }
.pcard__wantmark strong { display: block; font-size: 0.95rem; color: var(--enc-primary-strong); }
.pcard__wantmark span { font-size: 0.82rem; color: var(--enc-text-muted); }

/* ── Community explorer ───────────────────────────────────────────────── */
/* Auto-fit rather than a fixed column count: the community list is data, and
   pinning the grid to five left an orphan tile when a sixth was added. */
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cgrid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .cgrid { grid-template-columns: 1fr; } }
.ccard {
	position: relative;
	/* A column, so the call to action can be pushed to the bottom. The grid
	   already stretches the boxes to equal height; without this the link sits
	   wherever the name happens to end, and a place whose name wraps to a third
	   line drops its link 19px below its neighbours'. A row of links that nearly
	   line up reads as a mistake in a way that no alignment at all would not. */
	display: flex;
	flex-direction: column;
	padding: 1.3rem 1.15rem;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	text-decoration: none;
	transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease), border-color 0.18s var(--enc-ease);
}
.ccard:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); border-color: var(--enc-primary); }
.ccard__name { font-family: var(--enc-font); font-weight: 600; font-size: 1rem; color: var(--enc-text); margin: 0 0 0.3rem; }
.ccard__count { font-size: 0.85rem; color: var(--enc-text-muted); margin: 0; }
.ccard__go { margin-top: auto; padding-top: 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--enc-primary); display: inline-flex; gap: 0.3rem; align-items: center; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta {
	background: linear-gradient(120deg, var(--enc-primary-deep), var(--enc-primary-strong) 70%);
	border-radius: var(--enc-radius-lg);
	padding: clamp(1.8rem, 4vw, 2.8rem);
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
}
.cta h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 0.5rem; }
.cta p { color: rgba(255, 255, 255, 0.84); margin: 0; max-width: 56ch; }
.cta__points { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.cta__points li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); }
.cta__points li::before { content: "✓"; color: var(--enc-accent-light); font-weight: 700; }
.cta__actions { display: flex; flex-direction: column; gap: 0.7rem; }
.cta__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.85rem 1.5rem; min-height: 48px;
	border-radius: var(--enc-radius-sm);
	font-weight: 600; text-decoration: none; font-size: 0.98rem;
}
.cta__btn--primary { background: var(--enc-accent); color: #241A05; }
.cta__btn--primary:hover { background: var(--enc-accent-light); }
.cta__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
.cta__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
	background: var(--enc-primary-deep);
	color: rgba(255, 255, 255, 0.76);
	padding: clamp(2.4rem, 5vw, 3.4rem) 0 1.5rem;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.footer-brandcol img { height: 44px; width: auto; margin-bottom: 0.9rem; }
.footer-brandcol p { font-size: 0.86rem; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.62); }
.footer-col h3 {
	font-family: var(--enc-font); font-size: 0.8rem; font-weight: 700;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--enc-accent-light); margin: 0 0 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.89rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
	margin-top: 2.2rem; padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	font-size: 0.8rem; color: rgba(255, 255, 255, 0.55);
}
.footer-disclaimer {
	margin: 0 0 1rem; font-size: 0.79rem; line-height: 1.6;
	color: rgba(255, 255, 255, 0.5); max-width: 90ch;
}

/* ── Detail page ──────────────────────────────────────────────────────── */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.85fr); gap: 1.6rem; align-items: start; }
.detail-side { position: sticky; top: calc(var(--enc-header-h) + 1rem); display: grid; gap: 1rem; }
.detail-card { background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius); padding: 1.2rem; box-shadow: var(--enc-shadow); }
.detail-price { font-family: var(--enc-font); font-size: 1.7rem; font-weight: 700; color: var(--enc-primary); margin: 0.5rem 0 0.2rem; }
.detail-pricetag {
	font-size: 0.72rem; font-weight: 700; color: #6B4E1E;
	background: #F4ECD8; border-radius: 6px; padding: 0.12em 0.5em;
	letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 0.28em;
}
.detail-pricenote { font-size: 0.82rem; color: var(--enc-text-muted); margin: 0.1rem 0 0.4rem; }
.detail-title { font-size: 1.3rem; margin: 0 0 0.5rem; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0; }
.detail-fact { background: var(--enc-surface-2); border-radius: var(--enc-radius-sm); padding: 0.6rem 0.75rem; }
.detail-fact dt { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--enc-text-muted); font-weight: 600; margin: 0; }
.detail-fact dd { margin: 0.15rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--enc-text); }

/* Contact actions. The SVGs carry no intrinsic size, so without an explicit
   width they rendered at their natural box — full column width — and the links
   fell back to default blue. */
.detail-contact { display: flex; gap: 0.6rem; margin: 1rem 0 0.6rem; flex-wrap: wrap; }
.prop-act {
	flex: 1 1 0;
	min-width: 140px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--enc-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.16s var(--enc-ease), border-color 0.16s var(--enc-ease);
}
.prop-act svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.prop-act-call { background: var(--enc-primary); color: #fff; }
.prop-act-call:hover { background: var(--enc-primary-strong); }
.prop-act-wa { background: var(--enc-surface); color: var(--enc-success); border-color: var(--enc-border-strong); }
.prop-act-wa:hover { border-color: var(--enc-success); background: var(--enc-primary-soft); }

.detail-contact-number { font-size: 0.88rem; color: var(--enc-text-muted); margin: 0.2rem 0 0; text-align: center; }
.detail-contact-number b { color: var(--enc-text); }

.detail-society { font-size: 0.95rem; color: var(--enc-text-muted); margin: 0.35rem 0 0; }
.detail-society strong { color: var(--enc-text); font-weight: 600; }

.detail-purpose {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	background: var(--enc-primary-soft);
	color: var(--enc-primary);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Save control on the detail page — a labelled pill, unlike the icon-only
   heart on a card. */
.detail-fav {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--enc-border-strong);
	border-radius: 999px;
	background: var(--enc-surface);
	color: var(--enc-text-soft);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
}
.detail-fav:hover { border-color: var(--enc-danger); color: var(--enc-danger); }
.detail-fav[aria-pressed="true"] { color: var(--enc-danger); border-color: var(--enc-danger); }
.prop-fav-ic { font-size: 1rem; line-height: 1; }
.detail-fav-txt { white-space: nowrap; }

/* Icon-only heart on a listing card (the JS toggles .enc-fav / is-on). */
.enc-fav.is-on, .prop-fav.is-on { color: var(--enc-danger); }

/* Theme toggle: exactly one icon at a time. Both were showing because the
   swap rules did not survive the stylesheet rewrite. */
.enc-icon-sun { display: none; }
html[data-theme="dark"] .enc-icon-sun { display: block; }
html[data-theme="dark"] .enc-icon-moon { display: none; }

/* Sign-in card (login page). */
.enc-auth-wrap { display: grid; place-items: center; padding: clamp(2rem, 6vw, 4rem) 0; }
.enc-auth-card {
	width: min(100%, 420px);
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow);
	padding: clamp(1.5rem, 4vw, 2.2rem);
	text-align: center;
}

/* Breadcrumbs — also the trail search engines read. */
.breadcrumbs { margin: 0 0 1.1rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; font-size: 0.85rem; }
.breadcrumbs li { color: var(--enc-text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--enc-border-strong); }
.breadcrumbs a { color: var(--enc-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li[aria-current] {
	max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Content blocks down the left column of the detail page. */
.detail-block {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	padding: 1.2rem 1.3rem;
	margin-top: 1rem;
}
.detail-block h3 { margin: 0 0 0.9rem; font-size: 1.05rem; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.7rem; margin: 0; }
.feature { background: var(--enc-surface-2); border-radius: var(--enc-radius-sm); padding: 0.65rem 0.8rem; }
.feature dt { margin: 0; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--enc-text-muted); font-weight: 600; }
.feature dd { margin: 0.2rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--enc-text); }

.detail-maplink {
	display: inline-flex; align-items: center; gap: 0.5rem;
	min-height: 44px; padding: 0.6rem 1rem;
	border: 1px solid var(--enc-border-strong); border-radius: var(--enc-radius-sm);
	color: var(--enc-primary); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.detail-maplink:hover { border-color: var(--enc-primary); background: var(--enc-primary-soft); }

.seller-row { display: flex; align-items: center; gap: 0.9rem; }
.seller-avatar {
	width: 46px; height: 46px; flex: 0 0 auto;
	display: grid; place-items: center; border-radius: 999px;
	background: var(--enc-primary); color: #fff; font-weight: 700; font-size: 1.1rem;
}
.seller-name { margin: 0; font-weight: 600; color: var(--enc-text); }
.seller-role { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--enc-text-muted); }

.detail-report { margin: 1.4rem 0 0; text-align: center; font-size: 0.85rem; }
.detail-report a { color: var(--enc-text-muted); text-decoration: underline; }
.detail-report a:hover { color: var(--enc-danger); }

/* Gallery */
.detail-gallery { background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius); overflow: hidden; }
.detail-gallery .hero-img {
	/* height:auto is required: the structural stylesheet pins a fixed height,
	   and with a definite height an aspect-ratio computes the WIDTH from it —
	   which left the photo narrower than its container. */
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	background: var(--enc-surface-2);
}
.detail-gallery .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-gallery .thumbs { display: flex; gap: 0.5rem; padding: 0.6rem; overflow-x: auto; }
.detail-gallery .thumbs img {
	width: 84px; height: 64px; object-fit: cover; flex: 0 0 auto;
	border-radius: var(--enc-radius-sm); cursor: pointer;
	border: 2px solid transparent; opacity: 0.75;
	transition: opacity 0.16s var(--enc-ease), border-color 0.16s var(--enc-ease);
}
.detail-gallery .thumbs img:hover { opacity: 1; }
.detail-gallery .thumbs img.is-active,
.detail-gallery .thumbs img.is-feature-thumb { border-color: var(--enc-primary); opacity: 1; }

.detail-desc { background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius); padding: 1.2rem 1.3rem; margin-top: 1rem; }
.detail-desc h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.detail-desc p { margin: 0; color: var(--enc-text-soft); }

.detail-toprow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

.prop-act-msg { background: var(--enc-surface); color: var(--enc-primary); border-color: var(--enc-border-strong); }
.prop-act-msg:hover { border-color: var(--enc-primary); background: var(--enc-primary-soft); }

/* Mobile contact bar: fixed, above everything, with room for safe areas. */
.detail-bar {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
	background: var(--enc-surface);
	border-top: 1px solid var(--enc-border);
	padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
	gap: 0.5rem;
	box-shadow: 0 -8px 28px -18px rgba(0, 0, 0, 0.5);
}
.detail-bar a { flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: var(--enc-radius-sm); font-weight: 600; text-decoration: none; font-size: 0.92rem; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
	.searchbar__fields { grid-template-columns: 1fr 1fr 1fr; }
	.searchbar__fields .btn-search { grid-column: 1 / -1; }
	.trust { grid-template-columns: 1fr 1fr; }
	.trust__item:nth-child(3) { border-left: 0; }
	.trust__item:nth-child(n+3) { border-top: 1px solid var(--enc-border); }
}
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; gap: 1.6rem; }
	.hero__communities { max-width: 460px; }
	.detail-layout { grid-template-columns: 1fr; }
	.detail-side { position: static; }
}
@media (max-width: 900px) {
	.header-nav { display: none; }
	.nav-toggle { display: inline-flex; }
	.btn-post span { display: none; }
	.btn-post { padding: 0.62rem 0.9rem; }
	.cta { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	/* Sign-in lives in the drawer on small screens; keeping it in the bar
	   pushed the row past the viewport. */
	.enc-user { display: none; }
}
@media (max-width: 760px) {
	:root { --enc-header-h: 64px; }
	/* The tagline goes before the name shrinks: losing a secondary line costs
	   nothing, and a brand name too small to read costs the identity. */
	.logo-tagline { display: none; }
	.logo-img { width: 62px; }
	.logo-name { font-size: 20px; }
	.logo-mark { gap: 9px; }
	.hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.4rem); }
	.hero__communities { padding: 1rem; }
	.header-row { gap: 0.5rem; }
	.header-actions { gap: 0.35rem; margin-left: auto; }
	.searchbar { margin-top: -3rem; }
	.searchbar__fields { grid-template-columns: 1fr; }
	.searchbar__tab { flex: 1; padding: 0.8rem 0.5rem; text-align: center; }
	.trust { grid-template-columns: 1fr; }
	.trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--enc-border); }
	.hero { min-height: 400px; padding-bottom: 4.5rem; }
	.detail-bar { display: flex; }
	/* Keep the fixed bar from covering the end of the page. */
	body.has-detail-bar { padding-bottom: 72px; }
}
@media (max-width: 400px) {
	.wrap { width: min(100% - 1.5rem, 1320px); }
	.searchbar__foot-label { display: none; }
	/* The floor. Below this the brand would stop being legible, so the emblem
	   gives up width and the tracking closes rather than the name getting any
	   smaller. */
	.logo-img { width: 54px; }
	.logo-name { font-size: 17px; letter-spacing: 0.02em; }
	.logo-mark { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.pcard:hover { transform: none; }
	.pcard:hover .pcard__media img { transform: none; }
}


/* ─────────── Inner pages (account, legal, pricing, payments) ─────────── */
/* ── Legal documents (Terms of Use, Privacy Policy) ── */
.legal-doc {
	max-width: 76ch;
	margin: 1.6rem auto 2.4rem;
	color: var(--enc-text);
	line-height: 1.7;
	font-size: 0.97rem;
}
.legal-head { margin-bottom: 1.4rem; }
.legal-kicker {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--enc-primary);
	background: var(--enc-primary-soft);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	margin-bottom: 0.7rem;
}
.legal-head h1 {
	font-family: var(--enc-font-display);
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	line-height: 1.15;
	margin: 0 0 0.4rem;
	letter-spacing: -0.02em;
}
.legal-updated { color: var(--enc-text-muted); font-size: 0.85rem; margin: 0; }
.legal-callout {
	background: var(--enc-primary-soft);
	border: 1px solid var(--enc-border);
	border-left: 4px solid var(--enc-primary);
	border-radius: 12px;
	padding: 1rem 1.15rem;
	margin: 1.4rem 0 1.8rem;
	font-size: 0.94rem;
	line-height: 1.65;
}
.legal-doc h2 {
	font-family: var(--enc-font-display);
	font-size: 1.22rem;
	margin: 2rem 0 0.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--enc-border);
	letter-spacing: -0.01em;
}
.legal-doc h3 { font-size: 1.02rem; margin: 1.2rem 0 0.4rem; color: var(--enc-text); }
.legal-doc p { margin: 0.6rem 0; }
.legal-doc ul { margin: 0.6rem 0; padding-left: 1.3rem; }
.legal-doc li { margin: 0.4rem 0; }
.legal-doc a { color: var(--enc-primary); font-weight: 600; }
.legal-doc a:hover { text-decoration: underline; }
.legal-foot-links {
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--enc-border);
	font-size: 0.9rem;
	color: var(--enc-text-muted);
}
.footer-legal {
	max-width: 80ch;
	margin: 0.8rem auto 0;
	font-size: 0.78rem;
	line-height: 1.55;
	/* Was --enc-text-muted, i.e. the body text colour, which rendered dark
	   grey on the dark footer and was effectively invisible. */
	color: var(--enc-footer-muted);
	text-align: center;
}
.footer-legal a { color: inherit; text-decoration: underline; }

/* ── Onboarding (role selection + profile) ── */
.ua-ob-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) { .ua-ob-cards { grid-template-columns: 1fr; } }
.ua-ob-card {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	padding: 1.4rem 1.3rem;
	box-shadow: var(--enc-shadow-xs);
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ua-ob-card:hover { border-color: var(--enc-primary); box-shadow: var(--enc-shadow-hover); transform: translateY(-2px); }
.ua-ob-ico { font-size: 2.2rem; line-height: 1; margin-bottom: 0.5rem; }
.ua-ob-card h3 { margin: 0 0 0.3rem; font-size: 1.12rem; }
.ua-ob-perks { list-style: none; padding: 0; margin: 0.7rem 0 1.1rem; flex: 1; }
.ua-ob-perks li { position: relative; padding-left: 1.3rem; margin: 0.35rem 0; font-size: 0.88rem; color: var(--enc-text-soft); }
.ua-ob-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--enc-primary); font-weight: 800; }
.ua-ob-formwrap { max-width: 620px; margin: 0 auto; }
.ua-ob-back { display: inline-block; margin-bottom: 0.6rem; }
.ua-ob-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.8rem 0; font-size: 0.9rem; color: var(--enc-text-soft); }
.ua-ob-check input { margin-top: 0.15rem; flex: none; }

/* ── Role badge + package summary strip ── */
.ua-role-badge {
	display: inline-block; margin-top: 0.35rem;
	font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
	color: var(--enc-primary); background: rgba(4, 120, 87, 0.1);
	border-radius: 999px; padding: 0.2rem 0.6rem;
}
.ua-plan {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem;
	background: var(--enc-surface); border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius); padding: 0.9rem 1.2rem; margin: 0.4rem 0 1rem;
}
.ua-plan-item { display: flex; flex-direction: column; gap: 0.15rem; }
.ua-plan-k { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--enc-text-muted); }
.ua-plan-v { font-size: 0.98rem; font-weight: 700; }
.ua-plan-cta { margin-left: auto; font-weight: 700; color: var(--enc-primary); text-decoration: none; white-space: nowrap; }
.ua-plan-cta:hover { text-decoration: underline; }
.ua-limit-note {
	background: #fff8e6; color: #8a5a00; border: 1px solid #f0d98a;
	border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.86rem; margin: 0.6rem 0 0;
}
[data-theme="dark"] .ua-limit-note { background: rgba(217, 119, 6, 0.14); color: #f5c462; border-color: rgba(217, 119, 6, 0.4); }

/* ── User account (ua) ── */
.ua-head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin: 1.4rem 0 0.6rem; }
.ua-title { margin: 0 0 0.2rem; font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.ua-quota { display: flex; align-items: center; gap: 0.8rem; }
.ua-quota-ring {
	display: grid;
	place-items: center;
	min-width: 78px;
	height: 78px;
	border-radius: 50%;
	border: 3px solid var(--enc-primary);
	background: var(--enc-primary-soft);
	font-family: var(--enc-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--enc-primary-strong);
}
.ua-quota-label { font-size: 0.82rem; color: var(--enc-text-muted); line-height: 1.4; }
.ua-quota-label em { font-style: normal; font-size: 0.74rem; opacity: 0.8; }
.ua-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0.8rem 0; }
.ua-actions .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ua-signout {
	margin-left: auto;
	background: none;
	border: 1px solid var(--enc-border-strong);
	border-radius: 999px;
	color: var(--enc-text-muted);
	font-family: var(--enc-font);
	font-size: 0.82rem;
	padding: 0.45rem 1rem;
	cursor: pointer;
}
.ua-signout:hover { border-color: #C62A2F; color: #C62A2F; }
.ua-verified-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-left: 0.4rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--enc-primary-strong);
	background: var(--enc-primary-soft);
	border-radius: 999px;
	padding: 0.12rem 0.5rem;
	text-transform: none;
	letter-spacing: 0;
}
.ua-verify-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--enc-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s, transform 0.15s;
}
.ua-verify-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ua-verify-btn[hidden] { display: none; }
.ua-input-verified {
	background: var(--enc-primary-soft) !important;
	border-color: var(--enc-primary) !important;
	color: var(--enc-primary-strong) !important;
	font-weight: 700;
	cursor: default;
}
.ua-link-btn {
	background: none;
	border: 1px solid var(--enc-border-strong);
	border-radius: 999px;
	color: var(--enc-text-muted);
	font-family: var(--enc-font);
	font-weight: 600;
	font-size: 0.78rem;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	transition: all 0.15s;
}
.ua-link-btn:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.ua-link-btn.is-danger:hover { border-color: #C62A2F; color: #C62A2F; }
.ua-feat-btn {
	background: linear-gradient(135deg, var(--enc-accent), var(--enc-accent-strong));
	border: none;
	border-radius: 999px;
	color: #fff;
	font-family: var(--enc-font);
	font-weight: 650;
	font-size: 0.8rem;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	box-shadow: 0 6px 14px -6px rgba(180, 83, 9, 0.6);
	transition: transform 0.16s var(--enc-ease);
}
.ua-feat-btn:hover { transform: translateY(-1px); }

/* Modals */
.ua-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: min(8vh, 70px) 1rem 1rem;
	background: rgba(5, 20, 14, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	overflow-y: auto;
}
.ua-modal[hidden] { display: none; }
.ua-modal-panel {
	position: relative;
	width: min(560px, 100%);
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.4);
	padding: 1.8rem;
	margin-bottom: 2rem;
}
.ua-modal-panel h2 { margin: 0 0 0.2rem; font-size: 1.3rem; }
.ua-modal-sub { margin: 0 0 1.1rem; font-size: 0.88rem; }
.ua-modal-x {
	position: absolute;
	top: 0.8rem;
	right: 0.9rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--enc-border);
	background: var(--enc-surface-2);
	color: var(--enc-text-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.ua-field { margin: 0.8rem 0; }
.ua-field label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--enc-text-muted); margin-bottom: 0.3rem; }
.ua-field input, .ua-field select, .ua-field textarea {
	width: 100%;
	font-family: var(--enc-font);
	background: var(--enc-surface-2);
	border: 1px solid var(--enc-border-strong);
	border-radius: 10px;
	color: var(--enc-text);
	padding: 0.6rem 0.85rem;
	font-size: 0.92rem;
}
.ua-field textarea { resize: vertical; }
.ua-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ua-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
@media (max-width: 560px) { .ua-2col, .ua-3col { grid-template-columns: 1fr; } }
.ua-seg { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ua-seg button {
	flex: 1;
	min-width: 100px;
	padding: 0.55rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--enc-border-strong);
	background: var(--enc-surface-2);
	color: var(--enc-text-soft);
	font-family: var(--enc-font);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}
.ua-seg button.is-on { background: var(--enc-primary); border-color: var(--enc-primary); color: #fff; }
.ua-photo-previews { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ua-photo-previews img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--enc-border);
}
.ua-photo-previews img.is-cover { outline: 2px solid var(--enc-primary); outline-offset: 1px; }
.ua-error { color: #C62A2F; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; font-size: 0.85rem; padding: 0.6rem 0.9rem; margin: 0.8rem 0; }
.ua-ok { color: #0d4a2c; background: #e8f5ee; border: 1px solid #b8dcc8; border-radius: 10px; font-size: 0.88rem; padding: 0.7rem 0.9rem; margin: 0.8rem 0; }
.ua-feat-steps { display: grid; gap: 1rem; margin: 1rem 0; }
.ua-feat-step { display: flex; gap: 0.8rem; align-items: flex-start; }
.ua-feat-num {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--enc-primary-soft);
	color: var(--enc-primary-strong);
	font-weight: 800;
	font-size: 0.8rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.ua-feat-number { color: var(--enc-primary-strong); font-family: var(--enc-font-display); }

/* ── Pricing ── */
.enc-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0.4rem 0 1rem; }
.enc-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow-xs);
	padding: 1.4rem 1.5rem;
	transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease);
}
.enc-price-card:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); }
.enc-price-card.is-popular { border-color: var(--enc-primary); box-shadow: 0 0 0 1px var(--enc-primary), var(--enc-shadow); }
.enc-price-card.is-recommended { border-color: var(--enc-accent); box-shadow: 0 0 0 2px var(--enc-accent), var(--enc-shadow-hover); }
.enc-price-flag--rec { background: linear-gradient(135deg, var(--enc-primary), var(--enc-primary-strong)); }
.enc-price-limit { font-size: 0.85rem; color: var(--enc-text-soft); margin: -0.3rem 0 0.7rem; }
.enc-price-limit strong { color: var(--enc-text); font-size: 1.05rem; }
.enc-price-note { font-size: 0.74rem; color: var(--enc-text-muted); margin: 0 0 0.8rem; }
.enc-price-card li.is-locked { color: var(--enc-text-muted); opacity: 0.7; }
.enc-price-card li.is-locked::before { content: "🔒"; font-size: 0.7em; top: 0.15em; }
.enc-price-flag {
	position: absolute;
	top: -0.7rem;
	left: 1.2rem;
	background: linear-gradient(135deg, var(--enc-accent), var(--enc-accent-strong));
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 999px;
	padding: 0.24rem 0.7rem;
}
.enc-price-card h3 { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--enc-text); }
.enc-price-amount { font-family: var(--enc-font-display); font-weight: 800; font-size: 1.6rem; color: var(--enc-primary-strong); margin-bottom: 0.7rem; }
.enc-price-amount span { font-size: 0.8rem; font-weight: 550; color: var(--enc-text-muted); margin-left: 0.3rem; }
.enc-price-card ul { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.35rem; flex: 1; }
.enc-price-card li { position: relative; padding-left: 1.3rem; font-size: 0.86rem; color: var(--enc-text-soft); }
.enc-price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--enc-primary); font-weight: 800; }
.enc-price-cta { text-align: center; text-decoration: none !important; }

/* ── Payment page ── */
.enc-pay-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .enc-pay-layout { grid-template-columns: 1fr; } }
.enc-pay-card {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow-xs);
	padding: 1.4rem 1.5rem;
}
.enc-pay-summary { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--enc-border-strong); margin-bottom: 1rem; }
.enc-pay-summary strong { font-size: 1.1rem; color: var(--enc-text); }
.enc-pay-amount { font-family: var(--enc-font-display); font-weight: 800; font-size: 1.7rem; color: var(--enc-primary-strong); }
.enc-pay-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; color: var(--enc-text-soft); font-size: 0.92rem; }
.enc-pay-number { color: var(--enc-primary-strong); font-family: var(--enc-font-display); font-size: 1.05em; }

/* ── Error boxes ── */
.error-box {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	color: var(--enc-text);
}

/* ── Motion prefs ── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 640px) {
	.header-nav { gap: 0.1rem; }
	.nav-link { font-size: 0.8rem; padding: 0.45rem 0.55rem; }
	.logo-sub { display: none; }

	/* 16px form controls prevent iOS focus-zoom */
	input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="password"], select, textarea { font-size: 16px !important; }
}

/* ────────────────────────────────────────────────────────────
   Wanted board — residents looking to rent/buy (auth-gated contact)
   ──────────────────────────────────────────────────────────── */
.wa-hero .wa-kicker { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em;
	color: var(--enc-accent); background: rgba(217, 118, 6, 0.14); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.wa-hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.wa-hero-link { color: var(--enc-hero-muted); text-decoration: none; font-weight: 600; }
.wa-hero-link:hover { color: var(--enc-hero-text); }
.wa-main { padding-top: 26px; }

.wa-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.wa-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
	border: 1px solid var(--enc-border); background: var(--enc-surface); color: var(--enc-text-soft);
	font-weight: 650; font-size: 0.9rem; text-decoration: none; transition: all 0.18s var(--enc-ease); }
.wa-tab:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.wa-tab.is-on { background: var(--enc-primary); border-color: var(--enc-primary); color: #fff; }
.wa-tab span { font-size: 0.78rem; background: rgba(0,0,0,0.08); padding: 1px 8px; border-radius: 999px; }
.wa-tab.is-on span { background: rgba(255,255,255,0.22); }

.wa-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wa-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px;
	background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow); transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease); }
.wa-card:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); }
.wa-card-top { display: flex; justify-content: space-between; align-items: center; }
.wa-ribbon { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
	color: #fff; background: var(--enc-primary); padding: 4px 10px; border-radius: 8px; }
.wa-ribbon.is-rent { background: var(--enc-accent); }
.wa-when { font-size: 0.78rem; color: var(--enc-text-muted); }
.wa-card-title { font-family: var(--enc-font-display); font-size: 1.12rem; font-weight: 750;
	color: var(--enc-text); line-height: 1.3; margin: 2px 0 0; }
.wa-budget { font-size: 1.02rem; font-weight: 800; color: var(--enc-primary-strong); }
:root[data-theme="dark"] .wa-budget { color: var(--enc-primary); }
.wa-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0; padding: 0;
	font-size: 0.86rem; color: var(--enc-text-soft); }
.wa-card-desc { font-size: 0.88rem; color: var(--enc-text-muted); line-height: 1.5; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wa-card-foot { margin-top: auto; padding-top: 8px; }
.wa-contact { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wa-reveal { padding: 9px 16px; font-size: 0.9rem; }
.wa-contact-note { font-size: 0.76rem; color: var(--enc-text-muted); }
.wa-revealed { display: flex; gap: 10px; flex-wrap: wrap; }

.wa-empty { text-align: center; padding: 60px 20px; }
.wa-empty-ic { font-size: 2.6rem; }

/* Reveal modal */
.wa-modal { position: fixed; inset: 0; z-index: 120; background: rgba(8, 24, 18, 0.55);
	display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.wa-modal[hidden] { display: none; }
.wa-modal-card { position: relative; width: 100%; max-width: 420px; background: var(--enc-surface);
	border: 1px solid var(--enc-border); border-radius: var(--enc-radius-lg); padding: 26px 24px;
	box-shadow: var(--enc-shadow-hover); text-align: center; }
.wa-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 1.1rem;
	color: var(--enc-text-muted); cursor: pointer; }
.wa-modal-ic { font-size: 2rem; }
.wa-modal-card h3 { margin: 6px 0 4px; font-family: var(--enc-font-display); }
.wa-modal-card .muted { color: var(--enc-text-muted); font-size: 0.88rem; }
.wa-field { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 14px 0; }
.wa-field span { font-size: 0.82rem; font-weight: 650; color: var(--enc-text-soft); }
.wa-field input { padding: 11px 13px; border: 1px solid var(--enc-border-strong); border-radius: 10px;
	font: inherit; background: var(--enc-surface); color: var(--enc-text); }
.wa-modal-card .btn-primary { width: 100%; }
#wa-recaptcha { margin: 4px 0 12px; display: flex; justify-content: center; }
.wa-err { color: #c0392b; font-size: 0.85rem; margin: 10px 0 0; }
.wa-link { color: var(--enc-primary); font-weight: 600; font-size: 0.85rem; }

/* Guest path (ADR-0006): challenge, then the number. The "or" rule separates
   the two ways in so neither reads as the only one. */
.wa-turnstile { display: flex; justify-content: center; margin: 16px 0 12px; min-height: 66px; }
.wa-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px;
	color: var(--enc-text-muted); font-size: 0.8rem; }
.wa-or::before, .wa-or::after { content: ""; flex: 1; height: 1px; background: var(--enc-border); }
.wa-modal-card .btn-ghost { width: 100%; padding: 10px 16px; font: inherit; font-weight: 600;
	background: none; border: 1px solid var(--enc-border-strong); border-radius: 10px;
	color: var(--enc-text); cursor: pointer; }
.wa-modal-card .btn-ghost:hover { background: var(--enc-surface-alt, rgba(0, 0, 0, 0.03)); }
/* A refusal shown where the button was, not in an alert() to dismiss. */
.wa-contact-err { color: #c0392b; font-size: 0.82rem; margin: 8px 0 0; }

/* Contact states (ADR-0006). The default state is an ordinary action, not a
   barrier: a masked number showing that a real one exists, and a button that
   says what it does. The limit is explained only where a visitor meets it. */
.contact-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 10px; }
.contact-preview-num { font-family: var(--enc-font-display, inherit); font-size: 1.15rem;
	font-weight: 700; letter-spacing: 0.04em; color: var(--enc-text); }
.contact-verified { font-size: 0.72rem; font-weight: 700; color: #0d4a2c; background: #e8f5ee;
	padding: 0.15em 0.6em; border-radius: 999px; white-space: nowrap; }
.contact-note { font-size: 0.78rem; color: var(--enc-text-muted); margin: 8px 0 0; }
/* The button carries an icon; keep the two on one baseline. */
.wa-reveal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wa-reveal svg { flex: none; }

/* Reached the limit: what happened, and the way forward, together. */
.contact-limit { border: 1px solid var(--enc-border); border-radius: 12px; padding: 14px 16px;
	background: var(--enc-surface-alt, rgba(0, 0, 0, 0.02)); }
.contact-limit-msg { margin: 0 0 10px; font-size: 0.9rem; font-weight: 600; color: var(--enc-text); }
.contact-limit .btn-primary { width: 100%; }
.contact-limit .contact-note { text-align: center; }

html[data-theme="dark"] .contact-verified { color: #9ee6bd; background: rgba(13, 74, 44, 0.45); }
html[data-theme="dark"] .contact-limit { background: rgba(255, 255, 255, 0.04); }
@media (max-width: 520px) { .wa-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────
   Listing card refresh — Zameen/Bayut/Zillow pattern:
   price is the hero (compact) in the body, a beds·baths·area
   spec strip, a subtle location line, colour-coded purpose.
   ────────────────────────────────────────────────────────── */
.prop-card { display: flex; flex-direction: column; border-radius: 16px; }
.prop-card-img { position: relative; }
.prop-card-noimg { display: grid; place-items: center; height: 100%; font-size: 2.6rem;
  background: linear-gradient(135deg, var(--enc-surface-2), var(--enc-bg)); color: var(--enc-border-strong); }
/* Purpose badge → top-left; Featured stays top-right */
.prop-card .prop-badge:not(.prop-badge-featured) { position: absolute; top: 0.7rem; left: 0.7rem; right: auto; }
.prop-badge-rent { background: rgba(37, 99, 168, 0.92) !important; }
.prop-badge-purchase { background: var(--enc-accent-strong) !important; }

.prop-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.28rem; }
.prop-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.prop-body .prop-price { position: static; background: none; box-shadow: none; padding: 0; border-radius: 0;
  font-family: var(--enc-font-display); font-weight: 800; font-size: 1.32rem; line-height: 1.1;
  color: var(--enc-primary-strong); letter-spacing: -0.02em; }
html[data-theme="dark"] .prop-body .prop-price { color: var(--enc-primary-strong); }
.prop-price-per { font-size: 0.8rem; font-weight: 600; color: var(--enc-text-muted); }
.prop-title { margin: 0.1rem 0 0; font-size: 0.96rem; font-weight: 700; color: var(--enc-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.prop-loc { font-size: 0.82rem; color: var(--enc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-specs { display: flex; margin-top: 0.55rem; border: 1px solid var(--enc-border); border-radius: 10px;
  background: var(--enc-surface-2); overflow: hidden; }
.prop-spec { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px; border-right: 1px solid var(--enc-border); min-width: 0; }
.prop-spec:last-child { border-right: 0; }
.prop-spec-ic { font-size: 0.92rem; line-height: 1; }
.prop-spec span:not(.prop-spec-ic) { font-size: 0.78rem; color: var(--enc-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-spec b { font-size: 0.86rem; font-weight: 800; color: var(--enc-text); }
.prop-spec-type { flex: 1.5; }
/* even card heights: main stretches, actions pinned to the base */
.prop-card-actions { margin-top: auto; }

/* ── Favourite (♥) button + buyer dashboard ── */
.prop-card { position: relative; }
.prop-fav { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.92); color: #9aa6a0; font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(8,30,22,0.18); transition: transform .15s var(--enc-ease), color .15s; }
.prop-fav:hover { transform: scale(1.1); color: #e0245e; }
.prop-fav.is-on { color: #e0245e; }
:root[data-theme="dark"] .prop-fav { background: rgba(18,27,23,0.92); }
.detail-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-fav { position: static; width: auto; height: 34px; border-radius: 999px; padding: 0 14px; gap: 6px;
  display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 700; border: 1px solid var(--enc-border);
  background: var(--enc-surface); color: var(--enc-text-soft); box-shadow: none; }
.detail-fav.is-on { color: #e0245e; border-color: #f3b6c6; }

/* .ua-ob-card-buyer is gone: it gave the buyer card a 2px primary border,
   making the one role that needs no account the visual hero of the page. */
.ua-b-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0 26px; }
.ua-b-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--enc-radius);
  border: 1px solid var(--enc-border); background: var(--enc-surface); text-decoration: none; color: var(--enc-text);
  cursor: pointer; text-align: left; font: inherit; transition: transform .15s var(--enc-ease), border-color .15s; }
.ua-b-tile:hover { transform: translateY(-3px); border-color: var(--enc-primary); }
.ua-b-tile span { font-size: 1.6rem; }
.ua-b-tile b { font-size: 0.95rem; }
.ua-b-tile small { font-size: 0.78rem; color: var(--enc-text-muted); }
.ua-b-sec { margin: 26px 0; }
.ua-b-sec h2 { font-size: 1.1rem; margin: 0 0 12px; }
.ua-b-req { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--enc-border); border-radius: 12px; background: var(--enc-surface); margin-bottom: 10px; }
.ua-pill { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; background: var(--enc-surface-2); color: var(--enc-text-muted); }
.ua-pill-live { background: var(--enc-primary); color: #fff; }
.ua-pill-pending { background: #f0ad4e; color: #3a2600; }
.ua-pill-rejected { background: #d9534f; color: #fff; }
.ua-b-fav .prop-card-noimg { display: grid; place-items: center; height: 100%; font-size: 2rem; background: linear-gradient(135deg, var(--enc-surface-2), var(--enc-bg)); }

.ua-b-sell-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding: 16px 18px; border: 1px dashed var(--enc-border-strong); border-radius: 14px; background: var(--enc-primary-soft); }
.ua-b-sell-cta > div { flex: 1; min-width: 220px; }
.ua-b-sell-cta b { font-family: var(--enc-font-display); }
.ua-b-sell-cta span:first-child { font-size: 1.2rem; }

.ua-ob-back { display: inline-block; margin-bottom: 10px; color: var(--enc-primary); font-weight: 600; text-decoration: none; font-size: .92rem; }
.ua-ob-back:hover { text-decoration: underline; }

/* ============ Skeleton loading (content placeholders) ============ */
/* Skeleton screens + per-image shimmer. Space is already reserved, so nothing
   here shifts layout. Driven by img-loader.js; degrades to plain content with
   JS off. */
:root { --enc-skel-base: #e2e5ea; --enc-skel-sheen: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] { --enc-skel-base: #27302c; --enc-skel-sheen: rgba(255, 255, 255, 0.07); }
@keyframes enc-img-shimmer { 100% { transform: translateX(100%); } }
@keyframes enc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Per-image shimmer while a real photo loads (cards, hero, thumbs). */
.is-loading { position: relative; overflow: hidden; background: var(--enc-skel-base); }
.is-loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--enc-skel-sheen), transparent);
  transform: translateX(-100%); animation: enc-img-shimmer 1.25s ease-in-out infinite;
}
img.img-fade { opacity: 0; transition: opacity 0.45s var(--enc-ease, ease); }
img.img-fade.is-ready { opacity: 1; }
.is-imgerror::after { animation: none; content: none; }

/* Full skeleton cards shown until the page finishes loading. */
html.enc-loading [data-skel] > :not(.enc-skel) { display: none !important; }
html:not(.enc-loading) .enc-skel { display: none !important; }
[data-skel] { min-height: 140px; }
.enc-skel { pointer-events: none; }
.enc-sk { position: relative; overflow: hidden; background: var(--enc-skel-base); border-radius: 8px; }
.enc-sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--enc-skel-sheen), transparent);
  transform: translateX(-100%); animation: enc-img-shimmer 1.25s ease-in-out infinite;
}
/* Card skeleton (property / goods) — mirrors the real card frame. */
.enc-skel-card { background: var(--enc-card, var(--z-card, #fff)); border: 1px solid var(--enc-border, var(--z-border, #e6e6e6)); border-radius: 16px; overflow: hidden; }
.enc-skel-card .enc-sk-img { height: 210px; border-radius: 0; }
.enc-skel-card .enc-sk-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.enc-sk-bar { height: 13px; }
.enc-sk-row { display: flex; gap: 8px; margin-top: 4px; }
.enc-sk-pill { height: 30px; flex: 1; border-radius: 8px; }
/* Row skeleton (services directory) — mirrors .bz-dir-card. */
.enc-skel-row { display: flex; align-items: center; gap: 14px; background: var(--z-card, #fff); border: 1px solid var(--z-border, #e6e6e6); border-radius: 12px; padding: 14px 16px; }
.enc-skel-row .enc-sk-av { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; }
.enc-skel-row .enc-sk-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.enc-skel-row .enc-sk-btn { width: 74px; height: 38px; border-radius: 9px; flex: 0 0 auto; }
/* Reveal: real items rise/fade in once loading ends. */
[data-skel].enc-reveal > :not(.enc-skel) { animation: enc-fade-in 0.4s var(--enc-ease, ease) both; }

@media (prefers-reduced-motion: reduce) {
  .is-loading::after, .enc-sk::after { animation: none; }
  img.img-fade { transition: none; }
  [data-skel].enc-reveal > :not(.enc-skel) { animation: none; }
}

/* ============ Mobile app promotion band ============ */
.app-promo { margin: 34px 0 8px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #0b4a2f 0%, #0d6b4d 55%, #10855f 100%); color: #fff; }
.app-promo__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 26px 30px; max-width: 1180px; margin: 0 auto; }
.app-promo__copy { flex: 1 1 340px; min-width: 0; }
.app-promo__eyebrow { margin: 0 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #9ee7c4; }
.app-promo__title { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.4px;
  text-wrap: balance; color: #fff; }
.app-promo__sub { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; color: #d8f0e5; max-width: 54ch; }
.app-promo__points { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.app-promo__points li { display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
  font-size: .88rem; color: #eafaf3; }
.app-promo__actions { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.app-store-btn { display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  background: #0a0a0a; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  padding: 10px 18px; transition: transform .15s var(--enc-ease, ease), box-shadow .15s; }
.app-store-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.app-store-btn:focus-visible { outline: 3px solid #9ee7c4; outline-offset: 2px; }
.app-store-btn svg { width: 26px; height: 26px; flex: 0 0 auto; }
.app-store-btn span { display: flex; flex-direction: column; line-height: 1.1; }
.app-store-btn small { font-size: .62rem; letter-spacing: .04em; opacity: .82; }
.app-store-btn strong { font-size: 1rem; font-weight: 700; }
@media (max-width: 720px) {
  .app-promo__inner { padding: 22px 20px; gap: 18px; }
  .app-promo__title { font-size: 1.3rem; }
  .app-promo__actions { width: 100%; }
  .app-store-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .app-store-btn:hover { transform: none; } }

/* ============ Payment account block (revealed after sign-in) ============ */
.enc-pay-accounts { margin: .5rem 0 0; padding: .7rem .9rem; border: 1px dashed var(--enc-border);
  border-radius: 10px; background: var(--enc-surface-2); }
.enc-pay-accounts__msg { margin: 0; font-size: .85rem; }
.enc-pay-accounts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.enc-pay-accounts__list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.enc-pay-accounts__list span { flex: 1 1 190px; font-size: .8rem; color: var(--enc-text-soft); }
.enc-pay-accounts__list strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem; letter-spacing: .02em; }
.enc-copy { border: 1px solid var(--enc-border); background: var(--enc-surface); border-radius: 7px;
  font-size: .72rem; font-weight: 600; padding: .2rem .55rem; cursor: pointer; color: var(--enc-text-soft); }
.enc-copy:hover { border-color: var(--enc-primary); color: var(--enc-primary); }

/* ── Live support widget (ADR-0007) ─────────────────────────────────────── */
.sup-widget { position: fixed; right: 18px; bottom: 18px; z-index: 130; }
.sup-launch {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--enc-primary); color: #fff; border: 0;
	border-radius: 999px; padding: 11px 18px; font: inherit; font-weight: 600; font-size: 0.9rem;
	box-shadow: var(--enc-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.18)); cursor: pointer;
}
.sup-launch:hover { background: var(--enc-primary-strong); }
.sup-launch:focus-visible { outline: 2px solid var(--enc-accent); outline-offset: 2px; }

.sup-panel {
	position: absolute; right: 0; bottom: 56px;
	width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px));
	display: flex; flex-direction: column;
	background: var(--enc-surface); border: 1px solid var(--enc-border);
	border-radius: 14px; overflow: hidden;
	box-shadow: var(--enc-shadow-hover, 0 12px 34px rgba(0, 0, 0, 0.2));
}
.sup-panel[hidden] { display: none; }
.sup-head {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
	padding: 13px 15px; border-bottom: 1px solid var(--enc-border); background: var(--enc-primary-soft);
}
.sup-head strong { display: block; font-size: 0.92rem; }
/* The dot is the honest bit: it says whether a person is actually there. */
.sup-state { font-size: 0.74rem; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.sup-state::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.sup-state.is-on { color: #0d7a45; }
.sup-state.is-off { color: var(--enc-text-muted); }
.sup-x { background: none; border: 0; font-size: 1rem; color: var(--enc-text-muted); cursor: pointer; padding: 2px 4px; }

.sup-log { flex: 1; overflow-y: auto; padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; }
.sup-msg { max-width: 85%; align-self: flex-start; }
.sup-msg p {
	margin: 0; padding: 8px 12px; border-radius: 13px 13px 13px 4px;
	background: var(--enc-bg); border: 1px solid var(--enc-border);
	font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere;
}
.sup-msg.is-mine { align-self: flex-end; }
.sup-msg.is-mine p {
	background: var(--enc-primary); border-color: var(--enc-primary); color: #fff;
	border-radius: 13px 13px 4px 13px;
}
.sup-who { font-size: 0.7rem; color: var(--enc-text-muted); margin-left: 3px; }
.sup-greet p { background: transparent; border-style: dashed; color: var(--enc-text-muted); }

.sup-form { border-top: 1px solid var(--enc-border); padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.sup-fields { display: flex; flex-direction: column; gap: 6px; }
.sup-fields input, .sup-send textarea {
	font: inherit; font-size: 0.85rem; width: 100%;
	border: 1px solid var(--enc-border-strong); border-radius: 9px; padding: 8px 10px;
	background: var(--enc-surface); color: var(--enc-text);
}
.sup-send { display: flex; gap: 7px; align-items: flex-end; }
.sup-send textarea { resize: none; }
.sup-go {
	background: var(--enc-primary); color: #fff; border: 0; border-radius: 9px;
	padding: 9px 15px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.sup-go[disabled] { opacity: 0.6; cursor: default; }
.sup-err { color: #c0392b; font-size: 0.8rem; margin: 0; }
/* Off-screen rather than display:none — a hidden field some bots still fill. */
.sup-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Agency page (ADR-0007) ─────────────────────────────────────────────── */
.agency-head {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 20px; align-items: center; padding: 22px 0 26px;
	border-bottom: 1px solid var(--enc-border); margin-bottom: 24px;
}
.agency-mark {
	width: 76px; height: 76px; border-radius: 16px; overflow: hidden; flex: none;
	background: var(--enc-primary-soft); display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--enc-border);
}
.agency-mark img { width: 100%; height: 100%; object-fit: cover; }
.agency-mark span { font-family: var(--enc-font-display); font-size: 2rem; font-weight: 700; color: var(--enc-primary); }
.agency-id h1 { margin: 0 0 4px; font-size: 1.6rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agency-verified {
	font-size: 0.7rem; font-weight: 700; color: #0d4a2c; background: #e8f5ee;
	border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.agency-areas { margin: 0; font-size: 0.88rem; color: var(--enc-text-soft); }
.agency-addr { margin: 3px 0 0; font-size: 0.82rem; color: var(--enc-text-muted); }
.agency-contact { text-align: right; }
.agency-about { max-width: 68ch; margin: 0 0 26px; color: var(--enc-text-soft); font-size: 0.95rem; }
.agency-team { margin-bottom: 30px; }
.agency-people { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.agency-person {
	display: flex; align-items: center; gap: 9px;
	background: var(--enc-surface); border: 1px solid var(--enc-border);
	border-radius: 999px; padding: 6px 14px 6px 6px;
}
.agency-person-mark {
	width: 28px; height: 28px; border-radius: 999px; background: var(--enc-primary-soft);
	color: var(--enc-primary); font-weight: 700; font-size: 0.8rem;
	display: flex; align-items: center; justify-content: center;
}
.agency-person-name { font-size: 0.86rem; font-weight: 600; }
.agency-person-role { font-size: 0.7rem; color: var(--enc-text-muted); }

@media (max-width: 720px) {
	.agency-head { grid-template-columns: auto minmax(0, 1fr); }
	.agency-contact { grid-column: 1 / -1; text-align: left; }
}

/* ── Buyer ↔ seller messaging (ADR-0007, Phase E) ───────────────────────── */
.listing-chat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--enc-border); }
.chat-open { width: 100%; }
.btn-ghost {
	padding: 10px 16px; font: inherit; font-weight: 600; font-size: 0.9rem;
	background: none; border: 1px solid var(--enc-border-strong); border-radius: 10px;
	color: var(--enc-text); cursor: pointer;
}
.btn-ghost:hover { background: var(--enc-primary-soft); border-color: var(--enc-primary); }

.chat-box { display: flex; flex-direction: column; gap: 10px; }
.chat-log {
	display: flex; flex-direction: column; gap: 7px;
	max-height: 260px; overflow-y: auto; padding: 2px;
}
.chat-msg { max-width: 88%; align-self: flex-start; }
.chat-msg p {
	margin: 0; padding: 8px 12px; font-size: 0.86rem; line-height: 1.45;
	background: var(--enc-bg); border: 1px solid var(--enc-border);
	border-radius: 13px 13px 13px 4px; overflow-wrap: anywhere;
}
.chat-msg.is-mine { align-self: flex-end; }
.chat-msg.is-mine p {
	background: var(--enc-primary); border-color: var(--enc-primary); color: #fff;
	border-radius: 13px 13px 4px 13px;
}
.chat-form { display: flex; gap: 7px; align-items: flex-end; }
.chat-form textarea {
	flex: 1; font: inherit; font-size: 0.86rem; resize: vertical;
	border: 1px solid var(--enc-border-strong); border-radius: 10px; padding: 9px 11px;
	background: var(--enc-surface); color: var(--enc-text);
}
.chat-err { color: #c0392b; font-size: 0.8rem; margin: 0; }

/* ── Two-factor prompt (ADR-0009) ──────────────────────────────────────────
   Injected by enc-verify.js on first use, so it styles itself rather than
   relying on any one page's markup. */
.ev-wrap { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; }
.ev-wrap[hidden] { display: none; }
.ev-back { position: absolute; inset: 0; background: rgba(5, 30, 18, 0.55); }
.ev-card {
	position: relative;
	width: min(420px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--enc-surface);
	color: var(--enc-text);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow-lg);
	padding: 26px 24px 20px;
}
.ev-x {
	position: absolute; top: 10px; right: 12px;
	background: none; border: 0; cursor: pointer;
	font-size: 1.5rem; line-height: 1; color: var(--enc-text-muted);
}
.ev-x:hover { color: var(--enc-text); }
.ev-title { margin: 0 0 6px; font-family: var(--enc-font-display); font-size: 1.2rem; }
.ev-lede { margin: 0 0 18px; font-size: 0.9rem; color: var(--enc-text-muted); }
.ev-label { display: block; font-size: 0.84rem; font-weight: 600; margin-bottom: 5px; }
.ev-input {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	background: var(--enc-surface);
	color: var(--enc-text);
	border: 1px solid var(--enc-border-strong);
	border-radius: var(--enc-radius-sm);
	margin-bottom: 14px;
}
.ev-input:focus-visible { outline: 2px solid var(--enc-ring); outline-offset: 1px; }
/* Both reCAPTCHA containers, in one rule.
   There are two phone dialogs — the shared one in enc-verify.js and the
   account page's own — and each renders its own widget. The account one was
   styled inline and never got centred, so the same component looked correct in
   one dialog and left-adrift in the other. Name both here rather than fixing
   the instance, or the next dialog is off-centre too. */
.ev-captcha,
#ua-recaptcha { margin: 0.8rem 0 14px; display: flex; justify-content: center; }
.ev-step .btn-primary { width: 100%; }
.ev-again {
	display: block;
	width: 100%;
	margin-top: 10px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.84rem;
	color: var(--enc-text-muted);
	text-decoration: underline;
	cursor: pointer;
}
.ev-err { margin: 12px 0 0; font-size: 0.86rem; color: var(--enc-danger); }
.ev-err[hidden] { display: none; }

/* ── How far in, and how far to go ─────────────────────────────────────── */
.ev-progress {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--enc-text-muted);
}
.ev-dot {
	width: 18px;
	height: 4px;
	border-radius: 2px;
	background: var(--enc-border-strong);
	transition: background 200ms var(--enc-ease, ease);
}
.ev-dot.is-on { background: var(--enc-primary); }
.ev-dot.is-done { background: var(--enc-success); }
.ev-progress-t { margin-left: 4px; }

/* ── The Google button ─────────────────────────────────────────────────────
   Google's identity guidelines do not permit their mark on an arbitrary brand
   colour, and complying is the better design anyway: this is the one control
   in the dialog the visitor has already used on other sites, so it should look
   exactly like the one they know. The site's own green is spent on the buttons
   that follow, where it means "this is us". */
.ev-btn-google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 46px;
	padding: 0 18px;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: #1F1F1F;
	background: #FFFFFF;
	border: 1px solid #747775;
	border-radius: var(--enc-radius-sm);
	cursor: pointer;
	transition: background 160ms var(--enc-ease, ease), box-shadow 160ms var(--enc-ease, ease);
}
.ev-btn-google:hover { background: #F7F8F7; box-shadow: var(--enc-shadow-xs); }
.ev-btn-google:active { background: #EFF1EF; }
.ev-btn-google:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 2px; }
.ev-btn-google[disabled] { cursor: default; opacity: 0.72; }
/* The mark keeps its own colours in both themes — it is Google's, not ours. */
.ev-g { flex: 0 0 auto; display: block; }
.ev-btn-google.is-busy .ev-g { opacity: 0.5; }

/* Dark mode uses Google's own dark variant. The card is --enc-surface, which is
   #161C18 in dark, so keeping the light button would drop a bright white slab
   onto a dark surface. The dark button reads as almost the same shade as the
   card (1.07:1) and is separated by its border, which is how Google's variant
   is designed to work: #8E918F clears the card at 5.44:1. */
html[data-theme="dark"] .ev-btn-google {
	color: #E3E3E3;
	background: #131314;
	border-color: #8E918F;
}
html[data-theme="dark"] .ev-btn-google:hover { background: #1B1B1C; }
html[data-theme="dark"] .ev-btn-google:active { background: #202021; }

/* ── What the visitor gets ─────────────────────────────────────────────────
   A gate that only lists its own requirements reads as an obstacle. The same
   gate is worth passing when it says what it buys you. */
.ev-benefits {
	list-style: none;
	margin: 18px 0 0;
	padding: 15px 0 0;
	border-top: 1px solid var(--enc-border);
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.ev-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--enc-text-soft);
}
.ev-benefits svg {
	flex: 0 0 auto;
	margin-top: 1px;
	color: var(--enc-success);
}
/* --enc-success has no dark override, and #15803D on the dark card is a dim
   3.45:1. Lightened here rather than in the token, which is also worn by
   listing badges and the WhatsApp actions. */
html[data-theme="dark"] .ev-benefits svg { color: #57B67C; }
html[data-theme="dark"] .ev-dot.is-done { background: #57B67C; }
/* What the visitor will be asked for, said before they type (ADR-0009). */
.sup-gate {
	margin: 0 0 8px;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--enc-text-muted);
	background: var(--enc-surface-2);
	border-radius: var(--enc-radius-sm);
	padding: 8px 10px;
}
.sup-gate[hidden] { display: none; }

/* ── A city we know about but have not opened (ADR-0010) ──────────────────
   Deliberately quiet and text-led. The page's job is to be honest about the
   absence and offer the one useful next step, not to dress the absence up. */
.citysoon { max-width: 44rem; margin: 0 auto; padding: 4rem 1.25rem 6rem; }
.citysoon-card { text-align: left; }
.citysoon-eyebrow {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--enc-text-muted); margin: 0 0 .75rem;
}
.citysoon-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 1rem;
  text-wrap: balance;
}
.citysoon-lede { color: var(--enc-text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.75rem; }
.citysoon-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.citysoon-note {
  font-size: .92rem; color: var(--enc-text-muted); line-height: 1.6;
  border-left: 3px solid var(--enc-accent); padding-left: .9rem; margin: 0 0 2.5rem;
}
.citysoon-open { border-top: 1px solid var(--enc-border); padding-top: 1.5rem; }
.citysoon-open-title { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--enc-text-muted); margin: 0 0 .75rem; }
.citysoon-open-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.citysoon-open-list a {
  display: inline-flex; align-items: baseline; gap: .5rem;
  border: 1px solid var(--enc-border); border-radius: 999px;
  padding: .45rem .95rem; text-decoration: none; color: inherit;
}
.citysoon-open-list a:hover { border-color: var(--enc-accent); }
.citysoon-open-list span { font-size: .82rem; color: var(--enc-text-muted); }

/* ── The location typeahead (ADR-0010) ────────────────────────────────────
   Replaces a community <select> that could only ever hold one city. The
   panel is absolutely positioned so it does not push the search bar around
   as results arrive — a form that resizes under the cursor is a form people
   mis-click. */
.plsearch { position: relative; }
.plsearch__input {
  width: 100%; padding: .55rem .7rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--enc-border); border-radius: .4rem;
  background: var(--enc-surface); color: var(--enc-text);
}
.plsearch__input:focus-visible { outline: 2px solid var(--enc-accent); outline-offset: 1px; }
.plsearch__list {
  /* Wider than the field it hangs from: "Margalla Enclave DHA-1 — Islamabad"
     does not fit a narrow filter column, and a wrapped place name in a
     typeahead is unreadable at a glance. */
  position: absolute; z-index: 60; left: 0; min-width: 22rem; width: max-content;
  max-width: min(28rem, 90vw); top: calc(100% + .35rem);
  margin: 0; padding: .25rem; list-style: none;
  background: var(--enc-surface); border: 1px solid var(--enc-border);
  border-radius: .5rem; box-shadow: 0 12px 32px rgba(0,0,0,.16);
  /* Scrolls only once there are genuinely too many; eight results fit. */
  max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
}
/* `[hidden]` does not hide a flex/grid/block element — CLAUDE.md §8. */
.plsearch__list[hidden] { display: none; }
.plsearch__item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name kind" "where kind";
  gap: 0 .6rem; padding: .5rem .6rem; border-radius: .35rem; cursor: pointer;
}
.plsearch__item.is-on, .plsearch__item:hover { background: var(--enc-accent-soft, rgba(0,0,0,.05)); }
.plsearch__name { grid-area: name; font-weight: 600; }
.plsearch__where { grid-area: where; font-size: .82rem; color: var(--enc-text-muted); }
.plsearch__kind {
  grid-area: kind; align-self: center; font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--enc-text-muted); white-space: nowrap;
}
.plsearch__none { padding: .7rem .6rem; font-size: .88rem; color: var(--enc-text-muted); line-height: 1.5; }

/* ── Onboarding: the role step ────────────────────────────────────────────
   Two cards, not three. The supply-side roles carry the page because a buyer
   needs no account to search — putting a role gate in front of browsing is a
   toll booth before the thing they came for, while every listing on the site
   arrives from an owner or an agency.

   Three cards in the old two-column grid also orphaned the last one beside an
   empty cell, which is most of what made this screen read as unfinished. */
.ua-ob-head { text-align: center; max-width: 34rem; margin: 0 auto 2rem; }
.ua-ob-eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--enc-accent-strong, var(--enc-accent)); font-weight: 700; margin: 0 0 .6rem;
}
.ua-ob-title {
  font-family: var(--enc-font-display, inherit);
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; margin: 0 0 .6rem;
  letter-spacing: -.02em; text-wrap: balance;
}
.ua-ob-sub { color: var(--enc-text-muted); margin: 0; font-size: 1rem; line-height: 1.55; }

.ua-ob-roles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem; max-width: 60rem; margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 780px) { .ua-ob-roles { grid-template-columns: 1fr; } }

.ua-ob-role-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--enc-surface);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-lg, 1rem);
  padding: 1.9rem 1.7rem 1.6rem;
  box-shadow: var(--enc-shadow-xs);
  transition: border-color .2s var(--enc-ease, ease), box-shadow .2s, transform .2s;
}
.ua-ob-role-card:hover,
.ua-ob-role-card:focus-within {
  border-color: var(--enc-primary);
  box-shadow: var(--enc-shadow-lg, var(--enc-shadow-hover));
  transform: translateY(-3px);
}
/* One hairline of accent, only on the professional tier. Restraint is what
   reads as premium here — two competing highlights would read as neither. */
.ua-ob-role-card--pro::before {
  content: ""; position: absolute; inset: -1px -1px auto; height: 3px;
  border-radius: var(--enc-radius-lg, 1rem) var(--enc-radius-lg, 1rem) 0 0;
  background: linear-gradient(90deg, var(--enc-accent), var(--enc-primary));
}

.ua-ob-role-top { margin-bottom: 1.25rem; }
.ua-ob-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 1rem;
  border-radius: .75rem;
  background: var(--enc-primary-soft, var(--enc-surface-2));
  color: var(--enc-primary);
}
/* Line icons rather than emoji: emoji render differently on every OS, sit off
   the baseline, and cannot take the brand colour. */
.ua-ob-mark svg { width: 1.6rem; height: 1.6rem; }
.ua-ob-role-card--pro .ua-ob-mark { background: var(--enc-accent-soft, var(--enc-surface-2)); color: var(--enc-accent-strong, var(--enc-accent)); }

.ua-ob-kicker {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--enc-text-muted); font-weight: 700; margin: 0 0 .35rem;
}
.ua-ob-role-card h2 {
  font-family: var(--enc-font-display, inherit);
  font-size: 1.45rem; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.015em;
}
.ua-ob-role-lede { color: var(--enc-text-muted); font-size: .95rem; line-height: 1.55; margin: 0; }

.ua-ob-role-card .ua-ob-perks {
  list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1;
  border-top: 1px solid var(--enc-border); padding-top: 1.15rem;
}
.ua-ob-role-card .ua-ob-perks li {
  position: relative; padding-left: 1.55rem; margin: .55rem 0;
  font-size: .92rem; line-height: 1.5; color: var(--enc-text-soft);
}
.ua-ob-role-card .ua-ob-perks li strong { color: var(--enc-text); font-weight: 650; }
.ua-ob-role-card .ua-ob-perks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .78rem; height: .44rem; border-left: 2px solid var(--enc-primary);
  border-bottom: 2px solid var(--enc-primary); transform: rotate(-45deg);
}
.ua-ob-role-card--pro .ua-ob-perks li::before {
  border-color: var(--enc-accent-strong, var(--enc-accent));
}
.ua-ob-go { width: 100%; }

/* The buyer path. Deliberately quiet and deliberately still here: browsing
   needs no account, but saving favourites and posting a Wanted ad do. */
.ua-ob-buyer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; max-width: 60rem; margin: 1.75rem auto 0;
  padding: 1.15rem 1.4rem;
  border: 1px dashed var(--enc-border-strong, var(--enc-border));
  border-radius: var(--enc-radius);
  background: var(--enc-surface-2, transparent);
}
.ua-ob-buyer h3 { font-size: 1rem; margin: 0 0 .2rem; }
.ua-ob-buyer p { margin: 0; font-size: .88rem; color: var(--enc-text-muted); line-height: 1.5; max-width: 48ch; }
.ua-ob-buyer-go {
  flex-shrink: 0; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: .55rem 1.1rem; border-radius: var(--enc-radius-sm, .4rem);
  border: 1px solid var(--enc-border-strong, var(--enc-border));
  background: var(--enc-surface); color: var(--enc-text);
  transition: border-color .2s, color .2s;
}
.ua-ob-buyer-go:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.ua-ob-buyer-go:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 2px; }

@media (max-width: 560px) {
  .ua-ob-buyer { flex-direction: column; align-items: flex-start; }
  .ua-ob-buyer-go { width: 100%; }
}
.plsearch__n { color: var(--enc-text); font-weight: 600; }
.plsearch__n::before { content: "·"; margin: 0 .4em; color: var(--enc-text-muted); font-weight: 400; }
.plsearch__kind {
  font-size: .66rem; letter-spacing: .08em; padding: .15rem .45rem;
  border: 1px solid var(--enc-border); border-radius: 999px; align-self: center;
}
.footer-attrib { font-size: .8rem; opacity: .75; }
.footer-attrib a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

/* ── Home hero: the search bar ───────────────────────────────────────────
   Four fields in ONE container with hairline dividers, not four boxed inputs
   in a row. That is the difference between a filter bar and a settings form,
   and it is most of why one reads as considered. `Where` is twice the width
   because it is the field people actually use. */
.hero__inner { display: block; max-width: 60rem; }
.hero__title {
  font-family: var(--enc-font-display, inherit);
  font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.05; letter-spacing: -.02em;
  margin: 0 0 .45rem; text-wrap: balance;
}
/* No bottom margin: the search card's own pull-up is the gap. Another one here
   is the gap counted twice. */
.hero__sub { font-size: clamp(.98rem, 1.6vw, 1.1rem); margin: 0; max-width: 46ch;
             color: var(--enc-hero-muted); }

.hsearch-wrap { position: relative; z-index: 5; }
/* Only over the hero image, and only where there IS one. */
.hsearch-wrap--over { margin-top: calc(var(--enc-hero-lift) * -1); }

/* On a phone the hero is competing with the search for the only screen there
   is, and the search wins: the fields stack, so the card alone is most of a
   viewport. Smaller type, less padding, and a shorter lift. */
@media (max-width: 760px) {
  :root { --enc-hero-lift: 2rem; }
  .hero { min-height: 0; padding-top: 2rem; }
  .hero__title { font-size: clamp(1.65rem, 7vw, 2.1rem); }
  .hero__sub { font-size: .95rem; }
}
.hsearch-wrap:not(.hsearch-wrap--over) { margin-top: 1.5rem; }

.hsearch {
  background: var(--enc-surface); border-radius: var(--enc-radius-lg);
  box-shadow: var(--enc-shadow-lg); border: 1px solid var(--enc-border);
  /* NOT overflow:hidden — the location typeahead hangs out of this box. */
}
.hsearch__tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--enc-border);
  background: var(--enc-surface-2); border-radius: var(--enc-radius-lg) var(--enc-radius-lg) 0 0;
  overflow-x: auto;
}
.hsearch__tab {
  padding: .8rem 1.3rem; font-weight: 600; font-size: .92rem; white-space: nowrap;
  color: var(--enc-text-muted); text-decoration: none; border-bottom: 3px solid transparent;
}
.hsearch__tab:hover { color: var(--enc-primary); }
.hsearch__tab.is-on {
  color: var(--enc-primary); background: var(--enc-surface); border-bottom-color: var(--enc-primary);
}
.hsearch__form { padding: .75rem; }

.hsearch__bar {
  display: flex; align-items: stretch; gap: .35rem;
  border: 1px solid var(--enc-border); border-radius: var(--enc-radius);
  background: var(--enc-surface); padding: .35rem;
}
.hsearch__f {
  flex: 1; min-width: 0; position: relative;
  padding: .3rem .7rem; border-right: 1px solid var(--enc-border);
}
.hsearch__f:last-of-type { border-right: 0; }
.hsearch__f--where { flex: 2.2; }
.hsearch__f--beds { flex: .7; }
.hsearch__f label {
  display: block; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--enc-text-muted); margin-bottom: .1rem; font-weight: 600;
}
/* The controls are transparent and border-free: the CONTAINER is the input.
   A border on each one turns the bar back into four boxes. */
.hsearch__f select,
.hsearch__f input,
.hsearch__f .plsearch__input {
  width: 100%; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: .95rem; color: var(--enc-text);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.hsearch__f .plsearch__input { cursor: text; }
.hsearch__f select:focus-visible,
.hsearch__f input:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 3px; border-radius: 3px; }

.hsearch__go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem;
  padding: 0 1.35rem; font: inherit; font-size: .95rem; font-weight: 650;
  border: 0; border-radius: calc(var(--enc-radius) - 3px); cursor: pointer;
  background: var(--enc-primary); color: #fff;
}
.hsearch__go:hover { background: var(--enc-primary-deep, var(--enc-primary)); }
.hsearch__go:focus-visible { outline: 2px solid var(--enc-accent); outline-offset: 2px; }

.hsearch__adv { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--enc-border); }
.hsearch__adv[hidden] { display: none; }
.hsearch__adv-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.hsearch__adv label {
  display: block; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--enc-text-muted); margin-bottom: .2rem; font-weight: 600;
}
.hsearch__adv input {
  width: 100%; padding: .45rem .6rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--enc-border); border-radius: var(--enc-radius-sm, .4rem);
  background: var(--enc-surface); color: var(--enc-text);
}

.hsearch__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .75rem; font-size: .86rem;
}
.hsearch__foot-label { color: var(--enc-text-muted); }
.hsearch__chip {
  padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--enc-border);
  color: var(--enc-text); text-decoration: none; font-size: .83rem;
}
.hsearch__chip:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.hsearch__more {
  margin-left: auto; background: none; border: 0; font: inherit; font-size: .86rem;
  color: var(--enc-primary); cursor: pointer; text-decoration: underline;
  text-underline-offset: .2em; padding: .25rem 0;
}
.ccard__where { color: var(--enc-text-muted); font-size: .88rem; margin: .15rem 0 .8rem; }

/* The bar stacks below tablet: five controls across a phone is unusable, and
   a horizontally scrolling filter bar is worse than a stacked one. */
@media (max-width: 860px) {
  .hsearch__bar { flex-wrap: wrap; }
  .hsearch__f { flex: 1 1 45%; border-right: 0; border-bottom: 1px solid var(--enc-border); }
  .hsearch__f--where { flex: 1 1 100%; }
  .hsearch__go { flex: 1 1 100%; justify-content: center; padding: .7rem; margin-top: .35rem; }
}
@media (max-width: 480px) {
  .hsearch__f { flex: 1 1 100%; }
  .hsearch__more { margin-left: 0; }
}

/* ── The promise band ────────────────────────────────────────────────────
   Replaces four stock icons making claims nobody could check. One statement
   and three facts a visitor can verify in two clicks — which is the only kind
   of trust copy worth the space. */
.promise {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 3rem;
  padding: 2.5rem 0; border-bottom: 1px solid var(--enc-border); align-items: center;
}
.promise__title {
  font-family: var(--enc-font-display, inherit);
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin: 0 0 .6rem; text-wrap: balance;
}
.promise__lead p { margin: 0; color: var(--enc-text-muted); line-height: 1.6; }
.promise__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.promise__points li {
  padding-left: 1.6rem; position: relative; font-size: .92rem;
  color: var(--enc-text-muted); line-height: 1.55;
}
.promise__points strong { display: block; color: var(--enc-text); font-weight: 650; margin-bottom: .1rem; }
.promise__points li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .8rem; height: .45rem; border-left: 2px solid var(--enc-primary);
  border-bottom: 2px solid var(--enc-primary); transform: rotate(-45deg);
}
@media (max-width: 780px) { .promise { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ── Popular searches ────────────────────────────────────────────────────
   Real searches, from data ADR-0008 already records. Only ones that found
   something: a chip is a promise, and an empty result page breaks it. */
.qchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.qchip {
  display: inline-block; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--enc-border); background: var(--enc-surface);
  color: var(--enc-text); text-decoration: none; font-size: .9rem; line-height: 1.3;
}
.qchip:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.qchip:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 2px; }

/* ── Pick up where you left off ──────────────────────────────────────────
   An offer, not an applied filter. Sits under the bar so it reads as a
   suggestion about the search rather than a banner about the site. */
.recall { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
          margin-top: .8rem; font-size: .88rem; }
.recall[hidden] { display: none; }
.recall__label { color: var(--enc-text-muted); }
.recall__go {
  padding: .3rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--enc-primary); color: var(--enc-primary); font-weight: 600;
}
.recall__go:hover { background: var(--enc-primary-soft); }
.recall__x {
  background: none; border: 0; font-size: 1.15rem; line-height: 1; cursor: pointer;
  color: var(--enc-text-muted); padding: 0 .25rem;
}
.recall__x:hover { color: var(--enc-text); }

/* ── Recently viewed ─────────────────────────────────────────────────────
   Hidden until there are at least two: one card is not a list, it is a
   leftover. `[hidden]` needs the explicit rule — CLAUDE.md §8. */
#enc-recent[hidden] { display: none; }
.rgrid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.rcard {
  display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit;
  border: 1px solid var(--enc-border); border-radius: var(--enc-radius);
  background: var(--enc-surface); padding: .5rem; overflow: hidden;
}
.rcard:hover { border-color: var(--enc-primary); }
.rcard__img {
  width: 4rem; height: 3.4rem; flex: 0 0 auto; object-fit: cover;
  border-radius: calc(var(--enc-radius) - 4px); background: var(--enc-surface-2);
}
.rcard__img--none { display: block; }
.rcard__body { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.rcard__title {
  font-size: .85rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rcard__price { font-size: .82rem; color: var(--enc-primary); font-weight: 600; }
.rcard__where { font-size: .76rem; color: var(--enc-text-muted); }

/* ── "Alert me about new ones" ───────────────────────────────────────────
   Sits at the end of the results header, opposite the count. A secondary
   control by design: outlined rather than filled, because the page's primary
   action is looking at the properties, not subscribing to them.

   `[hidden]` needs the explicit rule — the flex display would otherwise win
   over it (CLAUDE.md §8). */
.savesearch { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.savesearch[hidden] { display: none; }
.savesearch__btn {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .45rem .95rem; border-radius: 999px; font: inherit; font-weight: 600;
  font-size: .9rem; background: none;
  border: 1px solid var(--enc-primary); color: var(--enc-primary);
}
.savesearch__btn:hover:not(:disabled) { background: var(--enc-primary-soft); }
.savesearch__btn:disabled { opacity: .6; cursor: default; }
.savesearch__btn:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 2px; }
/* The label is context for the button, not a second control — quiet, and gone
   on narrow screens where the button alone has to carry it. */
.savesearch__what { color: var(--enc-text-muted); font-size: .85rem; }
@media (max-width: 700px) { .savesearch__what { display: none; } }
.savesearch__done { color: var(--enc-primary); font-weight: 600; font-size: .9rem; }
.savesearch__manage { color: var(--enc-text-muted); font-size: .85rem; }
.savesearch__err { color: var(--enc-danger); font-size: .85rem; flex-basis: 100%; }

/* ── Saved searches, on the account page ─────────────────────────────── */
#ua-b-alerts-sec[hidden] { display: none; }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.alertrow {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem .9rem; border-radius: .7rem;
  border: 1px solid var(--enc-border); background: var(--enc-surface);
}
/* The search itself takes the free space, so the frequency and the delete stay
   put down the column rather than sliding with each label's length. */
.alertrow__what { flex: 1 1 12rem; font-weight: 600; color: var(--enc-text); text-decoration: none; }
.alertrow__what:hover { color: var(--enc-primary); text-decoration: underline; }
.alertrow__freq select {
  font: inherit; font-size: .85rem; padding: .3rem .5rem; border-radius: .5rem;
  border: 1px solid var(--enc-border); background: var(--enc-bg); color: var(--enc-text);
}
.alertrow__x {
  background: none; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer;
  color: var(--enc-text-muted); padding: 0 .25rem;
}
.alertrow__x:hover { color: var(--enc-danger); }
.alertrow__x:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 2px; }

/* Visible to a screen reader, to nobody else. The frequency menus need a name
   each, and "How often to email about X" printed four times is noise on screen. */
.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;
}

/* ── Home page rhythm ────────────────────────────────────────────────────
   Sections were spaced by whatever each one happened to carry, so the page
   read as a stack of unrelated blocks. One number, applied once. */
main.wrap > .section + .section,
main.wrap > .section + .promise,
main.wrap > .promise + .section { margin-top: clamp(2.75rem, 5vw, 4.25rem); }

/* "See all" under a capped grid. Centred and quiet — it is a way onward, not
   the point of the section, and a full-width button here would compete with
   the cards it sits under. */
.section__more { margin: 1.5rem 0 0; text-align: center; }
.section__morelink {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.5rem; border-radius: 999px;
  border: 1px solid var(--enc-border-strong); color: var(--enc-text);
  text-decoration: none; font-weight: 600; font-size: .93rem;
  transition: border-color .15s, color .15s, background-color .15s;
}
.section__morelink:hover {
  border-color: var(--enc-primary); color: var(--enc-primary);
  background: var(--enc-primary-soft);
}
.section__morelink:focus-visible { outline: 2px solid var(--enc-primary); outline-offset: 2px; }

/* ── Explore: one band, two rows ─────────────────────────────────────────
   The searches people ran, then the places they ran them in. They answer one
   question, so they get one heading and one box rather than two sections and
   746px of page. */
.explore .qchips { margin-bottom: 1.25rem; }

/* ── Explore: labelled groups ────────────────────────────────────────────
   Searches, cities and areas are three different kinds of thing. Unlabelled
   they were a row of pills above a grid of cards with nothing to say which
   was which; the labels are what make the band scannable rather than merely
   short. Quiet enough that the section keeps ONE heading. */
.explore__group + .explore__group { margin-top: 1.6rem; }
.explore__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--enc-text-muted);
  margin: 0 0 .7rem;
}

/* ── Touch baseline ──────────────────────────────────────────────────────
   98% of this site's traffic is a phone, so the size of a thumb is a layout
   constraint and not an accessibility afterthought.

   Keyed on `pointer: coarse` rather than a width. Width is a proxy that gets
   both cases wrong: a touch laptop at 1400px gets a mouse-sized target, and a
   desktop browser dragged narrow gets fat ones for a cursor that is precise.
   The pointer query asks the question we actually mean.

   44px is Apple's figure and near enough WCAG 2.5.8's; below it a thumb hits
   the neighbour often enough to matter. The search fields were the worst
   offenders and they are the whole point of the page: the field WRAPPER stood
   54px tall while the <select> inside it was 26px with no padding, so half of
   what looked tappable was not. Stretching the control to fill its wrapper
   fixes the target without moving a single pixel of the design. */
@media (pointer: coarse) {
  .hsearch__f {
    /* The label sits above, so the control gets what is left of a 44px+ box. */
    display: flex; flex-direction: column; justify-content: center;
    min-height: 4.25rem;
  }
  .hsearch__f select,
  .hsearch__f input,
  .hsearch__f .plsearch__input {
    min-height: 2.75rem;
    /* Fill the wrapper, so the whole field opens the menu rather than the
       middle third of it. */
    align-self: stretch;
  }

  /* Everything else that a thumb has to hit. */
  .hsearch__more,
  .section__link,
  .logo-mark,
  .pcard__cta,
  .pcard__contact,
  .section__morelink,
  .qchip,
  .hsearch__tabs a,
  .btn-post,
  .header-icon,
  .nav-link { min-height: 2.75rem; }

  .hsearch__more,
  .section__link,
  .qchip { display: inline-flex; align-items: center; }

  /* Square controls need the width too, not just the height. */
  .pcard__fav,
  .pcard__contact,
  .header-icon { min-width: 2.75rem; }

  /* An icon-only control gets breathing room around it rather than a bigger
     glyph — the artwork is the right size, the hit area was not. */
  .pcard__fav { width: 2.75rem; height: 2.75rem; }

  /* Footer navigation. These are `display: inline` inside <li>, so each one is
     a 17px-tall target in a stack of nine — the exemption WCAG allows for a
     link inside a sentence does not apply to a column of navigation. Made
     block-level so the row is the target, which also means the gap between
     them stops being dead space a thumb can land in. */
  .footer-col a {
    /* min-height rather than padding, so the target is exactly the figure we
       are aiming at instead of whatever the line-height plus padding happens
       to add up to. The negative margin eats the list's own gap rather than
       adding to it, so the footer does not grow by 19 rows of dead space. */
    display: flex; align-items: center;
    min-height: 2.75rem;
    margin: -.35rem 0;
  }
}

/* iOS zooms the whole page when a focused field is under 16px, which throws
   the layout sideways mid-interaction and is a well-known way to lose someone
   part-way through a form. Nothing here is currently below it; this keeps that
   true if a font-size is ever tuned down. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ── A table inside a legal document ─────────────────────────────────────
   Used by the credits page for package licences. In its own scroll container
   so that a long package name pushes the TABLE sideways and never the page —
   a body that scrolls horizontally on a phone is the one layout bug people
   actually notice, and 98% of this traffic is a phone. */
.table-scroll { overflow-x: auto; margin: 1rem 0; -webkit-overflow-scrolling: touch; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-table th,
.legal-table td {
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--enc-border);
  white-space: nowrap;
}
.legal-table th {
  font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--enc-text-muted);
}
.legal-table td a { color: var(--enc-primary); text-decoration: none; }
.legal-table td a:hover { text-decoration: underline; }