/* ============================================================================
   InsuranceMonster - rootSite design system
   Aesthetic: light, friendly, trustworthy consumer insurtech (Lemonade / Kin lane).
   White + soft green, rounded shapes, Nunito, cartoon monster "protection" art,
   generous whitespace, one strong green accent, honest trust signals.

   Palette pulled from the logo + app icon.
   All visual styling lives here (no inline style attributes per project rules).
   Structure:  0) Font  1) Tokens  2) Base  3) Layout  4) Components  5) Sections  6) Responsive
   ============================================================================ */

/* 0) FONT ------------------------------------------------------------------
   Nunito, self-hosted.

   It used to load from fonts.googleapis.com, which cost every page three
   round-trips before a single character could paint: DNS + TLS + the CSS to
   googleapis, then DNS + TLS + the font to gstatic, and only then the render.
   Both are render-blocking and both are on someone else's infrastructure.
   Across ~500 pages that was the single largest self-inflicted LCP cost on the
   site, and it also meant every visitor was disclosed to a third party.

   ONE FILE, ALL WEIGHTS. Google serves Nunito as a VARIABLE font, so the same
   woff2 backs 400 through 900 - the five weights this stylesheet uses are one
   39KB download, not five. `font-weight: 400 900` declares that range; do not
   split this into five @font-face blocks, it would fetch the same file
   five times.

   Latin subset only, deliberately: the project's ASCII-only output rule means
   the cyrillic, greek, vietnamese and latin-ext subsets can never be needed.

   font-display: swap keeps text visible during the fetch rather than blocking
   on it, matching what the Google CSS requested.

   Nunito is SIL Open Font License 1.1 - self-hosting is expressly permitted.
   See fonts/OFL.txt.
*/
@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("/fonts/nunito-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

/* 1) TOKENS ---------------------------------------------------------------- */
:root {
	/* Brand green (from app icon + logo) */
	--brand-700: #4a8a22;
	--brand-600: #5ea32e;
	--brand-500: #7cc242;   /* primary */
	--brand-300: #a6d977;
	--brand-100: #e2f2cf;
	--brand-50:  #f0f8e6;

	/* Ink / navy (from the wordmark) */
	--ink:       #17233a;
	--ink-soft:  #2b3a52;

	/* Shield blue (accent, from the artwork) */
	--blue-500:  #2f6fd0;
	--blue-50:   #eaf2fc;

	/* Neutrals */
	--n-0:   #ffffff;
	--n-25:  #fbfcfa;
	--n-50:  #f5f8f3;
	--n-100: #eef2ea;
	--n-200: #e3e9dd;
	--n-300: #cfd8c8;

	/* Semantic */
	--text:              #17233a;
	--text-muted:        #5c6a76;
	--text-invert:       #eef4ea;
	--text-invert-muted: #aebccb;
	--bg:                #ffffff;
	--bg-tint:           #f4f8f0;
	--bg-navy:           #14203a;
	--border:            #e7ede1;
	--border-strong:     #d7e0cd;
	--btn-ink:           #14261a;   /* dark text on green buttons */
	--danger-bg:  #fdecea; --danger-line: #f5c2bd; --danger-ink: #a12a1c;
	--warn-bg:    #fff4e0; --warn-line:   #f2d9a8; --warn-ink:   #8a5300;

	/* Soft blobs behind art */
	--blob-green: radial-gradient(closest-side, rgba(124,194,66,.28), rgba(124,194,66,0) 72%);

	/* Radius (friendly / rounded) */
	--r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

	/* Shadows (soft, slight green tint) */
	--shadow-sm:   0 1px 2px rgba(20,40,20,.05), 0 3px 10px rgba(20,40,20,.05);
	--shadow-md:   0 12px 34px rgba(20,40,20,.09);
	--shadow-lg:   0 28px 64px rgba(20,40,20,.14);
	--shadow-btn:  0 8px 20px rgba(124,194,66,.36);

	/* Spacing */
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
	--s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

	/* Type - Nunito, rounded and friendly, to match the wordmark */
	--font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fs-display: clamp(2.5rem, 5.4vw, 4rem);
	--fs-h1: clamp(2rem, 4.2vw, 3rem);
	--fs-h2: clamp(1.6rem, 3.2vw, 2.3rem);
	--fs-h3: 1.28rem;
	--fs-lg: 1.18rem;
	--fs-sm: 0.92rem;
	--fs-xs: 0.8rem;

	--maxw: 1360px;
	--section-y: clamp(56px, 8vw, 104px);
}

/* 2) BASE ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* The hidden attribute must always win. It is what keeps the lead-form error
   banner out of sight until js/site.js reveals it, and a later component rule
   setting display on that element would otherwise pin an error message open
   on a form that has nothing wrong with it. */
[hidden] { display: none !important; }

body {
	margin: 0;
	font-family: var(--font);
	color: var(--text);
	background: var(--bg);
	line-height: 1.62;
	font-size: 1.02rem;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--text); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); font-weight: 900; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 1rem; }
a  { color: var(--brand-700); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 800; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 var(--r-sm) 0; }
.skip-link:focus { left: 8px; top: 8px; }

/* 3) LAYOUT ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: var(--section-y) 0; }
.bg-tint, .bg-soft { background: var(--bg-tint); }
.bg-navy, .bg-dark { background: var(--bg-navy); color: var(--text-invert); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-navy p, .bg-dark p { color: var(--text-invert-muted); }

.section-head { max-width: 58ch; margin-bottom: var(--s7); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: var(--fs-lg); color: var(--text-muted); margin: 0; }

.eyebrow { display: inline-block; color: var(--brand-700); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-xs); margin-bottom: var(--s3); }
.bg-navy .eyebrow, .bg-dark .eyebrow { color: var(--brand-300); }
.grad-text { color: var(--brand-600); }
.lede { font-size: var(--fs-lg); color: var(--text-muted); }
.bg-navy .lede, .bg-dark .lede { color: var(--text-invert-muted); }

/* 4) COMPONENTS ------------------------------------------------------------ */

/* Buttons - pill, friendly, dark text on green */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: inherit; font-weight: 800; text-decoration: none; font-size: 1rem; line-height: 1;
	padding: 15px 28px; border-radius: var(--r-pill); border: 2px solid transparent;
	cursor: pointer; transition: transform .1s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-500); color: var(--btn-ink); box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(124,194,66,.44); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--brand-500); color: var(--brand-700); }
.btn-lg { padding: 18px 34px; font-size: 1.08rem; }
.btn-sm { padding: 11px 18px; font-size: .92rem; }
.bg-navy .btn-ghost, .bg-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.bg-navy .btn-ghost:hover, .bg-dark .btn-ghost:hover { border-color: var(--brand-300); color: var(--brand-300); }

/* Badges / pills / chips */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em; padding: 6px 12px; border-radius: var(--r-pill); background: var(--brand-500); color: var(--btn-ink); }
.badge-soft { background: var(--brand-100); color: var(--brand-700); }
.badge-outline { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: var(--r-pill); background: var(--n-0); color: var(--text); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-sm); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); }
a.chip { text-decoration: none; transition: border-color .18s ease, color .18s ease; }
a.chip:hover { border-color: var(--brand-500); color: var(--brand-700); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }

/* Header */
.site-header { --header-h: 112px; position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); height: var(--header-h); }
.brand { display: flex; align-items: center; }
.brand img { height: 96px; width: auto; }
.brand span { position: absolute; left: -999px; }
.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: var(--s5); margin: 0; padding: 0; align-items: center; }
.main-nav a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: .98rem; }
.main-nav a:hover { color: var(--brand-700); }
/* Product dropdown menus. The top item links to its pillar and reveals its
   sub-products on hover or keyboard focus (focus-within keeps it keyboard-usable). */
.main-nav .has-menu { position: relative; }
.main-nav .has-menu > a { display: inline-flex; align-items: center; gap: 6px; }
.main-nav .has-menu > a::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .5; }
.main-nav .submenu { list-style: none; margin: 0; padding: var(--s2); display: none; position: absolute; top: 100%; left: 0; min-width: 232px; background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); z-index: 60; }
.main-nav .has-menu:hover > .submenu, .main-nav .has-menu:focus-within > .submenu { display: block; }
.main-nav .submenu a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.main-nav .submenu a:hover { background: var(--n-50); color: var(--brand-700); }
/* Desktop: make each top-level item fill the header height so its dropdown drops
   from the header's bottom edge (not from the short link text). */
@media (min-width: 901px) {
	.main-nav > ul { height: var(--header-h); align-items: stretch; }
	.main-nav > ul > li { display: flex; align-items: center; }
}
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; margin-left: auto; color: var(--ink); }

/* Hero (light, Kin-style split) */
.hero { background: linear-gradient(180deg, var(--brand-50), #fff 76%); padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s7); align-items: center; }
.hero h1 { font-size: var(--fs-display); }
.hero p.lede { max-width: 42ch; }
.hero-actions { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); align-items: center; }
.hero-actions .phone { font-weight: 800; text-decoration: none; color: var(--ink); }
.hero-actions .phone:hover { color: var(--brand-700); }
.hero-fineprint { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--text-muted); }
.hero-fineprint strong { color: var(--brand-700); }
.hero-art { position: relative; text-align: center; }
.hero-art::before { content: ""; position: absolute; inset: -6% -4%; background: var(--blob-green); z-index: 0; }
.hero-art img { position: relative; z-index: 1; margin: 0 auto; }

/* Quick-start (hero inline mini form, Kin-style) */
.quickstart { margin-top: var(--s5); background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s3); align-items: end; }
.quickstart .field { margin: 0; }
.quickstart .btn { width: 100%; }

/* Trust bar (light, honest signals) */
.trustbar { background: var(--n-0); border-bottom: 1px solid var(--border); }
.trustbar .wrap { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: var(--s5) 24px; justify-content: center; align-items: center; }
.trust-item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.trust-item svg, .trust-item .tick { color: var(--brand-600); flex: none; }
.tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-weight: 900; font-size: .8rem; }
.trust-link { color: var(--brand-700); font-weight: 800; text-decoration: none; }
.trust-link:hover { text-decoration: underline; }
.stars { color: #f5a623; letter-spacing: 2px; font-size: 1rem; }

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.stat { padding: var(--s6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--n-0); box-shadow: var(--shadow-sm); text-align: center; }
.stat .num { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1; color: var(--brand-600); }
.stat .label { color: var(--text-muted); margin-top: var(--s3); font-size: var(--fs-sm); }
.bg-navy .stat, .bg-dark .stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.bg-navy .stat .num { color: var(--brand-300); }
.bg-navy .stat .label { color: var(--text-invert-muted); }
.stat-note { max-width: 78ch; margin: var(--s5) auto 0; text-align: center; font-size: var(--fs-xs); color: var(--text-invert-muted); }
.bg-navy .stat-note a, .bg-dark .stat-note a { color: var(--brand-300); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.card { position: relative; background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card .card-art { height: 150px; display: grid; place-items: center; margin-bottom: var(--s4); border-radius: var(--r-lg); background: var(--brand-50); }
.card .card-art img { max-height: 128px; width: auto; }
.card-fire .card-art { background: #fff3e8; }
.card-auto .card-art { background: var(--blue-50); }
.card h3 { font-size: 1.32rem; }
.card ul { margin: 0 0 var(--s5); padding-left: 18px; color: var(--text-muted); }
.card ul li { margin-bottom: 5px; }
.card .card-link { margin-top: auto; font-weight: 800; text-decoration: none; color: var(--brand-700); }
.card .card-link:hover { color: var(--brand-600); }

/* 4-up pillar grid (renters joined auto/home/wildfire as a launch product). */
.cards.cards-4 { grid-template-columns: repeat(4, 1fr); }
/* 5-up pillar grid (pet joined the launch products). Base rule lives before the
   responsive block below so those media queries win on small screens. */
.cards.cards-5 { grid-template-columns: repeat(5, 1fr); }
.card-renters .card-art { background: var(--brand-100); }
.card-pet .card-art { background: var(--brand-100); }
/* Featured card - carries a corner badge, so it reserves headroom for it. */
.card-featured { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.card-featured:hover { border-color: var(--brand-500); }
.card-badge { position: absolute; top: var(--s4); right: var(--s4); z-index: 1; box-shadow: var(--shadow-sm); }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.feature p { color: var(--text-muted); }
.bg-navy .feature p, .bg-dark .feature p { color: var(--text-invert-muted); }
.feature-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--brand-100); color: var(--brand-700); font-weight: 900; font-size: 1.3rem; margin-bottom: var(--s3); }

/* Perils strip - small round protection icons */
.perils { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: center; }
.peril { text-align: center; width: 132px; }
.peril .peril-img { width: 112px; height: 112px; margin: 0 auto var(--s2); border-radius: 50%; background: var(--brand-50); display: grid; place-items: center; overflow: hidden; }
.peril .peril-img img { width: 104px; height: auto; }
.peril span { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); counter-reset: step; }
.step { padding-left: 62px; position: relative; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; background: var(--brand-500); color: var(--btn-ink); border-radius: var(--r-md); display: grid; place-items: center; font-weight: 900; font-size: 1.15rem; }
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); }

/* Surface panel */
.surface { background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-sm); }

/* Quick answer (AEO box) */
.quick-answer { background: var(--brand-50); border-left: 4px solid var(--brand-500); border-radius: var(--r-md); padding: var(--s5); margin: 0 0 var(--s5); }
.quick-answer strong { color: var(--brand-700); }

/* Lead form */
.quote { background: linear-gradient(180deg, #fff, var(--brand-50)); }
.quote .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s8); align-items: center; }
.lead-form { background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--shadow-md); }
.lead-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.field { margin-bottom: var(--s4); }
.field label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 1rem; font-family: inherit; background: var(--n-0); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(124,194,66,.22); }
.field textarea { min-height: 96px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--s3); }
.form-error { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-ink); padding: 12px 14px; border-radius: var(--r-md); margin-bottom: var(--s4); }
/* Standing disclosure inside the lead form: where we can write, and what is
   coming. Always visible, unlike .form-error which is revealed on failure. */
.form-notice { background: var(--brand-50); border-left: 4px solid var(--brand-500); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 var(--s4); font-size: var(--fs-sm); color: var(--text-muted); }
.form-notice strong { color: var(--brand-700); }
/* Required-field marker. aria-hidden in the markup - the required attribute is
   what actually tells a screen reader, so this is decoration for sighted users. */
.req { color: var(--danger-ink); font-weight: 900; margin-left: 3px; }

/* FAQ */
.faq details { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--s3); background: var(--n-0); overflow: hidden; }
.faq summary { cursor: pointer; font-weight: 800; padding: 18px 20px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--brand-700); font-weight: 900; font-size: 1.2em; line-height: 1; }
.faq details[open] summary::after { content: "-"; }
.faq details > p { padding: 0 20px 18px; margin: 0; color: var(--text-muted); }

/* Footer */
.site-footer { background: var(--bg-navy); color: var(--text-invert-muted); padding: var(--s8) 0 var(--s6); }
.site-footer a { color: #d6e6c7; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); }
.footer-grid img { margin-bottom: var(--s4); }
.footer-logo { display: inline-block; background: #fff; padding: 10px 16px; border-radius: var(--r-md); margin-bottom: var(--s4); }
.footer-logo img { margin: 0; display: block; }
.footer-grid h4 { color: #fff; font-size: .95rem; margin: 0 0 var(--s3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; font-size: .93rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--s7); padding-top: var(--s5); font-size: var(--fs-xs); color: #8397a6; }
.footer-legal p { margin: 0 0 8px; }

/* Content pages */
.page-hero { background: linear-gradient(180deg, var(--brand-50), #fff); padding: clamp(44px, 6vw, 80px) 0; border-bottom: 1px solid var(--border); }
.page-hero.has-art { overflow: hidden; }
.page-hero.has-art .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s7); align-items: center; }
.page-hero-copy .lede { max-width: 48ch; }
.page-hero-art { position: relative; text-align: center; }
.page-hero-art::before { content: ""; position: absolute; inset: -8% -6%; background: var(--blob-green); z-index: 0; }
.page-hero-art img { position: relative; z-index: 1; margin: 0 auto; width: auto; max-width: 100%; max-height: 320px; }
.prose { max-width: 1000px; }
/* Widen the content column to match the wider header, but keep running text at a
   comfortable reading measure - callouts, tables, and cards use the full width. */
.prose > p,
.prose > ul:not(.col-2),
.prose > ol { max-width: 74ch; }
.prose h2 { margin-top: 1.9em; }
.prose ul { color: var(--text-muted); }
/* Inline literals in prose - a URL path, a header name, a tag. Scoped to .prose
   rather than styling bare <code> globally, matching `.swatch .meta code`. */
.prose code {
	font-size: .92em;
	padding: .1em .35em;
	border: 1px solid var(--border);
	border-radius: 5px;
	background: var(--n-50);
	color: var(--ink-soft);
	overflow-wrap: break-word;
}

.office-address { font-style: normal; line-height: 1.7; color: var(--text-muted); }
.office-address a { font-weight: 700; color: var(--ink); text-decoration: none; }

/* Utilities */
.mt { margin-top: var(--s6); }
.mt-lg { margin-top: var(--s7); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }

/* 5) STYLE-GUIDE HELPERS --------------------------------------------------- */
.type-display { font-size: var(--fs-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.04; margin-bottom: var(--s5); }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
.swatch { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--n-0); }
.swatch .chip-color { height: 74px; }
.swatch .meta { padding: 10px 12px; font-size: var(--fs-xs); }
.swatch .meta code { color: var(--text-muted); }
.specimen { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.chip-color[data-c="brand-500"] { background: var(--brand-500); }
.chip-color[data-c="brand-600"] { background: var(--brand-600); }
.chip-color[data-c="brand-700"] { background: var(--brand-700); }
.chip-color[data-c="brand-100"] { background: var(--brand-100); }
.chip-color[data-c="brand-50"]  { background: var(--brand-50); }
.chip-color[data-c="ink"]       { background: var(--ink); }
.chip-color[data-c="blue-500"]  { background: var(--blue-500); }
.chip-color[data-c="n-200"]     { background: var(--n-200); }
.chip-color[data-c="n-50"]      { background: var(--n-50); }

/* 6) RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 900px) {
	.main-nav { display: none; }
	.main-nav.open { display: block; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--n-0); border-bottom: 1px solid var(--border); padding: var(--s4) 24px; box-shadow: var(--shadow-md); }
	.main-nav.open ul { flex-direction: column; align-items: flex-start; gap: var(--s4); }
	.main-nav.open .submenu { display: block; position: static; border: 0; box-shadow: none; min-width: 0; padding: var(--s2) 0 0 var(--s4); gap: var(--s2); }
	.main-nav.open .submenu a { padding: var(--s2) 0; font-weight: 600; }
	.main-nav.open .has-menu > a::after { display: none; }
	.nav-toggle { display: block; }
	.site-header { --header-h: 76px; }
	.brand img { height: 56px; }
	.hero .wrap, .quote .wrap, .page-hero.has-art .wrap { grid-template-columns: 1fr; }
	.hero-art { order: -1; max-width: 460px; margin: 0 auto; }
	.page-hero-art { order: -1; max-width: 300px; margin: 0 auto; }
	.quickstart { grid-template-columns: 1fr; }
	.cards, .cards.cards-4, .cards.cards-5, .feature-grid, .steps, .steps.steps-4, .stat-grid, .footer-grid, .grid-2 { grid-template-columns: 1fr; }
	.lead-form .row { grid-template-columns: 1fr; }
	/* .expert-band and .spotlight are defined in section 7 (below this block),
	   so their responsive overrides must live in the trailing block at the end
	   of the file - a rule here would be overridden by source order. */
}
@media (min-width: 901px) and (max-width: 1080px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.steps.steps-4 { grid-template-columns: 1fr 1fr; }
	.cards.cards-4, .cards.cards-5 { grid-template-columns: 1fr 1fr; }
}

/* 7) GENERATED CONTENT COMPONENTS ------------------------------------------
   Used by siteGen/build.js output: breadcrumbs, location hub, glossary,
   related-link blocks, chip rows. All tokens, no inline styles. */

/* Breadcrumbs */
.breadcrumbs { background: var(--n-25); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.breadcrumbs .wrap { padding-top: var(--s3); padding-bottom: var(--s3); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; align-items: center; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--border-strong); margin-left: 8px; }
.breadcrumbs a { color: var(--brand-700); text-decoration: none; font-weight: 700; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li[aria-current="page"] { color: var(--text); font-weight: 700; }

/* Link lists (footer-style lists inside prose/hubs) */
.link-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.link-list li { margin-bottom: 8px; }
.link-list a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.link-list a:hover { text-decoration: underline; }

/* Chip rows (city chips, community lists) */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); }
.chip-row .chip { text-decoration: none; transition: border-color .15s ease, transform .1s ease, box-shadow .18s ease; }
.chip-row .chip:hover { border-color: var(--brand-500); color: var(--brand-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* California hub - region grid of county links */
.region-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.region { background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-sm); }
.region h3 { font-size: 1.08rem; color: var(--brand-700); margin-bottom: var(--s3); }
.region .link-list { margin: 0; }

/* Related block (end of content pages) */
.related { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--border); }
.related h2 { font-size: 1.2rem; margin-top: 0; }

/* Visible NAP block (name/address/phone) on the contact page. Keeps the page
   consistent with the InsuranceAgency JSON-LD, which asserts the same address. */
.nap { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); }
.nap h2 { font-size: 1.05rem; margin: 0 0 var(--s2); }
.nap-line { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.nap-line a { color: var(--brand-700); font-weight: 700; }

/* Service-area block (flagship entity pages). States licence, geography, and a
   contact route in one extractable place so an answer engine can recommend us
   for an unbranded "find a California broker who..." question. */
.service-area { margin-top: var(--s7); padding: var(--s5); background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--r-md); }
.service-area h2 { font-size: 1.2rem; margin-top: 0; margin-bottom: var(--s3); }
.service-area p { margin: 0 0 var(--s3); }
.service-area p:last-child { margin-bottom: 0; }
.service-area a { color: var(--brand-700); font-weight: 700; }
.service-area-cities { font-size: var(--fs-sm); color: var(--text-muted); }

/* Sources block (end of content pages, above .related). Cites the regulator or
   publishing body behind the figures on the page - see siteGen/data/sources.js.
   Deliberately understated: it is provenance, not a navigation surface. */
.sources { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--border); }
.sources h2 { font-size: 1.2rem; margin-top: 0; margin-bottom: var(--s2); }
.sources-intro { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.source-list li:last-child { border-bottom: 0; }
.source-list a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.source-list a:hover { text-decoration: underline; }
.source-pub { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }

/* Muted inline note (e.g. county seat next to a link) */
.muted { color: var(--text-muted); font-weight: 400; font-size: var(--fs-sm); }

/* Glossary */
.glossary { margin: 0; }
.glossary .term { padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.glossary dt { font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.glossary dd { margin: 0; color: var(--text-muted); }

/* Guides hub cards - link the card heading, not just an image */
.cards .card h3 { margin-bottom: var(--s2); }
.cards .card h3 a { text-decoration: none; color: var(--ink); }
.cards .card h3 a:hover { color: var(--brand-700); }

/* Fire Hazard Severity Zone (FHSZ) pages ---------------------------------- */
/* Extractable data table (wide tables scroll inside their own container) */
.table-scroll { overflow-x: auto; margin: 0 0 var(--s5); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--n-0); }
.data-table caption { text-align: left; padding: var(--s4) var(--s4) var(--s3); font-weight: 800; color: var(--ink); }
.data-table th, .data-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table thead th { background: var(--bg-tint); font-weight: 800; color: var(--ink); white-space: nowrap; }
.data-table th[scope="row"] { font-weight: 700; color: var(--text); white-space: nowrap; }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

/* Fine-print callout (rate disclaimers, data caveats under stat/table blocks).
   Muted, bordered, clearly secondary to body copy. */
.data-note { background: var(--n-25); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin: 0 0 var(--s5); font-size: var(--fs-sm); color: var(--text-muted); }
.data-note strong { color: var(--text); }
.data-note a { color: var(--brand-700); font-weight: 700; }

/* "Real questions" Q&A blocks (long-tail questions answered in-content). */
.qa-list { display: grid; gap: var(--s4); margin: 0 0 var(--s5); }
.qa-item { border: 1px solid var(--border); border-left: 4px solid var(--brand-300); border-radius: var(--r-md); background: var(--n-0); padding: var(--s5); box-shadow: var(--shadow-sm); }
.qa-q { font-size: 1.08rem; margin: 0 0 var(--s2); color: var(--ink); }
.qa-a { color: var(--text-muted); }
.qa-a a { color: var(--brand-700); font-weight: 700; }

/* Interactive self-check widget (e.g. SR-22 "do I need one" quiz). Static,
   accessible form; JS enhances it into a client-side result. No inline styles. */
.selfcheck { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--n-0); box-shadow: var(--shadow-sm); padding: var(--s6); margin: 0 0 var(--s5); }
.selfcheck-q { border: 0; margin: 0 0 var(--s5); padding: 0; }
.selfcheck-q legend { font-weight: 800; color: var(--ink); margin-bottom: var(--s3); padding: 0; }
.selfcheck-q label { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) 0; color: var(--text); cursor: pointer; }
.selfcheck-q input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand-600); flex: none; }
.selfcheck-go { margin-top: var(--s2); }
.selfcheck-result { margin: var(--s5) 0 0; padding: var(--s5); border-radius: var(--r-md); border-left: 4px solid var(--border-strong); background: var(--n-25); color: var(--text); }
.selfcheck-result.is-yes { background: var(--brand-50); border-left-color: var(--brand-500); }
.selfcheck-result.is-warn { background: var(--warn-bg); border-left-color: var(--warn-line); }
.selfcheck-result.is-no { background: var(--n-25); border-left-color: var(--border-strong); }
.selfcheck-result strong { color: var(--ink); }
.selfcheck-disc { display: block; margin-top: var(--s3); font-size: var(--fs-xs); color: var(--text-muted); }
.selfcheck-note { margin: var(--s4) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.selfcheck-select { display: block; }
.selfcheck-select span { display: block; font-weight: 700; margin-bottom: var(--s2); color: var(--text); }
.selfcheck-select select, .selfcheck-select input[type="number"] { width: 100%; max-width: 440px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--n-0); color: var(--text); font: inherit; }
.selfcheck-result a { color: var(--brand-700); font-weight: 700; }
.selfcheck-result.is-warn a, .selfcheck-result.is-yes a { color: var(--brand-800, var(--brand-700)); }

/* Hazard-level badge */
.hazard { display: inline-block; padding: 3px 11px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; line-height: 1.5; border: 1px solid transparent; }
.hazard-high { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-line); }
.hazard-moderate { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.hazard-low { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }

/* Reviewer byline + freshness signal */
.byline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; margin: 0 0 var(--s5); padding: var(--s3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); }
.byline strong { color: var(--ink); }

/* Expert card (authorship byline on product + guide pages) */
.expert-card { display: flex; gap: var(--s4); align-items: center; margin: 0 0 var(--s6); padding: var(--s4); background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--r-md); }
.expert-card-photo { width: 64px; height: 64px; border-radius: var(--r-pill); object-fit: cover; flex: none; background: var(--n-100); border: 2px solid var(--n-0); box-shadow: var(--shadow-sm); }
.expert-card-body { min-width: 0; }
.expert-card p { margin: 0; }
.expert-card-by { color: var(--text); font-size: var(--fs-sm); }
.expert-card-by a { color: var(--ink); text-decoration: none; }
.expert-card-by a:hover { color: var(--brand-700); text-decoration: underline; }
.expert-card-meta { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 2px; }
.expert-card-links { font-size: var(--fs-xs); margin-top: 4px; }
.expert-card-links a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.expert-card-links a:hover { text-decoration: underline; }

/* Homepage product spotlight band (renters - the launch product) */
.spotlight { display: grid; grid-template-columns: 1fr 340px; gap: var(--s7); align-items: center; }
.spotlight-art { margin: 0; order: 2; }
.spotlight-art img { width: 100%; max-width: 340px; height: auto; }
.spotlight-copy { order: 1; }
.spotlight h2 { margin-bottom: var(--s3); }
.spotlight-lede { font-size: var(--fs-lg); color: var(--text-muted); margin: 0 0 var(--s5); }
.spotlight-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
.spotlight-points li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); }
.spotlight-points .tick { flex: none; margin-top: 1px; }
.spotlight-points strong { display: block; color: var(--ink); font-size: .98rem; margin-bottom: 2px; }
.spotlight-cta { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin: var(--s6) 0 0; }
.spotlight-note { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--s4) 0 0; }

/* Homepage renters price. The two bindable California options, shown as real
   numbers rather than hidden behind a "what does it cost?" click. Figures are
   hand-typed in index.html - see the RATE DEPENDENCY comment there. */
.spotlight-price { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s6) 0 0; }
.price-option { flex: 1 1 220px; padding: var(--s4) var(--s5); background: var(--n-0); border: 1px solid var(--border); border-left: 4px solid var(--brand-500); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.price-amount { display: block; font-size: 1.9rem; font-weight: 900; color: var(--ink); line-height: 1.1; }
.price-per { font-size: 1rem; font-weight: 700; color: var(--text-muted); margin-left: 2px; }
.price-detail { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
.spotlight-price-note { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--s3) 0 0; }

/* Homepage "meet your broker" band */
.expert-band { display: grid; grid-template-columns: 300px 1fr; gap: var(--s7); align-items: center; }
.expert-band .expert-figure { margin: 0; }
.expert-band .expert-figure img { max-width: 300px; }
.expert-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }

/* Expert profile page */
.expert-figure { margin: 0; text-align: center; }
.expert-figure img { width: 100%; max-width: 320px; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-md); background: var(--n-100); }
.expert-figure figcaption { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-muted); font-weight: 700; }
.expert-verify { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); font-size: var(--fs-sm); }
.expert-verify a { color: var(--brand-700); font-weight: 700; }
.verify-badge { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.prose ul.col-2 { columns: 2; column-gap: var(--s7); }
@media (max-width: 640px) { .prose ul.col-2 { columns: 1; } }

/* Sources / citations block */
.sources { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--border); }
.sources h2 { font-size: 1.2rem; margin-top: 0; }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li { margin-bottom: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.sources a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.sources a:hover { text-decoration: underline; }

/* Responsive overrides for the section 7 components above. These must stay at
   the end of the file: section 6's media queries come earlier in source order
   and would lose to the desktop rules defined in this section. */
@media (max-width: 900px) {
	.region-grid { grid-template-columns: 1fr; }
	.expert-band { grid-template-columns: 1fr; gap: var(--s5); }
	.expert-band .expert-figure { max-width: 260px; margin: 0 auto; }
	.spotlight { grid-template-columns: 1fr; gap: var(--s5); }
	.spotlight-art { order: -1; max-width: 240px; margin: 0 auto; }
	.spotlight-points { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1080px) {
	.region-grid { grid-template-columns: 1fr 1fr; }
	.spotlight { grid-template-columns: 1fr 240px; }
}

/* 8) FEEDBACK / RATE PAGE (rate.asp - the QR standee survey) -----------------
   Phone-first, single narrow column, big thumb targets. Kept at the very end of
   the file so these component media queries are safe from the section-7 trap. */
.rate-section { padding: var(--s7) 0 var(--s8); }
.rate-wrap { max-width: 620px; }

.rate-intro { text-align: center; margin-bottom: var(--s6); }
.rate-intro .lede { margin: 0 auto var(--s5); max-width: 46ch; }
.rate-logo { margin: 0; }
.rate-logo img { margin: 0 auto var(--s3); max-width: 360px; width: 100%; }
.rate-logo figcaption { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }

/* "Meet the monster" mascot strip - the character raters are judging. */
.rate-mascots-head { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); margin: var(--s6) 0 var(--s3); }
.rate-mascots { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin: 0; padding: 0; }
.rate-mascots li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; }
.rate-mascots img { width: 96px; height: 96px; object-fit: contain; background: var(--brand-50); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px; }
.rate-mascots span { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }

.rate-err { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-ink); border-radius: var(--r-md); padding: var(--s3) var(--s4); font-weight: 700; font-size: var(--fs-sm); margin: 0 0 var(--s4); }

.rate-card { background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--shadow-md); }

.rate-q { border: 0; margin: 0 0 var(--s6); padding: 0; }
.rate-label { display: block; font-weight: 800; color: var(--ink); font-size: var(--fs-lg); margin-bottom: var(--s3); padding: 0; }
.rate-opt-note { font-weight: 600; color: var(--text-muted); font-size: var(--fs-sm); }

/* Option groups: big tappable tiles/bars wrapping a visually-hidden radio. */
.rate-opts { display: grid; gap: var(--s3); }
.rate-opts-3 { grid-template-columns: repeat(3, 1fr); }
.rate-opts-stack { grid-template-columns: 1fr; }
.rate-opts-wrap { display: flex; flex-wrap: wrap; }

.rate-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer; padding: var(--s5) var(--s3); border: 2px solid var(--border-strong); border-radius: var(--r-lg); background: var(--n-0); transition: border-color .12s ease, background .12s ease, transform .08s ease; user-select: none; }
.rate-opt:hover { border-color: var(--brand-300); }
.rate-opt:active { transform: translateY(1px); }

/* Full-width stacked answer bars (quote-flow style, big thumb targets). */
.rate-opt-bar { flex-direction: row; justify-content: flex-start; gap: var(--s4); text-align: left; padding: var(--s4) var(--s5); border-radius: var(--r-md); }

/* Inline chips (the shopping list). */
.rate-opt-chip { flex-direction: row; padding: 12px 20px; border-radius: var(--r-pill); }

.rate-face { font-size: 2.7rem; line-height: 1; }
.rate-opt-bar .rate-face { font-size: 2rem; }
.rate-cap { font-size: var(--fs-sm); font-weight: 800; color: var(--text-muted); }
.rate-opt-bar .rate-cap { font-size: var(--fs-lg); }
.rate-opt-chip .rate-cap { font-size: var(--fs-sm); font-weight: 700; }

/* Selected state. :has() paints the whole pill on modern mobile browsers; the
   general-sibling rules below are the fallback that always highlights the label
   contents even where :has is unavailable. focus-within = keyboard a11y. */
.rate-opt:focus-within { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.rate-radio:checked ~ .rate-cap { color: var(--brand-700); }
.rate-radio:checked ~ .rate-face { transform: scale(1.08); }
.rate-opt:has(.rate-radio:checked) { border-color: var(--brand-500); background: var(--brand-50); box-shadow: var(--shadow-sm); }
.rate-opt:has(.rate-radio:checked) .rate-cap { color: var(--brand-700); }

/* Tier 2 - optional "tell me more". */
.rate-details { margin: 0 0 var(--s6); border-top: 1px dashed var(--border-strong); padding-top: var(--s5); }
.rate-more { cursor: pointer; font-weight: 800; color: var(--brand-700); list-style: none; padding: 4px 0; }
.rate-more::-webkit-details-marker { display: none; }
.rate-more::before { content: "+ "; font-weight: 900; }
.rate-details[open] .rate-more::before { content: "- "; }
.rate-details[open] .rate-more { margin-bottom: var(--s5); }

.rate-card textarea, .rate-card input[type="text"], .rate-card input[type="email"], .rate-card input[type="tel"] { width: 100%; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 1rem; font-family: inherit; background: var(--n-0); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
.rate-card textarea:focus, .rate-card input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(124,194,66,.22); }
.rate-card textarea { min-height: 96px; resize: vertical; }

/* Raffle capture - tinted, clearly separated from the quote funnel. */
.rate-raffle { background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); margin: 0 0 var(--s5); }
.rate-raffle-head { font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.rate-raffle-sub { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--s4); }
.rate-raffle .field { margin-bottom: 0; }
.rate-check { display: flex; align-items: center; gap: 10px; margin-top: var(--s4); font-weight: 700; cursor: pointer; }
.rate-check input { width: 20px; height: 20px; accent-color: var(--brand-500); flex: none; }

.rate-submit { width: 100%; margin-top: var(--s2); }

/* Thank-you state. */
.rate-done { text-align: center; max-width: 520px; margin: 0 auto; }
.rate-done img { margin: 0 auto var(--s4); }
.rate-done .lede { margin: 0 auto var(--s4); }
.rate-done-cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }

@media (max-width: 560px) {
	.rate-card { padding: var(--s5) var(--s4); }
	.rate-opts-3 { gap: var(--s2); }
	.rate-opts-3 .rate-opt { padding: var(--s4) 4px; border-radius: var(--r-md); }
	.rate-opts-3 .rate-face { font-size: 2.1rem; }
	.rate-opts-3 .rate-cap { font-size: var(--fs-xs); }
	.rate-opt-bar { padding: var(--s4); }
	.rate-opt-bar .rate-face { font-size: 1.7rem; }
	.rate-mascots li { width: 84px; }
	.rate-mascots img { width: 84px; height: 84px; }
}

/* 9) PROPERTY-MANAGER PROGRAMS + PRINTABLE ONE-SHEET -------------------------
   B2B pages under /property-managers/. Reuses .prose, .stat-grid, .data-table,
   .quote/.lead-form. New here: the hub card grid, the one-sheet layout, and the
   print rules that strip site chrome so the one-sheet saves cleanly as a PDF. */

/* Program hub cards */
.pm-card-grid { list-style: none; margin: var(--s5) 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(3, 1fr); }
.pm-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s5); background: var(--n-0); box-shadow: var(--shadow-sm); }
.pm-card h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); }
.pm-card p { margin: 0; color: var(--text-muted); }

/* One-sheet (a print-first summary page) */
.one-sheet-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s5); }
.one-sheet-head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s5); }
.one-sheet-logo { width: 200px; height: auto; flex: 0 0 auto; }
.one-sheet-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); margin: var(--s5) 0; }
.one-sheet-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s5); background: var(--n-25); }
.one-sheet-block h3 { margin: 0 0 var(--s3); }
.one-sheet-block ul { margin: 0; padding-left: var(--s5); }
.one-sheet-block li { margin: var(--s1) 0; }
.one-sheet-foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border-strong); }

/* Premium cards - the two quoted coverage packages on the national renters
   rate-card page, shown side by side with the price as the hero element.
   Named .premium-* rather than .rate-* on purpose: .rate-* belongs to the /rate
   feedback survey and the two must not collide. */
.premium-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.premium-card { border: 1px solid var(--border); border-left: 4px solid var(--brand-500); border-radius: var(--r-md); background: var(--n-0); box-shadow: var(--shadow-sm); padding: var(--s5); }
.premium-card h3 { margin: 0 0 var(--s3); font-size: var(--fs-h3); color: var(--ink); }
.premium-price { margin: 0; font-size: 2.4rem; line-height: 1.05; font-weight: 900; color: var(--brand-700); }
.premium-per { font-size: var(--fs-lg); font-weight: 700; color: var(--text-muted); }
.premium-sub { margin: var(--s2) 0 var(--s4); font-size: var(--fs-sm); color: var(--text-muted); }
.premium-list { margin: 0; padding-left: var(--s5); }
.premium-list li { margin: var(--s1) 0; color: var(--text); }

@media (max-width: 720px) {
	.pm-card-grid { grid-template-columns: 1fr; }
	.one-sheet-grid { grid-template-columns: 1fr; }
	.one-sheet-head { flex-direction: column; align-items: flex-start; gap: var(--s4); }
	.premium-grid { grid-template-columns: 1fr; }
}

/* 10) HOME-PAGE FEEDBACK BAND -----------------------------------------------
   The site-visitor entry point into rate.asp (the standee crowd arrives by QR
   instead). Deliberately the last band on the home page, below the quote form
   and the FAQ, so it never competes with the one CTA that earns anything - a
   visitor who scrolled this far has actually formed an impression worth asking
   about. Static markup in normal flow on purpose: no injected/dismissible bar,
   so it costs nothing in layout shift and is not an interstitial. Kept at the
   end of the file, past the section-7 trap, like sections 8 and 9. */
.feedback-band { display: grid; grid-template-columns: 180px 1fr; gap: var(--s6); align-items: center; max-width: 940px; margin: 0 auto; padding: var(--s6) var(--s7); background: var(--brand-50); border: 1px solid var(--border); border-radius: var(--r-xl); }
.feedback-band-art { justify-self: center; width: 180px; height: 180px; object-fit: contain; }
.feedback-band-copy h2 { font-size: var(--fs-h3); margin: 0 0 var(--s3); }
.feedback-band-copy p { margin: 0 0 var(--s4); color: var(--text-muted); }
.feedback-band-cta { margin: 0; }

@media (max-width: 720px) {
	.feedback-band { grid-template-columns: 1fr; text-align: center; gap: var(--s4); padding: var(--s6) var(--s5); }
	.feedback-band-art { width: 130px; height: 130px; }
}

/* 10) SITE SEARCH (/search/) -------------------------------------------------
   Its responsive rules live INSIDE this section rather than up in section 6.
   Section 6 RESPONSIVE sits above sections 7-10 in this file, so a media query
   added there for a class defined down here would be overridden by the
   unqualified rule that follows it - dead code that looks correct.
   ---------------------------------------------------------------------------- */

.site-search { margin: 0 0 var(--s5); }
.site-search-label { display: block; font-weight: 800; margin-bottom: var(--s2); }
.site-search-row { display: flex; gap: var(--s3); align-items: stretch; }
.site-search-input {
	flex: 1 1 auto; min-width: 0; padding: 14px 16px; font-size: 1rem; font-family: inherit;
	color: var(--text); background: var(--n-0);
	border: 1px solid var(--border-strong); border-radius: var(--r-md);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.site-search-input:focus {
	outline: none; border-color: var(--brand-500);
	box-shadow: 0 0 0 3px var(--brand-100);
}
.site-search-status { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 var(--s4); min-height: 1.4em; }

.search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.search-result {
	background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-md);
	padding: var(--s4); box-shadow: var(--shadow-sm);
}
.search-result-title { display: block; font-weight: 800; font-size: var(--fs-lg); line-height: 1.3; }
.search-result-url { display: block; color: var(--brand-700); font-size: var(--fs-xs); margin-top: 2px; word-break: break-word; }
.search-result-desc { margin: var(--s2) 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; }

@media (max-width: 640px) {
	/* The button drops under the field rather than squeezing it: at 320px a
	   side-by-side row leaves the input too narrow to read what you typed. */
	.site-search-row { flex-direction: column; }
}

/* Print: strip nav/footer/CTA chrome so the one-sheet prints on its own. */
@media print {
	.site-header, .site-footer, .breadcrumbs, .quote, .no-print, .skip-link { display: none !important; }
	body { background: #fff; }
	main { padding: 0; }
	.one-sheet-block, .pm-card { box-shadow: none; break-inside: avoid; }
	a { text-decoration: none; color: inherit; }
}

/* 11) MARKETPLACE CTA PANEL --------------------------------------------------
   Replaces the lead form in the bottom-of-page .quote band. The form itself is
   not gone - it still lives on /contact.html - but every generated page now
   sends people to the marketplace instead of into an inbox.

   Its responsive rules live INSIDE this section, not up in section 6. Section 6
   RESPONSIVE sits above sections 7-11 in this file, so a media query added there
   for a class defined down here is overridden by the unqualified rule that
   follows it - dead code that looks correct. Same trap documented in section 10.
   ---------------------------------------------------------------------------- */

.btn-block { display: block; width: 100%; text-align: center; }

.mk-panel {
	background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-xl);
	padding: var(--s6); box-shadow: var(--shadow-md);
}
.mk-panel-title { margin: 0 0 var(--s4); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

.mk-lines { list-style: none; margin: 0; padding: 0; }
.mk-line {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
	padding: 13px 0; border-bottom: 1px solid var(--border);
}
.mk-line:last-child { border-bottom: 0; }
.mk-name { font-weight: 800; color: var(--text-muted); }
/* The one line a visitor can actually buy is the only one at full contrast. The
   rest are legible but plainly secondary - that IS the message of the panel. */
.mk-line-live .mk-name { color: var(--ink); }
.mk-status { font-size: var(--fs-sm); text-align: right; }
.mk-status-live { color: var(--brand-700); font-weight: 700; }
.mk-status-soon { color: var(--text-muted); }

.mk-panel-alt { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--s4) 0 0; }

/* "California only, for now." in the CTA band copy column. Deliberately not
   fine print: it is the scope of what we can sell, and a visitor outside CA
   should hit it before the button, not after eight questions. */
.quote-territory { font-size: var(--fs-sm); color: var(--text-muted); }
.quote-territory strong { color: var(--brand-700); }

/* Footer phone. Present, findable, and not pitched - we are not inviting calls
   while renters is the only self-serve line. See siteGen/lib/layout.js. */
.footer-phone { color: var(--text-muted); }

@media (max-width: 720px) {
	.mk-line { flex-direction: column; align-items: flex-start; gap: 2px; }
	.mk-status { text-align: left; }
}

/* 12) CONNECT / DIGITAL CARD (/connect/) -------------------------------------
   The landing page behind the QR code on the printed business card. Everything
   above the fold is the card itself, restated so a phone can keep it.

   Like sections 8-11, its responsive rules live INSIDE this section. Section 6
   RESPONSIVE sits above this one in the file, so a media query added up there
   for a class defined down here loses to the unqualified rule that follows it -
   dead code that looks correct.
   ---------------------------------------------------------------------------- */

.vcard-hero { background: linear-gradient(180deg, var(--brand-50), #fff 78%); padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); }
.vcard-hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s7); align-items: center; }

.vcard-panel {
	background: var(--n-0); border: 1px solid var(--border); border-radius: var(--r-xl);
	padding: var(--s6); box-shadow: var(--shadow-md);
}
.vcard-name { font-size: var(--fs-h1); margin: 0; }
.vcard-role { font-weight: 800; color: var(--brand-700); margin: var(--s2) 0 var(--s4); }
.vcard-panel .lede { max-width: 52ch; }

/* Label / value pairs. A definition list would be more semantic, but dl inside
   a grid fights every browser default, and these are contact facts rather than
   term definitions. */
.vcard-rows { margin: var(--s5) 0 0; border-top: 1px solid var(--border); }
.vcard-row { display: grid; grid-template-columns: 92px 1fr; gap: var(--s4); padding: 11px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.vcard-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.vcard-value { color: var(--text); overflow-wrap: anywhere; }
.vcard-value a { color: var(--brand-700); font-weight: 700; }

.vcard-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* The broker's headshot, reusing .expert-figure from the home page band so
   the scanned page shows the same face, framed the same way. */
.vcard-figure { justify-self: center; max-width: 320px; }

@media (max-width: 900px) {
	.vcard-hero .wrap { grid-template-columns: 1fr; }
	/* Headshot above the card on a phone: the face is what confirms the
	   scanned page belongs to the person who handed over the card. */
	.vcard-figure { order: -1; max-width: 240px; margin: 0 auto; }
}
@media (max-width: 560px) {
	.vcard-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
	.vcard-actions .btn { flex: 1 1 100%; text-align: center; }
}