/*
 * Global Styles - Main stylesheet for all pages and components
 *
 * Breakpoints:
 * DESKTOP: > 1440px
 * LAPTOP: 1024px - 1439px
 * TABLET: 768px - 1023px
 * MOBILE-L: 600px - 767px
 * MOBILE-S: < 599px
 */

:root {
	/* Readable line length for prose, as a token so the number is declared ONCE and every
	   consumer references it instead of repeating a magic value.
	   The unit is ch, not px, deliberately: ch is relative to the element's own font, so one
	   token lands near 70 characters on 0.75rem small print and on a 1.15rem hero lede alike.
	   A px equivalent cannot - 800px is about 82 characters at 16px but about 110 at the
	   disclosure size, which is how a single "standard" width turns into a different number
	   per context. Comfortable reading is 45-75 characters; past about 90 the eye starts
	   losing its place on the return sweep to the next line. */
	--measure: 70ch;
	--border_radius: 0.5rem;
	--header_height: 4rem;
	--footer_height: 16rem;
	--spacing_1: 0.05rem;
	--spacing_2: 0.1rem;
	--spacing_3: 0.15rem;
	--spacing_4: 0.2rem;
	--spacing_5: 0.25rem;
	--spacing_10: 0.5rem;
	--spacing_15: 0.75rem;
	--spacing_20: 1rem;
	--spacing_25: 1.25rem;
	--spacing_30: 1.5rem;
	--spacing_35: 1.75rem;
	--spacing_40: 2rem;
	--spacing_45: 2.25rem;
	--spacing_50: 2.5rem;
	--input_height: var(--spacing_50);
	--transition: all 0.3s ease;
	--transform: translateY(calc(var(--spacing_5) * -1));
	--border_color: #d3dee6;
	--hover_color: #e4f3ff;
	--placeholder_color: #7C7C7C;
	/* Subject-property map pin. Deliberately not a brand colour: it has to stand out from the
	   comp pins on every domain. Read by createSubjectMarker(), since Mapbox draws the pin as
	   an SVG and takes a colour value rather than a class. */
	--subject_marker_color: #FF0000;
	/* Radius ring drawn around a subject property. Same situation as the pin above: Mapbox
	   paint properties take a colour value, not a class, so addRadiusCircle() reads this. Not a
	   brand colour either - it sits under the comp pins on every domain and has to stay legible
	   against the map itself. */
	--map_radius_color: #3388FF;
	--overlay_color: rgba(211, 222, 230, 0.7);

	/* Listing status colours. Deliberately NOT brand colours: they carry meaning (a listing is
	   available / under contract / gone) and must read the same on every domain, so they do not
	   follow the per-site --color_N palette. Used as the TEXT colour in both places - on the
	   listing detail page and on the listing card's status line - so each one only has to be
	   legible on the white card, never underneath a fill.
	   [2026-08-27] Pending was #ffc107, which measured 1.63:1 against white - unreadable, and by
	   far the weakest of the three. Darkened to #9a6700, the same amber hue taken down until it
	   clears WCAG AA for normal text: 4.87:1 on white, which is the background in both places.
	   That makes pending the STRONGEST of the three rather than the weakest (green is 3.13:1 on
	   white, red 4.53:1).
	   Measured, not guessed - #b8860b, the obvious "darkgoldenrod" pick, only reaches 3.25:1. */
	--status_active_color: #28a745;
	--status_pending_color: #9a6700;
	--status_closed_color: #dc3545;

	--box_shadow: rgba(0, 0, 0, 0.2) 0px var(--spacing_5) var(--spacing_5) 0px;
}

@media (max-width: 1023px) {
	:root {
		--footer_height: 8rem;
	}
}

* {
	outline: none;
	box-shadow: none;
	transition: var(--transition);
	box-sizing: border-box;
	min-height: unset;
	min-width: unset;
	text-shadow: none;
	text-decoration: none;
	text-overflow: ellipsis;
	float: none;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.15;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

*:active,
*:focus-within,
*:target,
*:hover,
*:focus,
*:focus-visible {
	outline: unset;
	box-shadow: unset;
}

/* Turn off hover styling on touch devices so styles don't stick after a tap.
   A tap makes :hover match the tapped element AND every ancestor, and `revert`
   discards base author styles too (not just the hover layer), so a blanket
   *:hover revert blanked colored sections, tables, and text. Instead: neutralize
   hover transforms everywhere, and restate the hover utilities to their base values. */
@media (hover: none) {
	*:hover {
		transform: none !important;
	}
	.link:hover {
		color: var(--color_2) !important;
	}
	.nav-link:hover {
		color: inherit !important;
	}
	.bg-hover:hover {
		background: none !important;
	}
}

/*-------------------- UTILITIES --------------------*/
.block {display: block;} .flex {display: flex;} .grid {display: grid;} .inline-block {display: inline-block;} .hidden {display: none;} .invisible {visibility: hidden;}
.relative {position: relative;} .fixed {position: fixed;} .absolute {position: absolute;} .sticky {position: sticky}
.gap-5 {gap: var(--spacing_5);} .gap-10 {gap: var(--spacing_10);} .gap-15 {gap: var(--spacing_15);} .gap-20 {gap: var(--spacing_20);} .gap-25 {gap: var(--spacing_25);}
.gap-30 {gap: var(--spacing_30);} .gap-35 {gap: var(--spacing_35);} .gap-40 {gap: var(--spacing_40);} .gap-45 {gap: var(--spacing_45);} .gap-50 {gap: var(--spacing_50);}

.padding-0 {padding: 0;}
.padding-5 {padding: var(--spacing_5);} .padding-10 {padding: var(--spacing_10);} .padding-15 {padding: var(--spacing_15);} .padding-20 {padding: var(--spacing_20);} .padding-25 {padding: var(--spacing_25);}
.padding-30 {padding: var(--spacing_30);} .padding-35 {padding: var(--spacing_35);} .padding-40 {padding: var(--spacing_40);} .padding-45 {padding: var(--spacing_45);} .padding-50 {padding: var(--spacing_50);}

.margin-0 {margin: 0;} .margin-auto {margin: auto;}
.margin-5 {margin: var(--spacing_5);} .margin-10 {margin: var(--spacing_10);} .margin-15 {margin: var(--spacing_15);} .margin-20 {margin: var(--spacing_20);} .margin-25 {margin: var(--spacing_25);}
.margin-30 {margin: var(--spacing_30);} .margin-35 {margin: var(--spacing_35);} .margin-40 {margin: var(--spacing_40);} .margin-45 {margin: var(--spacing_45);} .margin-50 {margin: var(--spacing_50);}

.z-5 {z-index: 5000;} .z-10 {z-index: 10000;} .z-15 {z-index: 15000;} .z-20 {z-index: 20000;} .z-25 {z-index: 25000;}
.z-30 {z-index: 30000;} .z-35 {z-index: 35000;} .z-40 {z-index: 40000;} .z-45 {z-index: 45000;} .z-50 {z-index: 50000;}
.z-55 {z-index: 55000;} .z-60 {z-index: 60000;} .z-65 {z-index: 65000;} .z-70 {z-index: 70000;} .z-75 {z-index: 75000;}
.z-80 {z-index: 80000;} .z-85 {z-index: 85000;} .z-90 {z-index: 90000;} .z-95 {z-index: 95000;} .z-100 {z-index: 100000;}

.border {border: 1px solid var(--border_color);} .radius {border-radius: var(--border_radius);} .border-none {border: none;}
.border-red {border-left: var(--spacing_5) solid red;} .border-orange {border-left: var(--spacing_5) solid orange;} .border-green {border-left: var(--spacing_5) solid green;} .border-yellow {border-left: var(--spacing_5) solid yellow;} .border-blue {border-left: var(--spacing_5) solid blue;} .border-purple {border-left: var(--spacing_5) solid purple;}

.bg-white {background: white;} .bg-black {background: black;} .bg-red {background: red;} .bg-green {background: green;} .bg-border {background: var(--border_color);} .bg-none {background: none;} .bg-overlay {background: var(--overlay_color);} .bg-hover:hover {background: var(--hover_color);}
.bg-1 {background: var(--color_1);} .bg-2 {background: var(--color_2);} .bg-3 {background: var(--color_3);} .bg-4 {background: var(--color_4);} .bg-5 {background: var(--color_5);}

.color-white {color: white;} .color-black {color: black;} .color-red {color: red;} .color-green {color: green;}
.color-1 {color: var(--color_1);} .color-2 {color: var(--color_2);} .color-3 {color: var(--color_3);} .color-4 {color: var(--color_4);} .color-5 {color: var(--color_5);}

/* [2026-08-22] Headings must follow a colour utility placed on an ancestor.
   The TYPOGRAPHY block below gives h1-h4 an explicit color: var(--color_2). A rule that matches
   the element always beats an inherited value, so putting .color-white on a section did nothing
   for the headings inside it - they stayed --color_2. On a .bg-2 panel that is the SAME colour as
   the background, so the heading rendered invisible: /contact-us opened with a blank blue band
   (150px mobile, 190px desktop) where "Contact Us" should be. Any heading on a bg-2 panel had the
   same fault; this fixes the class of bug, not just that page.
   color: inherit rather than a fixed colour, so each utility keeps deciding what the colour is.
   Selector is anchored to a word boundary - class starting with "color-" or preceded by a space -
   rather than a bare [class*="color-"], so a future class like "brand-color-x" cannot match by
   accident and silently restyle headings site-wide. */
[class^="color-"] h1, [class*=" color-"] h1,
[class^="color-"] h2, [class*=" color-"] h2,
[class^="color-"] h3, [class*=" color-"] h3,
[class^="color-"] h4, [class*=" color-"] h4,
[class^="color-"] h5, [class*=" color-"] h5,
[class^="color-"] h6, [class*=" color-"] h6 {
	color: inherit;
}

.width-5p {width: 5%;} .width-10p {width: 10%;} .width-15p {width: 15%;} .width-20p {width: 20%;} .width-25p {width: 25%;}
.width-30p {width: 30%;} .width-35p {width: 35%;} .width-40p {width: 40%;} .width-45p {width: 45%;} .width-50p {width: 50%;}
.width-55p {width: 55%;} .width-60p {width: 60%;} .width-65p {width: 65%;} .width-70p {width: 70%;} .width-75p {width: 75%;}
.width-80p {width: 80%;} .width-85p {width: 85%;} .width-90p {width: 90%;} .width-95p {width: 95%;} .width-100p {width: 100%;}
/* Readable measure. Caps a block of PROSE at roughly 70 characters per line and centres it.
   Measured at 1600px before this existed: the TC consent disclosure ran 209 characters per
   line, the TC FAQ answers 152, the platform home value props 140. Comfortable reading is
   45-75; past about 90 the eye starts losing its place on the return sweep to the next line.
   The unit is ch, NOT px, and that is the whole point: ch is relative to the element's own
   font, so one rule lands near 70 characters on 12px small print and on an 18px hero lede
   alike. A single px cap cannot - 800px is about 82 characters at 16px but about 110 at the
   0.75rem disclosure size, so it would have left the worst offender on this list uncapped.
   Never widens anything: a max-width only ever narrows, so phone layouts are untouched. */
.readable-measure {max-width: var(--measure); margin-inline: auto;}

.width-5v {width: 5dvw;} .width-10v {width: 10dvw;} .width-15v {width: 15dvw;} .width-20v {width: 20dvw;} .width-25v {width: 25dvw;}
.width-30v {width: 30dvw;} .width-35v {width: 35dvw;} .width-40v {width: 40dvw;} .width-45v {width: 45dvw;} .width-50v {width: 50dvw;}
.width-55v {width: 55dvw;} .width-60v {width: 60dvw;} .width-65v {width: 65dvw;} .width-70v {width: 70dvw;} .width-75v {width: 75dvw;}
.width-80v {width: 80dvw;} .width-85v {width: 85dvw;} .width-90v {width: 90dvw;} .width-95v {width: 95dvw;} .width-100v {width: 100dvw;}
.width-auto {width: auto;} .width-none {width: 0%;}

.height-5p {height: 5%;} .height-10p {height: 10%;} .height-15p {height: 15%;} .height-20p {height: 20%;} .height-25p {height: 25%;}
.height-30p {height: 30%;} .height-35p {height: 35%;} .height-40p {height: 40%;} .height-45p {height: 45%;} .height-50p {height: 50%;}
.height-55p {height: 55%;} .height-60p {height: 60%;} .height-65p {height: 65%;} .height-70p {height: 70%;} .height-75p {height: 75%;}
.height-80p {height: 80%;} .height-85p {height: 85%;} .height-90p {height: 90%;} .height-95p {height: 95%;} .height-100p {height: 100%;}
.height-5v {height: 5dvh;} .height-10v {height: 10dvh;} .height-15v {height: 15dvh;} .height-20v {height: 20dvh;} .height-25v {height: 25dvh;}
.height-30v {height: 30dvh;} .height-35v {height: 35dvh;} .height-40v {height: 40dvh;} .height-45v {height: 45dvh;} .height-50v {height: 50dvh;}
.height-55v {height: 55dvh;} .height-60v {height: 60dvh;} .height-65v {height: 65dvh;} .height-70v {height: 70dvh;} .height-75v {height: 75dvh;}
.height-80v {height: 80dvh;} .height-85v {height: 85dvh;} .height-90v {height: 90dvh;} .height-95v {height: 95dvh;} .height-100v {height: 100dvh;}
.height-header {height: var(--header_height);} .height-footer {height: var(--footer_height);}
.height-input {height: var(--input_height);} .width-input {width: var(--input_height);} .height-auto {height: auto;}

.grid-1 {grid-template-columns: repeat(1, 1fr);} .grid-2 {grid-template-columns: repeat(2, 1fr);} .grid-3 {grid-template-columns: repeat(3, 1fr);} .grid-4 {grid-template-columns: repeat(4, 1fr);} .grid-5 {grid-template-columns: repeat(5, 1fr);} .grid-6 {grid-template-columns: repeat(6, 1fr);} .grid-7 {grid-template-columns: repeat(7, 1fr);} .grid-8 {grid-template-columns: repeat(8, 1fr);}
.wrap {flex-wrap: wrap;} .nowrap {flex-wrap: nowrap;} .column {flex-direction: column;} .flex-1 {flex: 1;} .row {flex-direction: row;}
.justify-center {justify-content: center;} .justify-start {justify-content: start;} .justify-end {justify-content: end;} .justify-space {justify-content: space-between;} .justify-even {justify-content: space-evenly}
.align-center {align-items: center;} .align-start {align-items: start;} .align-end {align-items: end;}
.right-0 {right: 0;} .left-0 {left: 0;} .bottom-0 {bottom: 0;} .top-0 {top: 0;} .top-header {top: var(--header_height);}

.bold {font-weight: bold;} .italic {font-style: italic;} .uppercase {text-transform: uppercase;} .lowercase {text-transform: lowercase;}
.text-center {text-align: center;} .text-start {text-align: start;} .text-end {text-align: end;}

.font-size-10 {font-size: 1rem;} .font-size-15 {font-size: 1.5rem;} .font-size-20 {font-size: 2rem;} .font-size-25 {font-size: 2.5rem;} .font-size-30 {font-size: 3rem;} .font-size-35 {font-size: 3.5rem;}
.font-size-40 {font-size: 4rem;} .font-size-45 {font-size: 4.5rem;} .font-size-50 {font-size: 5rem;} .font-size-55 {font-size: 5.5rem;} .font-size-60 {font-size: 6rem;} .font-size-65 {font-size: 6.5rem;}
.font-size-html {font-size: clamp(.9rem, calc(.9rem + 0.1vw), 1.5rem);} .text-nowrap {white-space: nowrap;}
.link {color: var(--color_2); cursor: pointer;} .link:hover {color: var(--hover_color);} .nav-link {cursor: pointer;} .nav-link:hover {color: var(--hover_color);}

.button-text {background: none; border: none; width: auto; height: auto; padding: 0; color: var(--placeholder_color); text-transform: none; font-size: 1rem; font-weight: normal; text-decoration: underline; text-wrap: nowrap;}
.button-text:hover {color: var(--color_2);}

.form-group {width: 100%;} .form-row {display: flex; gap: var(--spacing_10); width: 100%; align-items: center;} .form-column {display: flex; gap: var(--spacing_10); flex-direction: column;}
.square-button {height: var(--input_height); width: var(--input_height);} .circle {border-radius: 50%;} .transform:hover {transform: var(--transform);}
.pill {padding-left: var(--spacing_10); padding-right: var(--spacing_10); border-radius: 5rem;} .banner {padding-top: 3rem; padding-bottom: 3rem;}
.disabled {opacity: 0.7;} .overflow-y {overflow-y: auto;} .overflow-x {overflow-x: auto;} .overflow-none {overflow: hidden;} .overflow {overflow: auto;}
.box-shadow {box-shadow: var(--box_shadow);} .transition-none {transition: none;}
.opacity-70 {opacity: 0.7;} .opacity-80 {opacity: 0.8;} .cursor-pointer {cursor: pointer;} .object-cover {object-fit: cover;}

/* Offer / expired-listing landing page: it has no module stylesheet (never calls serve_files), so
   its two component rules live here with the other shared components. */
.offer-step-badge {min-width: var(--spacing_45); min-height: var(--spacing_45);}
.offer-step-photo {width: 3.75rem; height: 3.75rem; object-fit: cover;}

.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {transition: none !important; animation: none !important;}

/*-------------------- SCROLLBARS --------------------*/
*:not(.show-scrollbars) {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

*:not(.show-scrollbars)::-webkit-scrollbar {
	display: none;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar {
    width: var(--spacing_20);
    height: var(--spacing_20);
}

*::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--border_radius);
}

*::-webkit-scrollbar-thumb {
    border-radius: var(--border_radius);
    border: var(--spacing_5) solid white;
    background: var(--color_1);
}

/*-------------------- PAGES --------------------*/
.overlay-open {
	overflow: hidden;
	position: fixed;
	width: 100dvw;
	height: 100dvh;
}

/* Sticky footer. The shell is a flex column so it measures the header and footer as rendered.
   Do not go back to reserving space with min-height: calc(100dvh - --header_height -
   --footer_height): that only holds while both constants match the real elements, and it
   silently under-reserves the moment either one reflows or a row leaves normal flow. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

/* Grow into whatever the header and footer leave; never shrink below its own content. */
#page-content {
	flex: 1 0 auto;
}

.overlay,
#auth-spinner,
#accountContentContainer {
	min-height: calc(100dvh - var(--header_height));
} @media (max-width: 767px) {	
	.overlay {
		background: white;
	}
}

:has(footer) .overlay,
:has(footer) #auth-spinner {
	min-height: calc(100dvh - var(--header_height) - var(--footer_height));
}

.overlay-open .overlay,
.overlay-open #authSection,
.overlay-open #page-content {
	height: calc(100dvh - var(--header_height));
	overflow: hidden;
	min-height: unset;
}

:has(#crm-header) .overlay-open #page-content {
	height: 100dvh;
}

:has(footer) .overlay-open .overlay,
:has(footer) .overlay-open #authSection,
:has(footer) .overlay-open #page-content  {
    height: calc(100dvh - var(--header_height) - var(--footer_height));
	overflow: hidden;
    min-height: unset;
}

:has(#auth-spinner.flex) .overlay:not(#edit-modal):not(#onboarding-modal) {
	display: none;
}

:has(#tos-acceptance-container) #auth-spinner {
	padding-top: var(--spacing_50);
	padding-bottom: var(--spacing_50);
}

/*-------------------- HERO --------------------*/
.hero {
	aspect-ratio: 16 / 9;
} @media (max-width: 1023px) {
	.hero {
		aspect-ratio: 8 / 5;
	}
} @media (max-width: 767px) {
	.hero {
		aspect-ratio: 4 / 3;
	}
}

.hero-bg {
	object-fit: cover;
	object-position: center;
}

.hero-search-container {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--overlay_color);
} @media (max-width: 1439px) {
	.hero-search-container {
		width: 60dvw;
	}
} @media (max-width: 1023px) {
	.hero-search-container {
		width: 80dvw;
	}
}

/*-------------------- TABLES --------------------*/
table {
	font-size: 1rem;
}

/*-------------------- FORMS --------------------*/
form {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing_10);
	background: white;
	width: 100%;
}

label {
	font-weight: bold;
	text-align: left;
	font-size: 1rem;
	white-space: nowrap;
}

/* TCPA consent disclosure. One rule set shared by the contact form (.consent-disclosure),
   the signup form (.auth-disclaimer) and the SMS opt-in form, so all three read identically
   wherever they appear. Lives here rather than in a module because no single module
   stylesheet is loaded on every page that renders one.
   width:0 + min-width:100% keeps the long copy from contributing to a flex or grid
   parent's intrinsic width, which would otherwise force the container past the viewport. */
.consent-disclosure,
.auth-disclaimer {
	font-size: 0.75rem;
	line-height: 1.4;
	font-weight: normal;
	white-space: normal;
	text-align: center;
	color: var(--placeholder_color);
	margin: var(--spacing_10) auto;
	width: 0;
	/* Capped with min() rather than a max-width, because min-width BEATS max-width in CSS -
	   a max-width here would have been silently ignored while min-width:100% held. The min()
	   keeps the original intent (fill the parent, and stay out of its intrinsic width via
	   width:0) while stopping the line at a readable measure on a wide screen. This block ran
	   209 characters per line on the TC page at 1600px, the worst on the site. */
	min-width: min(100%, var(--measure));
}

.consent-disclosure a,
.auth-disclaimer a {
	color: var(--color_2);
	text-decoration: underline;
}

input {
	width: 100%;
	padding: var(--spacing_10);
	border: 1px solid var(--border_color);
	border-radius: var(--border_radius);
	height: var(--input_height);
	background: white;
	font-size: 1rem;
}

input:hover {
	background: var(--hover_color);
}

input:focus {
	border: 2px solid var(--color_2);
}

input[readonly]:focus,
textarea[readonly]:focus {
	border: 1px solid var(--border_color);
}

input::placeholder {
	color: var(--placeholder_color);
}

textarea {
	margin: 0;
	box-sizing: border-box;
	border: 1px solid var(--border_color);
	padding: var(--spacing_10);
	white-space: pre-wrap;
	border-radius: var(--border_radius);
	resize: none;
	width: 100%;
	min-height: calc(var(--input_height) * 2);
	overflow-y: hidden;
	field-sizing: content;
	box-shadow: none;
	font-size: 1rem;
}

textarea:hover {
	background: var(--hover_color);
}

textarea:focus {
	border: 2px solid var(--color_2);
}

/*-------------------- TYPOGRAPHY --------------------*/
h1 {
	margin: 0;
	font-size: 3.5rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--color_2);
}

h2 {
	margin: 0;
	font-size: 3rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--color_2);
}

h3 {
	margin: 0;
	font-size: 2.5rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--color_2);
}

h4 {
	margin: 0;
	font-size: 2rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--color_2);
}

h5 {
	margin: 0;
	font-size: 1.5rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--color_2);
}

h6 {
	margin: 0;
	font-size: 1rem;
	text-align: center;
	text-transform: uppercase;
	color: var(--color_2);
}

/* Hero headings sit on a filled banner and must be readable on it. Every .hero-section in the
   codebase is bg-2 (#478cf7) or bg-1 (#545454) with color-white, so white is right for all of
   them - there is no hero on a light background.
   THIS RULE HAS TO EXIST GLOBALLY. The section already asks for white via the color-white
   utility, but that only sets the SECTION's colour and headings do not inherit it: the h1-h6
   rules above each set an explicit color: var(--color_2), which beats inheritance. bg-2 paints
   that same colour behind them, so an unstyled hero heading renders invisibly on its own
   background. It had been patched per page instead - home-page/css/styles.css defined it, and
   blog and opt-in each restated it locally (opt-in's comment literally says "restate it exactly
   as the blog page does") - so every page that used .hero-section without remembering to copy
   the rule shipped an invisible headline. MEASURED before this landed: "Contact Us", "Legal
   Information", "Product Roadmap", "Help Shape Our Future" and "API Documentation" were all
   rendering #478cf7 on #478cf7, and /legal's footer hero was #478cf7 on #545454.
   Defined here rather than in any one module so a new page using .hero-section is correct by
   default. Font sizes stay in the modules; only the colour is shared. */
.hero-title,
.hero-subtitle {
	color: white;
	/* Hero ledes are the first prose a visitor reads and stretched to the full banner width -
	   measured 85 characters per line on a wide desktop across the platform home and roadmap.
	   Capped here in the shared rule so every page using .hero-section gets it. */
	max-width: var(--measure);
	margin-inline: auto;
}

/* The hero banner's own spacing, shared for the same reason as the colour above: it was defined
   only in the home page's stylesheet, so every other page using .hero-section rendered its
   heading hard against the header and the section edges. opt-in and blog had each copied it
   locally to compensate - opt-in's comment says "the shared hero padding lives in the home-page
   module's stylesheet and is not available here, so restate it exactly as the blog page does",
   which is the duplication this removes. overflow:hidden belongs with it: the heroes layer
   decorative absolutely-positioned art, and without it that art widens the page. */
.hero-section {
	padding: 3rem 6rem;
	overflow: hidden;
}

@media (max-width: 1023px) {
	.hero-section {
		padding: 2rem 4rem;
	}
}

@media (max-width: 767px) {
	.hero-section {
		padding: 1rem 2rem;
	}
}

p {
	margin: 0;
	font-size: 1rem;
}

ul,
ol {
	margin-top: var(--spacing_10);
	margin-bottom: var(--spacing_10);
	padding-left: var(--input_height);
	gap: var(--spacing_10);
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
}

li {
	position: relative;
	font-size: 1rem;
}

li.has-icon {
	padding-left: var(--spacing_20);
}

hr {
	border-color: var(--border_color);
	margin: 0;
	border-top: none;
	border-left: none;
}

code {
	background: var(--border_color);
	padding: var(--spacing_5);
	border-radius: var(--border_radius);
	font-family: monospace;
	border: 1px solid var(--border_color);
	font-size: 1rem;
}

pre {
	background: var(--border_color);
	padding: var(--spacing_10);
	border-radius: var(--border_radius);
	overflow-x: auto;
	font-family: monospace;
	border: 1px solid var(--color_4);
	margin: 0;
	font-size: 1rem;
}

/*-------------------- IFRAME --------------------*/
iframe {
	overflow: hidden;
	border: none;
	border-radius: var(--border_radius);
	width: 100%;
}

/*-------------------- BUTTONS --------------------*/
.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child),
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child),
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary,
.fc .fc-button,
.ql-snow.ql-toolbar button,
button:not(nav button) {
	padding: var(--spacing_10);
	border: 1px solid var(--border_color);
	border-radius: var(--border_radius);
	cursor: pointer;
	width: 100%;
	height: var(--input_height);
	background: var(--color_2);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 1.5rem;
	text-decoration: none;
} @media (max-width: 1439px) {
	.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child),
	.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child),
	.fc .fc-button-primary:not(:disabled).fc-button-active,
	.fc .fc-button-primary,
	.fc .fc-button,
	.ql-snow.ql-toolbar button,
	button:not(nav button) {
		font-size: 1rem;
	}
}

/* Hover lightens the button to --hover_color, so the label cannot stay white: that is white on
   #e4f3ff, measured at 1.13 contrast, i.e. unreadable. It hit every button on the site and was
   most obvious on an open FAQ accordion, where the toggle keeps the hover state - the question
   text vanished on the home, mortgage, TC and community pages alike.
   The colour is stated rather than taken from --color_2 because that token is per-domain and
   not guaranteed dark: it is #003366 on the agent sites (11.15 contrast here) but #478cf7 on
   the platform, which only reached 2.92 and still failed. --hover_color is itself a fixed
   non-brand colour, so the text sitting on it is fixed to match. */
button:not(nav button):hover {
	background: var(--hover_color) !important;
	border: 1px solid var(--border_color) !important;
	color: #003366 !important;
}

button:disabled {
	background: none !important;
	pointer-events: none !important;
	color: var(--color_2) !important;
	opacity: 0.7 !important;
	border: 1px solid var(--border_color) !important;
}

.ql-snow.ql-toolbar button:focus {
	color: white !important;
}

@media (max-width: 767px) {
	.lead-nav-button {
		border-radius: 0 !important;
		border: none !important;
		border-bottom: 1px solid var(--border_color) !important;
	}
}

.ql-snow.ql-toolbar button:disabled,
.lead-nav-button:disabled {
	background: var(--color_2) !important;
} @media (max-width: 767px) {
	.lead-nav-button:disabled {
		border: none !important;
		border-bottom: 1px solid var(--border_color) !important;
	}
}

#pagination button.active {
	background: var(--color_2) !important;
	color: var(--color_1) !important;
}

.legal-nav-link button {
	border: var(--spacing_3) solid var(--color_1) !important;
}

.legal-nav-link button:hover {
	border-color: var(--color_1) !important;
}

/*-------------------- TABS --------------------*/
.tabs {
	display: flex;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	height: var(--header_height);
	border-top-left-radius: var(--border_radius);
	border-top-right-radius: var(--border_radius);
	border-top: 1px solid var(--border_color);
	border-right: 1px solid var(--border_color);
	border-left: 1px solid var(--border_color);
} @media (max-width: 767px) {	
	.tabs {
		border-radius: 0;
		border-top: none;
	}
}

.tab {
	padding: var(--spacing_10);
	background: var(--border_color);
	cursor: pointer;
	display: flex;
	justify-content: center;
	text-align: center;
	width: 100%;
	align-items: center;
	color: var(--color_2);
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
} @media (max-width: 1439px) {
	.tab {
		font-size: 1rem;
	}
}

.tab:not(.tab.active):hover {
	background: var(--hover_color);
}

.tab.active {
	background: white;
}

/*-------------------- DROPDOWNS --------------------*/
.custom-dropdown {
	width: 100%;
	padding: var(--spacing_10);
	border: 1px solid var(--border_color);
	border-radius: var(--border_radius);
	font-size: 1rem;
	text-align: left;
	position: relative;
	background: white;
	cursor: pointer;
	overflow: visible;
	display: flex;
	align-items: center;
	min-height: var(--input_height);
}

.autocomplete-item:hover,
.dropdown-option:hover,
.custom-dropdown:hover {
	background: var(--hover_color);
}

/* Keyboard-navigation highlight for dropdown options (mirrors hover) */
.dropdown-option.keyboard-active {
	background: var(--hover_color);
}

/* Visible focus ring for keyboard users on the dropdown trigger */
.dropdown-selected:focus-visible {
	outline: 2px solid var(--color_2);
	outline-offset: -2px;
}

.dropdown-selected {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	position: relative;
	overflow: visible;
	white-space: normal;
	word-wrap: break-word;
	cursor: pointer;
	font-weight: normal;
	color: #7C7C7C;
	font-size: 1rem;
    overflow-wrap: anywhere;
}

.dropdown-selected.active {
	color: black;
}

.dropdown-options {
	position: absolute;
	left: -2px;
	width: calc(100% + 4px);
	background: white;
	border: 1px solid var(--border_color);
	border-radius: var(--border_radius);
	display: none;
	z-index: 20000;
	top: 0;
	overflow-y: auto;
}

.modal-content .dropdown-options {
	position: fixed;
}

.dropdown-open {
	display: block;
}

.custom-dropdown:has(.dropdown-open) {
    border-top: 2px solid var(--color_2);
	border-left: 2px solid var(--color_2);
	border-right: 2px solid var(--color_2);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-dropdown .dropdown-open {
    border-bottom: 2px solid var(--color_2);
	border-left: 2px solid var(--color_2);
	border-right: 2px solid var(--color_2);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.custom-dropdown.dropdown-above:has(.dropdown-open) {
    border-top: none;
	border-bottom: 2px solid var(--color_2);
	border-left: 2px solid var(--color_2);
	border-right: 2px solid var(--color_2);
    border-bottom-left-radius: var(--border_radius);
    border-bottom-right-radius: var(--border_radius);
	border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.custom-dropdown.dropdown-above .dropdown-open {
    border-bottom: none;
	border-top: 2px solid var(--color_2);
	border-left: 2px solid var(--color_2);
	border-right: 2px solid var(--color_2);
    border-top-left-radius: var(--border_radius);
    border-top-right-radius: var(--border_radius);
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown-options .virtual-scroll-container {
	overflow-y: auto;
	max-height: calc(var(--spacing_10) * 30);
}

.virtual-scroll-option {
	position: relative;
	width: 100%;
	min-height: var(--input_height);
	overflow: visible;
	border-bottom: 1px solid var(--border_color);
}

.virtual-scroll-sentinel {
	height: 1px;
	visibility: hidden;
	pointer-events: none;
}

.dropdown-option {
	padding: var(--spacing_10);
	text-align: left;
	cursor: pointer;
	font-size: 1rem;
	align-items: center;
	gap: var(--spacing_5);
	display: flex;
	width: 100%;
	white-space: normal;
    overflow-wrap: anywhere;
	border-bottom: 1px solid var(--border_color);
}

.dropdown-options input {
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--border_color);
}

#query.active {
	border: 2px solid var(--color_2);
	border-bottom: 1px solid var(--border_color);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Mobile takeover header: only ever visible inside the phone-width full-screen
   dropdown, so it stays hidden by default at every other width. */
.dropdown-mobile-header {
	display: none;
	border-bottom: 1px solid var(--border_color);
}

/* Takes the free space so a long title truncates instead of wrapping the
   header onto a second line. */
.dropdown-mobile-title {
	flex: 1;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Matches #crm-mobile-menu-close, the other close control at this breakpoint: the markup
   carries the same padding-0 square-button bg-none border-none utilities, and the icon is
   styled by the shared .mobile-menu-close i rule below (colour + responsive size). Only the
   two things the utilities cannot express stay here. */
.dropdown-mobile-close {
	cursor: pointer;
	/* The global button rule is width:100% for full-width form buttons, which would eat the
	   whole row and squeeze the title out. square-button fixes the box; flex:none stops the
	   takeover's flex row from stretching it back. */
	flex: none;
	/* Centre the icon in the finger-sized box. An <i> would otherwise sit high and left. */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Phone-width full-screen dropdown takeover. The whole .custom-dropdown becomes
   the screen (not just .dropdown-options) so the header, the current selection,
   and the option list can stack as three rows. Mirrors the full-screen modal
   idiom already used at this breakpoint. */
@media (max-width: 767px) {
	.custom-dropdown:has(.dropdown-open) {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		/* The base rule centers on the cross axis, which is correct for the
		   normal horizontal row but collapses every child to its content width
		   once this becomes a column. Stretch so each row spans the screen. */
		align-items: stretch;
		/* The base padding would inset the takeover from the screen edges. */
		padding: 0;
		background: white;
		border: none;
		border-radius: 0;
		z-index: 30000;
	}

	/* Row 2: the live selection doubles as the dismiss target, so it needs a
	   real touch target rather than the bare line-height it has in a form row. */
	.custom-dropdown:has(.dropdown-open) .dropdown-selected {
		padding: var(--spacing_15) var(--spacing_10);
		border-bottom: 1px solid var(--border_color);
		flex: none;
	}

	.custom-dropdown:has(.dropdown-open) .dropdown-mobile-header {
		display: flex;
	}

	/* Row 3: the option list fills whatever is left and scrolls on its own, so
	   the page behind never scroll-chains when the list hits its end. */
	.custom-dropdown:has(.dropdown-open) .dropdown-open {
		position: static;
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 100%;
		top: auto;
		left: auto;
		max-height: none;
		border: none;
		border-radius: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* The search and add-new inputs are appended after the options in the DOM;
	   pull them to the top and pin them so they stay reachable while scrolling. */
	.custom-dropdown:has(.dropdown-open) .dropdown-open .search-input-container,
	.custom-dropdown:has(.dropdown-open) .dropdown-open .new-item-input-container {
		order: -1;
		position: sticky;
		top: 0;
		background: white;
		z-index: 1;
	}
}

.autocomplete-list {
	overflow-y: auto;
	list-style: none;
	top: var(--input_height);
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	border: 2px solid var(--color_2);
	border-top: 1px var(--border_color);
}

.autocomplete-item {
	cursor: pointer;
	border-bottom: 1px solid var(--border_color);
}

.autocomplete-item:last-child {
	border: none;
}

/* Keyboard-navigation highlight for autocomplete results (mirrors hover, like dropdown-option) */
.autocomplete-item.keyboard-active {
	background: var(--hover_color);
}

/* Secondary line (email/phone/address) in linked-lead search results */
.linked-lead-search-detail {
	color: var(--placeholder_color);
	font-size: .85rem;
}

/* Open-state join for the linked-lead search: while results are visible the input
   takes the open-dropdown treatment (2px color_2 sides, squared bottom corners,
   1px divider) - mirrors .custom-dropdown:has(.dropdown-open) */
.linked-lead-row.add-row:has(.linked-lead-search-results:not(.hidden)) .linked-lead-id-input {
	border-top: 2px solid var(--color_2);
	border-left: 2px solid var(--color_2);
	border-right: 2px solid var(--color_2);
	border-bottom: 1px solid var(--border_color);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Linked-lead search results render in-flow (the modal grows with them instead of
   clipping an absolute list) and scroll internally past ~4 items. Base
   .autocomplete-list supplies the 2px color_2 side/bottom borders and squared top
   corners; rounded bottom corners finish the joined open-dropdown look */
.linked-lead-search-results {
	max-height: 16rem;
	border-bottom-left-radius: var(--border_radius);
	border-bottom-right-radius: var(--border_radius);
}

/*-------------------- CUSTOM CHECKBOXES --------------------*/
.custom-checkbox {
	display: inline-block;
	position: relative;
	height: var(--spacing_25);
	aspect-ratio: 1 / 1;
}

.custom-checkbox input {
	display: none;
}

.custom-checkbox .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: calc(var(--input_height) / 2);
	aspect-ratio: 1 / 1;
	background: white;
	border: 1px solid var(--border_color);
	border-radius: var(--border_radius);
	cursor: pointer;
}

.custom-checkbox .checkmark:hover {
	background: var(--hover_color);
}

.custom-checkbox input:checked + .checkmark {
	background: var(--color_2);
	border-color: var(--color_2);
}

.custom-checkbox .checkmark::after {
	content: "";
	position: absolute;
	display: none;
}

.custom-checkbox input:checked + .checkmark::after {
	display: block;
}

/*-------------------- FLATPICKR --------------------*/
.flatpickr-current-month {
	padding: 0 !important;
}

.flatpickr-calendar {
	max-height: unset !important;
	line-height: unset !important;
	font-size: unset !important;
	box-shadow: unset !important;
	border: 1px solid var(--border_color) !important;
	padding: var(--spacing_5) !important;
	border-radius: var(--border_radius) !important;
}

.numInput.flatpickr-hour,
.numInput.flatpickr-minute {
	margin: 0 !important;
	border: none !important;
}

.flatpickr-monthDropdown-months {
	margin: 0 !important;
	border: none !important;
	padding: 0 !important;
	text-align: center !important;
}

.flatpickr-monthDropdown-months {
	pointer-events: none !important;
	border: none !important;
}

.numInputWrapper .arrowDown,
.numInputWrapper .arrowUp {
	display: none !important;
}

.flatpickr-input {
	cursor: pointer !important;
}

/*-------------------- SETTINGS PAGE --------------------*/
@media (max-width: 1439px) {
	.settings-column {
		width: 60%;
	}
} @media (max-width: 1023px) {
	.settings-column {
		width: 100%;
	}
} @media (max-width: 767px) {
	.settings-column {
		gap: 0;
	}
}

@media (max-width: 767px) {
	.settings-section {
		border-top: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}
}

@media (max-width: 767px) {	
	.settings-container {
		padding: 0;
	}
}

.settings-container .saved-search-card .sub-type,
.settings-container .saved-search-card .year {
	grid-column: span 2;
}

@media (max-width: 767px) {
	.settings-container .saved-search-card .search-fields {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.settings-container .saved-search-card .sub-type,
	.settings-container .saved-search-card .year {
		grid-column: span 1;
	}
}

/*-------------------- ICONS --------------------*/
i {
	width: 1.5rem !important;
	height: 1.5rem !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.crm-edit-label i {
	margin-left: auto !important;
}

.lead-section i {
	color: black !important;
	margin-left: auto !important;
}

.delete-call-btn i,
.delete-note-btn i {
	margin: 0 !important;
	color: white !important;
}

.next-lead-btn i,
.prev-lead-btn i {
	color: white !important;
}

.lead-nav-button i {
	margin: 0 !important;
}

.timeline-audio-player-container i {
	color: white !important;
}

.address-container i {
	cursor: pointer !important;
	margin: 0 !important;
}

.address-search-icon {
	cursor: pointer !important;
	color: black !important;
	margin: 0 !important;
}

.address-search-icon:hover {
	color: var(--hover_color) !important;
}

.tool-card i {
	width: auto !important;
	color: var(--color_2) !important;
}

.tool-overlay-header i {
	width: auto !important;
}

.notification-icons i {
	color: var(--color_4) !important;
	font-size: 1.5rem !important;
} @media (max-width: 1439px) {
	.notification-icons i {
		font-size: 1rem !important;
	}
} @media (max-width: 1023px) {
	.notification-icons i {
		font-size: 1.5rem !important;
	}
} @media (max-width: 767px) {
	.notification-icons i {
		font-size: 1.2rem !important;
	}
}

.notification-icons i:hover {
	color: var(--hover_color) !important;
}

.crm-nav-button i,
.mobile-nav-button i {
	width: auto !important;
}

/* .dropdown-mobile-close is in this group deliberately: it is the same control in the same
   place at the same breakpoint as the nav close, so it takes the same colour and the same
   responsive size instead of carrying its own copy that has to be kept in step by hand. */
.mobile-menu-close i,
.mobile-menu-toggle i,
.dropdown-mobile-close i {
	width: 100% !important;
	height: 100% !important;
	font-size: 1.5rem !important;
	color: var(--color_4) !important;
	cursor: pointer !important;
} @media (max-width: 1023px) {
	.mobile-menu-close i,
	.mobile-menu-toggle i,
	.dropdown-mobile-close i {
		font-size: 1.5rem !important;
	}
} @media (max-width: 767px) {
	.mobile-menu-close i,
	.mobile-menu-toggle i,
	.dropdown-mobile-close i {
		font-size: 1.2rem !important;
	}
}

.edit-container i {
	font-size: 1rem;
}

#address-container .nav-btn i {
	font-size: 7rem !important;
	color: var(--color_2) !important;
} @media (max-width: 1439px) {	
	#address-container .nav-btn i {
		font-size: 6rem !important;
	}
} @media (max-width: 1023px) {	
	#address-container .nav-btn i {
		font-size: 5rem !important;
	}
} @media (max-width: 767px) {	
	#address-container .nav-btn i {
		font-size: 4rem !important;
	}
}

button:disabled i:not(.next-lead-btn i, .prev-lead-btn i) {
	color: var(--color_2);
}

/*-------------------- LISTING CARDS --------------------*/
.listing-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
	gap: var(--spacing_10);
	padding-top: var(--spacing_10);
	padding-left: var(--spacing_10);
	padding-right: var(--spacing_10);
} @media (max-width: 1439px) {	
	.listing-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

.save-listing {
	display: inline-block;
	position: absolute;
	top: var(--spacing_10);
	right: var(--spacing_10);
	z-index: 2;
	cursor: pointer;
	font-size: 2rem;
	color: var(--border_color);
}
.save-listing.hidden {display: none;}

.save-listing.saved .fa-heart {
	color: red;
}

.save-listing:hover .fa-heart {
	color: red;
}

.listing-card .office-name {
	white-space: pre-line !important;
}

/* The card is a fixed aspect-ratio box (below), so its content height cannot vary. Anything
   that adds a line pushes the bottom of the card past its own edge, and the bottom is the
   office attribution - an IDX display requirement, so it is the worst thing to lose.
   Both fields below are capped so the content height is the same for any listing. Neither
   problem was introduced by the PREP statuses; both already clipped cards in production.

   PRICE: this line USED to concatenate price and status ("$235,000 - PREP-Show"), and at
   font-size-20 (2rem = 31.68px here) "$1,800,000 - Active" measured 347px against the 350px
   available, so the six active listings over $10,000,000 wrapped to two lines and clipped.
   [2026-08-25] The status moved out to its own line above the price, so this line is now the
   price alone and has far more room. nowrap stays: it is what guarantees a long price can never
   wrap and push the office attribution off the bottom of the fixed-height card. */
.listing-card .price {
	white-space: nowrap;
}

.listing-card {
	flex-shrink: 0 !important;
	width: 23.25rem !important;
	/* Every card is the same size whatever it contains, so the size has to fit the WORST
	   content, not the average. At 1/1.15 the box was 424px tall while the tallest real card
	   needs 446px - a three-line address plus a three-line brokerage attribution - so 7 of 30
	   cards on a Canton search and 3 of 30 on Cleveland had the bottom of the attribution cut
	   off. Measured across Canton, Cleveland and Akron: 446px against the 368px width, which is
	   1/1.212, so 1.23 clears it with a small margin and every card stays identical. */
	aspect-ratio: 1 / 1.23 !important;
} @media (max-width: 767px) {
	.listing-card {
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.settings-container .listing-card {
	width: 100% !important;
	aspect-ratio: unset !important;
	box-shadow: none !important;
	aspect-ratio: 3 / 1 !important;
} @media (max-width: 767px) {	
	.settings-container .listing-card {
		width: 23.25rem !important;
		aspect-ratio: 1 / 1.15 !important;
	}
}

#map .listing-card:hover {
	transform: none !important;
} @media (max-width: 1023px) {	
	#map .listing-card:hover {
		transform: none !important;
	}
}

.listing-card img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The photo WRAPPER is the flex item in this row layout (.settings-container .listing-card a is
   flex-direction: row), so the 40% and the no-shrink belong on it, not the img. A plain width
   still shrinks - flex-shrink defaults to 1 - which took the photo down to 28% of the row. The
   wrapper stretches to the row height as the bare img used to, and the img fills it. */
.settings-container .listing-card .listing-card-photo {
	flex: 0 0 40%;
}

.settings-container .listing-card img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: 100%;
} @media (max-width: 767px) {
	.settings-container .listing-card .listing-card-photo {
		flex: 0 0 auto;
		width: 100%;
	}
	.settings-container .listing-card img {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
	}
}

/* Status line, first row of .details. It used to be a small span concatenated onto the price
   line ("$155,000 - Active"), which is why .listing-card .price still carries white-space:
   nowrap - that rule was sized around the combined string and now just protects the price. */
/* The img must be block: as an inline element it leaves a descender gap beneath it, which puts
   a sliver of card background between the photo and the status line directly below it. */
.listing-card img {
	display: block;
}

/* [2026-08-27] Sits BELOW the photo rather than over it. As an overlay it had to be solid white
   to be legible, at which point it was cropping the lower strip of every image to look exactly
   like a band underneath - so it moved out and the photo is shown in full. No positioning, no
   wrapper, and the photo's own bottom edge is the boundary, so it needs no border of its own. */
.listing-card .listing-status {
	/* No padding of its own and no centring: as a banner across the photo it needed both, but
	   it is now the first line of .details, which already supplies the padding, the gap between
	   rows, and text-align: start. Centring it left the label stranded mid-row in the
	   saved-listings layout, where the text column is much wider than a card. */
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: bold;
	/* Default for any status without a colour of its own (PREP-Show, PREP-No Show, Unknown). */
	color: var(--color_2);
}

/* Status colours are used EXACTLY as the listing detail page uses them
   (modules/listing-page/css/styles.dev.css:168-179): as the text colour on the white card. The
   state class is derived identically in both places -
   status.toLowerCase().replace(/[^a-z0-9]+/g, '-') - so 'Active' becomes .active here as it does
   there, and a listing reads the same in the grid as on its own page. */
.listing-card .listing-status.active {
	color: var(--status_active_color);
}

.listing-card .listing-status.pending {
	color: var(--status_pending_color);
}

.listing-card .listing-status.closed {
	color: var(--status_closed_color);
}

.settings-container .listing-card a {
	display: flex;
	flex-direction: row;
	gap: var(--spacing_10);
} @media (max-width: 767px) {	
	.settings-container .listing-card a {
		flex-direction: column;
		gap: 0;
	}
}

.settings-container .listing-card .price {
	font-size: 2.5rem;
} @media (max-width: 1439px) {	
	.settings-container .listing-card .price {
		font-size: 2rem;
	}
} @media (max-width: 1023px) {	
	.settings-container .listing-card .price {
		font-size: 2.5rem;
	}
} @media (max-width: 767px) {	
	.settings-container .listing-card .price {
		font-size: 2rem;
	}
}

.settings-container .listing-card .address {
	font-size: 2rem;
} @media (max-width: 1439px) {	
	.settings-container .listing-card .address {
		font-size: 1.5rem;
	}
} @media (max-width: 1023px) {	
	.settings-container .listing-card .address {
		font-size: 2rem;
	}
} @media (max-width: 767px) {	
	.settings-container .listing-card .address {
		font-size: 1.5rem;
	}
}

.settings-container .listing-card .features {
	font-size: 1.5rem;
} @media (max-width: 1439px) {	
	.settings-container .listing-card .features {
		font-size: 1rem;
	}
} @media (max-width: 1023px) {	
	.settings-container .listing-card .features {
		font-size: 1.5rem;
	}
} @media (max-width: 767px) {	
	.settings-container .listing-card .features {
		font-size: 1rem;
	}
}

.price-change-bubble {
	position: absolute;
	top: var(--spacing_10);
	left: var(--spacing_10);
	background: var(--color_2);
	color: white;
	padding: var(--spacing_5);
	border-radius: var(--spacing_5);
	font-weight: bold;
	z-index: 10;
}

/* Open house badge. Bottom-left, because it is the only free corner of the photo: the heart is
   top-right, the price-change bubble is top-left, and a listing can carry a price change and an
   open house at once. Styled to match that bubble so the two read as the same family. */
.listing-card .open-house-badge {
	position: absolute;
	bottom: var(--spacing_10);
	left: var(--spacing_10);
	background: var(--color_2);
	color: white;
	padding: var(--spacing_5);
	border-radius: var(--spacing_5);
	font-weight: bold;
	text-transform: uppercase;
	z-index: 10;
}

/*-------------------- REVIEW CARDS --------------------*/
.review-card {
	flex-shrink: 0;
	width: 23.25rem;
	height: auto;
	min-height: 18rem;
}/* @media (max-width: 1439px) {
	.review-card {
		width: 20rem;
		min-height: 16rem;
	}
}*/

.review-rating .star {
	line-height: 3rem;
	color: #eeeeee;
}

.review-rating .star.filled {
	color: #ffd700;
}

.review-message {
	text-align: center;
}

/*-------------------- ACCORDIONS --------------------*/
.accordion-toggle.active {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.accordion-toggle:hover {
	border: none !important;
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	width: 100%;
}

/* FAQ answers are the longest prose on several pages and stretched to the full accordion
   width - measured 152 characters per line on the TC page at 1600px, 96 on the platform home.
   Capped here rather than on each page because the accordion is shared: this one rule covers
   the TC, home, mortgage and community FAQs. Targets the paragraph, not .accordion-inner
   itself, so padding and any non-prose content inside keep the full width. */
.accordion-inner p {
	max-width: var(--measure);
	margin-inline: auto;
}

/*-------------------- MAPS --------------------*/
.map-container {
	flex: 1;
	position: relative;
} @media (max-width: 767px) {
	.map-container {
		display: none;
	}
}

.map-zoom-hint {
	top: var(--spacing_10);
	left: 50%;
	transform: translateX(-50%);
	border-radius: var(--border_radius);
	pointer-events: none;
	white-space: nowrap;
}
/* Shown wherever there is a mouse wheel, because Shift-to-zoom is enforced at every width - the
   old max-width:1439px rule hid the explanation on ordinary laptops while still blocking their
   scroll-zoom. Hidden on touch, where pinch-to-zoom works and the hint would be nonsense. */
@media (hover: none), (pointer: coarse) {
	.map-zoom-hint {
		display: none;
	}
}

.listing-right-side-bar #map {
	aspect-ratio: 1 / 1;
} @media (max-width: 767px) {	
	.listing-right-side-bar #map {
		border-radius: 0;
		border-top: none;
		border-right: none;
		border-left: none;
	}
}

.mapboxgl-ctrl-attrib-inner,
.mapboxgl-ctrl-bottom-left,
.mapboxgl-popup .mapboxgl-popup-close-button,
.listing-right-side-bar #map .mapboxgl-control-container {
	display: none !important;
}

.mapboxgl-popup-content,
.listing-card-popup {
	max-width: unset !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: unset !important;
}

.mapbox-marker {
	cursor: pointer !important;
	border-radius: 0 !important;
	background-image: url(/images/house.webp) !important;
	background-size: cover !important;
	width: 32px !important;
	height: 32px !important;
}

.mapboxgl-ctrl-top-right button {
	border-radius: unset !important;
}

/*-------------------- AUTH FORM STYLES --------------------*/
.error-message {
	background: #fef2f2;
	border: 1px solid var(--border_color);
	border-radius: var(--border_radius);
	padding: var(--spacing_10);
}

.error-message p {
	color: #dc2626;
	text-align: center;
}

.success-message {
	background: #f0fdf4;
	border: 1px solid var(--border_color);
	border-radius: var(--border_radius);
	padding: var(--spacing_10);
}

.success-message p {
	color: #16a34a;
	text-align: center;
}

#resetPasswordForm {
	padding: var(--spacing_20);
}

#resetPasswordForm p {
	text-align: center;
}

#formErrorMessage {
	margin-top: var(--spacing_10);
}

/* Social login buttons (Google / Facebook) */
.auth-social-divider { display: flex; align-items: center; text-align: center; margin: 16px 0; color: #888; font-size: 13px; }
.auth-social-divider::before, .auth-social-divider::after { content: ""; flex: 1; border-bottom: 1px solid #ddd; }
.auth-social-divider span { padding: 0 12px; }
.auth-social-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; margin-bottom: 10px; border: 1px solid #dadce0; border-radius: 6px; background: #fff; color: #3c4043; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.auth-social-button:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.auth-social-button img { width: 18px; height: 18px; }
.auth-social-facebook { color: #1877f2; }