/*
* Homeground — real-estate demo Village shopfront styles.
*
* Task 1.7. Sits on top of welcome.css (imports the --vc-color-* palette,
* theme-aware for [data-theme="dark"]) — this file only adds the
* Homeground-specific blocks: demo banner, hero/thesis/steps, listing grid,
* listing detail (floor-plan-first), share + QR, feedback widget wrapper.
* No Tailwind, no external CDNs — self-hosted fonts only.
*/
/* ============================================
BRAND FONT — IBM Plex Serif (self-hosted, SIL OFL)
Declared here because the Homeground pages don't load
shopfront-article.css (which carries the same @font-face).
============================================ */
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-serif/IBMPlexSerif-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex-serif/IBMPlexSerif-Bold.woff2') format('woff2'); }
/* ============================================
PERSISTENT BRAND NAVBAR — every Homeground page
Petrol bar, white Hearth-Arch mark top-left, links home.
============================================ */
.hg-nav { position: sticky; top: 0; z-index: 1001; display: flex; align-items: center; background: #0B3340; padding: 0.5rem 1.25rem; min-height: 52px; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
/* Homeground: the language top-bar (.sf-topbar, sticky z1000 in welcome.css) was covering the sticky nav when scrolled,
leaving no usable nav at the foot of long pages. On homeground let the dark nav be the sole sticky top bar. */
.sf-topbar { position: static; }
/* Back-to-top floater — appears after scrolling; one tap returns to the top of any long page. */
.hg-to-top {
position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
width: 2.85rem; height: 2.85rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: #0B3340; color: #ffffff; border: none; cursor: pointer;
box-shadow: 0 3px 14px rgba(0,0,0,0.30); font-size: 1.25rem; line-height: 1;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.hg-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.hg-to-top:hover { background: #124A56; }
.hg-to-top:focus-visible { outline: 2px solid #7FB4B9; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hg-to-top { transition: none; } }
/* Copy-to-clipboard button (e.g. the agent RFP template) */
.hg-copy-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0.4rem 0.85rem; background: #0B3340; color: #ffffff; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.hg-copy-btn:hover { background: #124A56; }
.hg-copy-btn:focus-visible { outline: 2px solid #7FB4B9; outline-offset: 2px; }
.hg-nav-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #ffffff; line-height: 1; }
.hg-nav-brand:hover { opacity: 0.9; }
.hg-nav-brand:focus-visible { outline: 2px solid #7FB4B9; outline-offset: 3px; border-radius: 4px; }
.hg-arch-mark { width: auto; display: block; color: currentColor; flex: none; }
.hg-brand-word { font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; font-weight: 700; text-transform: lowercase; letter-spacing: 0.005em; color: currentColor; }
.hg-nav .hg-arch-mark { height: 1.7rem; }
.hg-nav .hg-brand-word { font-size: 1.3rem; }
/* ============================================
PERSISTENT DEMO BANNER — every page
============================================ */
.hg-demo-banner {
background: var(--vc-color-warning-soft);
border-bottom: 3px solid var(--vc-color-warning);
color: var(--vc-color-text);
padding: 0.75rem 1.25rem;
text-align: center;
font-size: 0.9rem;
line-height: 1.5;
}
.hg-demo-banner strong { color: var(--vc-color-warning); }
/* ============================================
HERO
============================================ */
.hg-hero {
/* Clean, on-brand deep-teal hero — cohesive with the brand mark + the dusk diagram */
background: radial-gradient(135% 125% at 22% -12%, #14586A 0%, #0B3340 56%, #08252F 100%);
color: var(--vc-color-text-inverse);
padding: 4.5rem 1.5rem 3.25rem;
text-align: center;
}
.hg-hero-content { max-width: 780px; margin: 0 auto; text-shadow: 0 1px 4px rgba(0,0,0,0.38); }
.hg-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); margin: 0 0 0.4rem; letter-spacing: -0.01em; color: var(--vc-color-text-inverse); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hg-hero-tagline { font-size: clamp(1.15rem, 0.9rem + 1vw, 1.65rem); font-weight: 600; line-height: 1.35; margin: 0 0 0.9rem; color: var(--vc-color-text-inverse); }
.hg-hero .hg-sub { font-size: 1.05rem; opacity: 0.95; line-height: 1.6; margin: 0 0 1.5rem; }
/* Hero brand lockup (landing) — the Hearth-Arch mark, white over the scrim */
.hg-hero-brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0 0 0.5rem; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); color: var(--vc-color-text-inverse); }
.hg-hero-brand .hg-arch-mark { height: 1.02em; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.hg-hero-brand .hg-brand-word { font-size: 1em; letter-spacing: -0.01em; color: var(--vc-color-text-inverse); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
/* Trade Me contrast band */
.hg-contrast { max-width: 820px; margin: 0 auto; padding: 2.25rem 1.5rem 0.5rem; text-align: center; }
.hg-contrast-lede { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.4; margin: 0 0 0.75rem; }
.hg-contrast-body { font-size: 1rem; line-height: 1.65; color: var(--vc-color-text-subtle); margin: 0; }
.hg-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.hg-hero-actions .btn { min-width: 10rem; font-weight: 600; }
/* One clear gold CTA; the rest are white ghost buttons — consistent hierarchy on the teal hero */
.hg-hero .hg-hero-actions .btn-primary { background: #F2C14E; color: #0B3340; border: 1.5px solid #F2C14E; }
.hg-hero .hg-hero-actions .btn-primary:hover { background: #E9B43A; border-color: #E9B43A; color: #0B3340; }
.hg-hero .hg-hero-actions .hg-btn-register, .hg-hero .hg-hero-actions .btn-secondary { background: transparent; color: #ffffff; border: 1.5px solid rgba(255,255,255,0.6); }
.hg-hero .hg-hero-actions .hg-btn-register:hover, .hg-hero .hg-hero-actions .btn-secondary:hover { background: rgba(255,255,255,0.14); border-color: #ffffff; color: #ffffff; }
/* On narrow screens stack the CTAs at a single uniform width — no ragged column */
@media (max-width: 560px) {
.hg-hero-actions { flex-direction: column; align-items: center; }
.hg-hero-actions .btn { width: 100%; max-width: 20rem; }
}
/* In-page anchor jumps (e.g. hero "Register your interest" → #register) glide
rather than snap; disabled for reduced-motion users. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Land the target section below the sticky navbar so its heading isn't hidden. */
#register, #feedback, #listings { scroll-margin-top: 4.25rem; }
/* ============================================
SHARE BAR — copy-link + native share + QR trigger
============================================ */
.hg-share-bar {
display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
margin-top: 1.5rem;
}
.hg-share-btn {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.35);
color: var(--vc-color-text-inverse);
padding: 0.5rem 1rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.hg-share-btn:hover { background: rgba(255,255,255,0.24); }
.hg-share-status {
font-size: 0.8rem;
color: var(--vc-color-text-inverse);
opacity: 0.9;
margin-top: 0.4rem;
min-height: 1.2em;
}
/* Footer variant (dark text on light background) */
.hg-share-bar.hg-share-bar-light .hg-share-btn {
background: var(--vc-color-surface);
border-color: var(--vc-color-border-strong);
color: var(--vc-color-primary-strong);
}
.hg-share-bar.hg-share-bar-light .hg-share-btn:hover { background: var(--vc-color-surface-muted); }
.hg-share-bar.hg-share-bar-light + .hg-share-status { color: var(--vc-color-text-muted); }
/* ============================================
QR / SHARE SECTION
============================================ */
.hg-qr-section {
background: var(--vc-color-surface);
border: 1px solid var(--vc-color-border-subtle);
border-radius: 0.75rem;
padding: 1.5rem;
max-width: 900px;
margin: 2rem auto;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.hg-qr-section img {
width: 140px; height: 140px;
background: #fff;
border-radius: 0.5rem;
border: 1px solid var(--vc-color-border-subtle);
flex-shrink: 0;
}
.hg-qr-section-text { flex: 1; min-width: 220px; }
.hg-qr-section-text h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--vc-color-heading); }
.hg-qr-section-text p { margin: 0 0 0.75rem; color: var(--vc-color-text-soft); line-height: 1.55; font-size: 0.95rem; }
.hg-qr-url {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.82rem;
color: var(--vc-color-text-muted);
word-break: break-all;
}
/* ============================================
THESIS / HOW-SELLING-WORKS SECTIONS
============================================ */
.hg-section { padding: 2.5rem 1.5rem; max-width: 1000px; margin: 0 auto; }
.hg-section h2 { text-align: center; font-size: 1.5rem; color: var(--vc-color-heading); margin: 0 0 1.75rem; }
.hg-thesis-grid, .hg-steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
.hg-thesis-card, .hg-step-card {
background: var(--vc-color-surface);
border: 1px solid var(--vc-color-border-subtle);
border-radius: 0.75rem;
padding: 1.4rem;
}
.hg-thesis-card h3, .hg-step-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--vc-color-heading); }
.hg-thesis-card p, .hg-step-card p { margin: 0; color: var(--vc-color-text-soft); line-height: 1.6; font-size: 0.95rem; }
.hg-note {
background: var(--vc-color-info-soft);
border-left: 4px solid var(--vc-color-info);
border-radius: 0 0.5rem 0.5rem 0;
padding: 1rem 1.25rem;
margin-top: 1.5rem;
font-size: 0.92rem;
color: var(--vc-color-text-soft);
line-height: 1.6;
}
.hg-register-intro {
text-align: center;
color: var(--vc-color-text-soft);
line-height: 1.6;
max-width: 700px;
margin: 0 auto 1.75rem;
}
#register .hg-thesis-card { display: flex; flex-direction: column; }
#register .hg-thesis-card p { flex: 1; }
#register .hg-register-cta { margin-top: 1rem; align-self: flex-start; }
.hg-pricing-note {
background: var(--vc-color-surface-muted);
border: 1px dashed var(--vc-color-border-strong);
border-radius: 0.6rem;
padding: 1.1rem 1.4rem;
font-size: 0.9rem;
color: var(--vc-color-text-muted);
line-height: 1.6;
max-width: 800px;
margin: 1.5rem auto 0;
}
/* ============================================
LISTINGS GRID
============================================ */
.hg-listings-section { background: var(--vc-color-bg-alt); padding: 2.5rem 1.5rem; }
/* "See the whole process" — prominent selling/buying walkthrough buttons */
.hg-process-cta { text-align: center; margin: -0.25rem auto 1.75rem; max-width: 760px; }
.hg-process-cta-label { display: block; font-weight: 600; font-size: 1.05rem; color: var(--vc-color-text); margin-bottom: 0.85rem; }
.hg-process-cta-btns { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.hg-process-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; line-height: 1; padding: 0.85rem 1.6rem; border-radius: 10px; text-decoration: none; background: #0B3340; color: #ffffff; border: 2px solid #0B3340; box-shadow: 0 2px 8px rgba(11,51,64,0.18); transition: background 0.15s ease, transform 0.15s ease; }
.hg-process-btn:hover { background: #0E5563; border-color: #0E5563; transform: translateY(-1px); }
.hg-process-btn:focus-visible { outline: 2px solid #7FB4B9; outline-offset: 3px; }
@media (max-width: 560px) { .hg-process-btn { width: 100%; max-width: 22rem; justify-content: center; } }
.hg-listings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.hg-listing-card {
background: var(--vc-color-surface);
border: 1px solid var(--vc-color-border-subtle);
border-radius: 0.75rem;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.1s, border-color 0.2s;
}
.hg-listing-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: var(--vc-color-primary); }
.hg-listing-card:focus-visible { outline: 3px solid var(--vc-color-accent); outline-offset: 2px; }
.hg-listing-media { position: relative; aspect-ratio: 4 / 3; background: var(--vc-color-surface-muted); }
.hg-listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-listing-media-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
color: var(--vc-color-text-subtle);
background: linear-gradient(135deg, var(--vc-color-surface-muted), var(--vc-color-bg-alt));
}
.hg-listing-media-placeholder-icon { font-size: 2.4rem; opacity: 0.75; line-height: 1; }
.hg-listing-media-placeholder-type { font-size: 0.8rem; text-transform: capitalize; letter-spacing: 0.02em; }
.hg-listing-price-badge {
position: absolute; bottom: 0.6rem; left: 0.6rem;
background: rgba(11,51,64,0.88);
color: #fff;
padding: 0.3rem 0.7rem;
border-radius: 0.4rem;
font-weight: 700;
font-size: 0.85rem;
}
.hg-listing-method-badge {
position: absolute; top: 0.6rem; right: 0.6rem;
background: var(--vc-color-accent);
color: #fff;
padding: 0.2rem 0.55rem;
border-radius: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hg-listing-body { padding: 1rem 1.15rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.hg-listing-suburb { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vc-color-primary); margin-bottom: 0.3rem; }
.hg-listing-headline { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--vc-color-heading); line-height: 1.35; }
.hg-listing-meta { display: flex; gap: 0.9rem; font-size: 0.85rem; color: var(--vc-color-text-muted); margin-top: auto; padding-top: 0.6rem; }
.hg-listing-meta span { display: inline-flex; align-items: center; gap: 0.25rem; }
.hg-listing-agent { font-size: 0.78rem; color: var(--vc-color-text-subtle); margin-top: 0.5rem; }
.hg-empty-state, .hg-error-state {
text-align: center; padding: 3rem 1.5rem; color: var(--vc-color-text-muted);
grid-column: 1 / -1;
}
/* ============================================
FEEDBACK SECTION (register-interest widget)
============================================ */
.hg-feedback-section {
max-width: 640px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
}
.hg-feedback-section h2 { text-align: center; color: var(--vc-color-heading); margin: 0 0 0.5rem; font-size: 1.4rem; }
.hg-feedback-section > p { text-align: center; color: var(--vc-color-text-soft); margin: 0 0 1.5rem; line-height: 1.6; }
#register-interest-form { display: flex; flex-direction: column; gap: 0.9rem; }
#register-interest-form label { font-size: 0.85rem; font-weight: 600; color: var(--vc-color-text-soft); display: flex; flex-direction: column; gap: 0.35rem; }
#register-interest-form input,
#register-interest-form select,
#register-interest-form textarea {
padding: 0.65rem 0.85rem;
border: 1px solid var(--vc-color-border-strong);
border-radius: 0.5rem;
background: var(--vc-color-surface);
color: var(--vc-color-text);
font-size: 0.95rem;
font-family: inherit;
}
#register-interest-form textarea { min-height: 6rem; resize: vertical; }
#register-interest-submit {
align-self: flex-start;
}
#register-interest-error {
background: var(--vc-color-danger-soft);
border: 1px solid var(--vc-color-danger);
color: var(--vc-color-danger);
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
}
#register-interest-ack {
background: var(--vc-color-success-soft);
border: 1px solid var(--vc-color-success);
color: var(--vc-color-success);
padding: 1rem 1.25rem;
border-radius: 0.5rem;
text-align: center;
}
/* ============================================
LISTING DETAIL PAGE
============================================ */
.hg-detail-header {
background: linear-gradient(130deg,
var(--vc-color-hero-gradient-from),
var(--vc-color-hero-gradient-via),
var(--vc-color-hero-gradient-to));
color: var(--vc-color-text-inverse);
padding: 2rem 1.5rem;
}
.hg-detail-header-content { max-width: 900px; margin: 0 auto; }
.hg-detail-back {
display: inline-flex; align-items: center; gap: 0.375rem;
color: #fff; text-decoration: none; font-size: 0.875rem; font-weight: 500;
margin-bottom: 0.75rem;
}
.hg-detail-back:hover { text-decoration: underline; }
.hg-detail-suburb { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; margin-bottom: 0.3rem; }
.hg-detail-headline { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.hg-detail-price { font-size: 1.15rem; font-weight: 700; }
.hg-detail-price small { display: block; font-weight: 400; font-size: 0.75rem; opacity: 0.85; }
.hg-detail-body { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.hg-detail-floorplan {
background: var(--vc-color-surface);
border: 1px solid var(--vc-color-border-subtle);
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1.75rem;
text-align: center;
}
.hg-detail-floorplan img { max-width: 100%; height: auto; border-radius: 0.4rem; }
.hg-detail-floorplan h2 { font-size: 1rem; color: var(--vc-color-heading); margin: 0 0 0.75rem; }
.hg-detail-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; margin-bottom: 1.75rem; }
.hg-detail-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.5rem; border: 1px solid var(--vc-color-border-subtle); }
.hg-detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; margin-bottom: 1.75rem; }
.hg-detail-fact { background: var(--vc-color-surface); border: 1px solid var(--vc-color-border-subtle); border-radius: 0.6rem; padding: 0.85rem 1rem; text-align: center; }
.hg-detail-fact .hg-fact-value { font-size: 1.2rem; font-weight: 700; color: var(--vc-color-heading); display: block; }
.hg-detail-fact .hg-fact-label { font-size: 0.75rem; color: var(--vc-color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hg-detail-section { margin-bottom: 1.75rem; }
.hg-detail-section h2 { font-size: 1.05rem; color: var(--vc-color-heading); margin: 0 0 0.6rem; }
.hg-detail-section p { color: var(--vc-color-text-soft); line-height: 1.65; margin: 0 0 0.5rem; }
.hg-disclosure-box {
background: var(--vc-color-surface-muted);
border: 1px solid var(--vc-color-border-strong);
border-radius: 0.6rem;
padding: 1rem 1.25rem;
}
.hg-disclosure-box dl { margin: 0; }
.hg-disclosure-box dt { font-weight: 700; font-size: 0.82rem; color: var(--vc-color-text); margin-top: 0.6rem; }
.hg-disclosure-box dt:first-child { margin-top: 0; }
.hg-disclosure-box dd { margin: 0.15rem 0 0; color: var(--vc-color-text-soft); font-size: 0.9rem; line-height: 1.55; }
/* Approximate location — self-hosted stylised pin, never a third-party map */
.hg-map-approx {
background: var(--vc-color-surface-muted);
border: 1px dashed var(--vc-color-border-strong);
border-radius: 0.6rem;
padding: 1.5rem;
text-align: center;
color: var(--vc-color-text-soft);
}
.hg-map-pin-svg { margin-bottom: 0.5rem; }
.hg-map-coords { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; color: var(--vc-color-text-muted); }
.hg-map-caption { font-size: 0.82rem; margin-top: 0.4rem; }
.hg-agent-box {
background: var(--vc-color-surface);
border: 1px solid var(--vc-color-border-subtle);
border-radius: 0.6rem;
padding: 1rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.hg-agent-box .hg-agent-name { font-weight: 700; color: var(--vc-color-heading); }
.hg-agent-box .hg-agent-agency { color: var(--vc-color-text-muted); font-size: 0.88rem; }
[data-theme="dark"] .hg-listing-price-badge { background: rgba(15,23,42,0.9); }
/* ── Pricing page ─────────────────────────────────────────────── */
.hg-pricing-header { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem 0.5rem; text-align: center; }
.hg-back-link { display: inline-block; margin-bottom: 1rem; font-weight: 600; color: var(--vc-color-primary); text-decoration: none; }
.hg-back-link:hover { text-decoration: underline; }
.hg-pricing-header h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); margin: 0 0 0.6rem; }
.hg-pricing-header .hg-sub { font-size: 1.05rem; line-height: 1.6; color: var(--vc-color-text-subtle); margin: 0; }
.hg-section-intro { max-width: 720px; margin: 0 auto 1.25rem; text-align: center; line-height: 1.65; color: var(--vc-color-text-subtle); }
.hg-price-lead { max-width: 720px; margin: 0 auto; font-size: 1.08rem; line-height: 1.7; }
.hg-price-lead p { margin: 0; }
.hg-worked-example { max-width: 720px; margin: 1.75rem auto 0; padding: 1.5rem; border: 1px solid var(--vc-color-border); border-radius: 12px; background: var(--vc-color-surface); }
.hg-worked-example h3 { margin: 0 0 1rem; text-align: center; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--vc-color-text-subtle); }
.hg-worked-grid { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hg-worked-col { flex: 1 1 240px; text-align: center; padding: 1rem; border-radius: 10px; background: var(--vc-color-surface-muted); }
.hg-worked-col-us { background: linear-gradient(135deg, rgba(11,51,64,0.10), rgba(55,48,163,0.10)); border: 1px solid var(--vc-color-primary); }
.hg-worked-label { font-size: 0.85rem; color: var(--vc-color-text-subtle); margin-bottom: 0.35rem; }
.hg-worked-figure { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; line-height: 1.1; }
.hg-worked-note { font-size: 0.82rem; color: var(--vc-color-text-subtle); margin-top: 0.35rem; }
.hg-worked-vs { align-self: center; font-weight: 700; color: var(--vc-color-text-subtle); }
.hg-worked-caveat { margin: 1.25rem 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--vc-color-text-subtle); text-align: center; }
.hg-table-scroll { overflow-x: auto; max-width: 920px; margin: 0 auto; }
.hg-spectrum-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.hg-spectrum-table th, .hg-spectrum-table td { padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--vc-color-border); font-size: 0.92rem; line-height: 1.45; vertical-align: top; }
.hg-spectrum-table thead th { background: var(--vc-color-surface-muted); font-weight: 700; }
.hg-spectrum-table tbody th[scope="row"] { font-weight: 700; color: var(--vc-color-text); white-space: nowrap; }
.hg-td-span { background: rgba(11,51,64,0.04); }
.hg-spectrum-pay td, .hg-spectrum-pay th { border-top: 2px solid var(--vc-color-primary); font-weight: 600; }
.hg-note-box { max-width: 720px; margin: 1.25rem auto 0; padding: 1.25rem 1.5rem; border-left: 4px solid var(--vc-color-primary); border-radius: 8px; background: var(--vc-color-surface-muted); }
.hg-note-box p { margin: 0; line-height: 1.7; }
.hg-faq { max-width: 720px; margin: 0 auto; }
.hg-faq-item { padding: 1.1rem 0; border-bottom: 1px solid var(--vc-color-border); }
.hg-faq-item h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.hg-faq-item p { margin: 0; line-height: 1.65; color: var(--vc-color-text-subtle); }
/* ── How-it-works stepper ─────────────────────────────────────── */
.hg-hiw-header { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem 0.5rem; text-align: center; }
.hg-hiw-header h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); margin: 0 0 0.6rem; }
.hg-hiw-header .hg-sub { font-size: 1.05rem; line-height: 1.6; color: var(--vc-color-text-subtle); margin: 0; }
.hg-hiw-steps {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
max-width: 720px;
margin: 0 auto 1.75rem;
}
.hg-hiw-dot {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 2px solid var(--vc-color-border);
background: var(--vc-color-surface);
color: var(--vc-color-text-subtle);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.hg-hiw-dot:hover { border-color: var(--vc-color-primary); }
.hg-hiw-dot.is-done { background: var(--vc-color-surface-muted); border-color: var(--vc-color-primary); color: var(--vc-color-primary); }
.hg-hiw-dot.is-active { background: var(--vc-color-primary); border-color: var(--vc-color-primary); color: #fff; }
.hg-hiw-card {
max-width: 720px;
margin: 0 auto;
padding: 1.75rem;
border: 1px solid var(--vc-color-border);
border-radius: 12px;
background: var(--vc-color-surface);
}
.hg-hiw-card-head { text-align: center; margin-bottom: 1rem; }
.hg-hiw-step-count { display: block; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vc-color-text-muted); margin-bottom: 0.4rem; }
.hg-hiw-card-title { margin: 0 0 0.6rem; font-size: 1.35rem; color: var(--vc-color-heading); }
.hg-hiw-tag {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 999px;
background: var(--vc-color-surface-muted);
border: 1px solid var(--vc-color-border);
color: var(--vc-color-primary);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.hg-hiw-body { line-height: 1.7; color: var(--vc-color-text-soft); margin: 1.1rem 0 1.5rem; }
.hg-hiw-visual { margin: 0 0 1.5rem; }
/* Chip visual (address / LIM / lawyer / choose / settle) */
.hg-hiw-chip {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.25rem;
border-radius: 10px;
background: var(--vc-color-surface-muted);
border: 1px solid var(--vc-color-border-subtle);
}
.hg-hiw-chip-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.hg-hiw-chip-text { display: flex; flex-direction: column; gap: 0.2rem; }
.hg-hiw-chip-text strong { color: var(--vc-color-heading); font-size: 0.98rem; }
.hg-hiw-chip-sub { font-size: 0.85rem; color: var(--vc-color-text-subtle); }
.hg-hiw-chip-check { position: relative; }
.hg-hiw-check {
margin-left: auto;
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: var(--vc-color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 700;
}
/* Firewall split visual */
.hg-hiw-split {
display: flex;
align-items: stretch;
gap: 1rem;
flex-wrap: wrap;
}
.hg-hiw-split-col {
flex: 1 1 200px;
padding: 1rem 1.1rem;
border-radius: 10px;
background: var(--vc-color-surface-muted);
}
.hg-hiw-split-col h3 { margin: 0 0 0.6rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--vc-color-text-subtle); }
.hg-hiw-split-col ul { margin: 0; padding-left: 1.1rem; }
.hg-hiw-split-col li { font-size: 0.92rem; color: var(--vc-color-text-soft); line-height: 1.7; }
.hg-hiw-split-private {
background: linear-gradient(135deg, rgba(11,51,64,0.08), rgba(55,48,163,0.08));
border: 1px solid var(--vc-color-primary);
}
.hg-hiw-split-divider { align-self: center; font-size: 1.4rem; }
/* Offer register visual */
.hg-hiw-register {
border-radius: 10px;
background: var(--vc-color-surface-muted);
border: 1px solid var(--vc-color-border-subtle);
padding: 0.5rem 1.1rem;
}
.hg-hiw-register-row {
display: flex;
gap: 0.9rem;
align-items: baseline;
padding: 0.65rem 0;
border-bottom: 1px dashed var(--vc-color-border);
}
.hg-hiw-register-row:last-of-type { border-bottom: none; }
.hg-hiw-register-time {
flex-shrink: 0;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.82rem;
color: var(--vc-color-primary);
font-weight: 700;
min-width: 5.5rem;
}
.hg-hiw-register-desc { font-size: 0.9rem; color: var(--vc-color-text-soft); }
.hg-hiw-register-lock { margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--vc-color-border-subtle); font-size: 0.8rem; color: var(--vc-color-text-muted); }
.hg-hiw-nav {
display: flex;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.hg-hiw-nav .btn:only-child { margin-left: auto; }
.hg-hiw-closing {
max-width: 720px;
margin: 2rem auto 0;
text-align: center;
}
.hg-hiw-closing-note { font-size: 0.9rem; color: var(--vc-color-text-muted); margin: 0 0 1.25rem; }
@media (max-width: 560px) {
.hg-hiw-card { padding: 1.25rem; }
.hg-hiw-dot { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
.hg-hiw-split { flex-direction: column; }
.hg-hiw-split-divider { display: none; }
.hg-hiw-nav { flex-direction: column-reverse; }
.hg-hiw-nav .btn { width: 100%; }
}
/* ── Protection pillar closer ─────────────────────────────────── */
.hg-protection-closer {
text-align: center;
font-size: 1rem;
font-style: italic;
color: var(--vc-color-text-muted);
max-width: 640px;
margin: 1.5rem auto 0;
}
/* ── How-selling-works cards as links ─────────────────────────── */
a.hg-step-card {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s, transform 0.1s, border-color 0.2s;
}
a.hg-step-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: var(--vc-color-primary); }
a.hg-step-card:focus-visible { outline: 3px solid var(--vc-color-accent); outline-offset: 2px; }
.hg-step-more {
margin-top: 0.9rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--vc-color-primary);
}
/* ── Drill-down pages (list-yourself / agents-compete / sell-privately) ── */
.hg-drill-header { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem 0.5rem; }
.hg-drill-header h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); margin: 0 0 0.6rem; color: var(--vc-color-heading); }
.hg-drill-header .hg-sub { font-size: 1.08rem; line-height: 1.7; color: var(--vc-color-text-subtle); margin: 0; }
.hg-drill-body { max-width: 720px; margin: 0 auto; }
.hg-drill-block { padding: 1.3rem 0; border-bottom: 1px solid var(--vc-color-border); }
.hg-drill-block:last-child { border-bottom: none; }
.hg-drill-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
color: var(--vc-color-primary);
margin: 0 0 0.5rem;
}
.hg-drill-block p { margin: 0; line-height: 1.7; font-size: 1rem; color: var(--vc-color-text-soft); }
.hg-drill-notfor {
max-width: 720px;
margin: 1.5rem auto 0;
padding: 1.1rem 1.4rem;
border-left: 4px solid var(--vc-color-primary);
border-radius: 8px;
background: var(--vc-color-surface-muted);
}
.hg-drill-notfor p { margin: 0; line-height: 1.7; color: var(--vc-color-text-soft); }
.hg-drill-notfor a { color: var(--vc-color-primary); }
.hg-drill-cta { max-width: 720px; margin: 1.75rem auto 0; text-align: center; }
.hg-drill-choose { max-width: 900px; margin: 0 auto; }
.hg-drill-choose h2 { font-size: 1.2rem; }
.hg-drill-choose-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
a.hg-drill-choose-card {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s, transform 0.1s, border-color 0.2s;
}
a.hg-drill-choose-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.1); transform: translateY(-2px); border-color: var(--vc-color-primary); }
a.hg-drill-choose-card:focus-visible { outline: 3px solid var(--vc-color-accent); outline-offset: 2px; }
/* ============================================
BUYER DEMAND BOARD + BUYER BRIEF (§6b — buyers dimension)
============================================ */
.hg-drill-cta .btn { margin: 0.3rem; }
/* At-a-glance stat tiles */
.hg-demand-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0 0 1.25rem; }
.hg-demand-stat { background: var(--vc-color-surface); border: 1px solid var(--vc-color-border-subtle); border-radius: 12px; padding: 1.25rem 1rem; text-align: center; }
.hg-demand-num { display: block; font-size: 2rem; font-weight: 800; color: var(--vc-color-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hg-demand-cap { display: block; font-size: 0.82rem; color: var(--vc-color-text-soft); margin-top: 0.25rem; }
.hg-demand-mostwanted { text-align: center; font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--vc-color-heading); }
.hg-demand-fineprint { font-size: 0.85rem; color: var(--vc-color-text-soft); line-height: 1.6; max-width: 70ch; margin: 0.5rem auto 0; text-align: center; }
@media (max-width: 640px) { .hg-demand-stats { grid-template-columns: repeat(2, 1fr); } }
/* Anonymised demand cards */
.hg-demand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.hg-demand-card { background: var(--vc-color-surface); border: 1px solid var(--vc-color-border-subtle); border-radius: 12px; padding: 1.1rem 1.2rem; }
.hg-demand-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.hg-demand-type { font-weight: 700; color: var(--vc-color-heading); font-size: 0.98rem; }
.hg-demand-where { color: var(--vc-color-text); font-size: 0.9rem; }
.hg-demand-band { color: var(--vc-color-text-soft); font-size: 0.86rem; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
/* Seriousness-tier pills — teal ramp encodes how ready the buyer is */
.hg-tier { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.hg-tier-0 { background: #E2E8E9; color: #3E4E50; }
.hg-tier-1 { background: #CDE3E5; color: #0B3340; }
.hg-tier-2 { background: #7FB4B9; color: #0B3340; }
.hg-tier-3 { background: #0E6E78; color: #FFFFFF; }
/* Seller-conversion + buyer CTA callouts */
.hg-demand-convert, .hg-demand-buyercta { background: var(--vc-color-surface-muted); border: 1px solid var(--vc-color-border-subtle); border-radius: 14px; }
.hg-demand-convert h2, .hg-demand-buyercta h2 { text-align: center; }
.hg-demand-convert p, .hg-demand-buyercta p { max-width: 70ch; margin-left: auto; margin-right: auto; text-align: center; color: var(--vc-color-text); line-height: 1.65; }
.hg-demand-lim-note { font-size: 0.88rem; color: var(--vc-color-text-soft); font-style: italic; }
/* Tier ladder */
.hg-ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.25rem; }
.hg-ladder-step { background: var(--vc-color-surface); border: 1px solid var(--vc-color-border-subtle); border-radius: 12px; padding: 1.1rem 1rem; }
.hg-ladder-step .hg-tier { margin-bottom: 0.5rem; }
.hg-ladder-step p { margin: 0; color: var(--vc-color-text-soft); font-size: 0.88rem; line-height: 1.55; }
@media (max-width: 760px) { .hg-ladder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .hg-ladder { grid-template-columns: 1fr; } }
/* Landing demand teaser */
.hg-demand-teaser { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; background: var(--vc-color-surface-muted); border: 1px solid var(--vc-color-border-subtle); border-radius: 14px; padding: 1.25rem 1.5rem; margin: 1.25rem auto; max-width: 640px; }
.hg-demand-teaser-stat { text-align: center; }
.hg-demand-teaser-note { font-size: 0.8rem; color: var(--vc-color-text-soft); font-style: italic; flex-basis: 100%; text-align: center; }
/* Buyer brief form */
.hg-brief-wrap { max-width: 720px; }
.hg-brief-form { display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
.hg-brief-field { display: flex; flex-direction: column; gap: 0.4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.hg-brief-label { font-weight: 600; color: var(--vc-color-heading); font-size: 0.95rem; }
.hg-brief-label em, .hg-brief-field legend em { font-weight: 400; color: var(--vc-color-text-soft); font-style: normal; font-size: 0.85rem; }
.hg-brief-form input[type="email"], .hg-brief-form select, .hg-brief-form textarea {
width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--vc-color-border-strong); border-radius: 8px;
background: var(--vc-color-surface); color: var(--vc-color-text); font: inherit; font-size: 0.95rem;
}
.hg-brief-form input:focus-visible, .hg-brief-form select:focus-visible, .hg-brief-form textarea:focus-visible { outline: 2px solid var(--vc-color-primary); outline-offset: 1px; }
.hg-brief-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 640px) { .hg-brief-row { grid-template-columns: 1fr; } }
.hg-brief-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem; }
.hg-brief-checks label, .hg-brief-tiers label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.92rem; color: var(--vc-color-text); font-weight: 400; }
.hg-brief-checks input, .hg-brief-tiers input { margin-top: 0.15rem; flex: none; }
.hg-brief-tiers { display: flex; flex-direction: column; gap: 0.55rem; }
.hg-brief-hint { margin: 0.5rem 0 0; font-size: 0.88rem; }
.hg-brief-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--vc-color-text-soft); line-height: 1.55; background: var(--vc-color-surface-muted); border: 1px solid var(--vc-color-border-subtle); border-radius: 10px; padding: 0.9rem 1rem; }
.hg-brief-consent input { margin-top: 0.2rem; flex: none; }
.hg-brief-consent strong { color: var(--vc-color-text); }
#brief-submit { align-self: flex-start; }
.hg-brief-error { color: #9B1C2E; background: #FDECEE; border: 1px solid #F3B5BD; border-radius: 8px; padding: 0.75rem 1rem; margin-top: 1rem; font-size: 0.92rem; }
.hg-brief-ack { text-align: center; padding: 1.5rem; }
.hg-brief-ack h2 { color: var(--vc-color-primary); }
/* ============================================================
GLOSSARY — /homeground-glossary.html
============================================================ */
.hg-g-top { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem; }
.hg-g-top h1 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--vc-color-primary); margin: 0 0 0.5rem; }
.hg-g-lead { font-size: 1.05rem; line-height: 1.6; color: var(--vc-color-text-soft); margin: 0 0 1rem; }
.hg-g-disclaimer { font-size: 0.9rem; line-height: 1.55; color: var(--vc-color-text-soft); background: var(--vc-color-surface-muted); border-left: 4px solid var(--vc-color-primary); border-radius: 8px; padding: 0.85rem 1.1rem; margin: 0 0 1rem; }
.hg-g-crosslink { margin: 0; font-weight: 600; }
.hg-g-crosslink a, .hg-g-def a { color: var(--vc-color-primary); text-decoration: none; }
.hg-g-crosslink a:hover, .hg-g-def a:hover { text-decoration: underline; }
.hg-g-controls { position: sticky; top: 52px; z-index: 40; max-width: 820px; margin: 0 auto; padding: 0.75rem 1.25rem; background: var(--vc-color-surface); border-bottom: 1px solid var(--vc-color-border-subtle); }
.hg-g-searchrow { display: flex; align-items: center; gap: 0.75rem; }
.hg-g-searchrow input { flex: 1; padding: 0.6rem 0.9rem; font-size: 1rem; border: 1.5px solid var(--vc-color-border); border-radius: 10px; background: var(--vc-color-surface); color: var(--vc-color-text); }
.hg-g-searchrow input:focus { outline: 2px solid var(--vc-color-primary); outline-offset: 1px; border-color: var(--vc-color-primary); }
#hg-g-count { font-size: 0.85rem; color: var(--vc-color-text-muted); white-space: nowrap; }
.hg-g-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.hg-g-chip { font-size: 0.8rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--vc-color-border); background: var(--vc-color-surface); color: var(--vc-color-text-soft); cursor: pointer; }
.hg-g-chip:hover { border-color: var(--vc-color-primary); }
.hg-g-chip.on { background: var(--vc-color-primary); border-color: var(--vc-color-primary); color: #fff; }
.hg-g-az { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-top: 0.6rem; }
.hg-g-az a { font-size: 0.78rem; font-weight: 600; width: 1.5rem; text-align: center; padding: 0.15rem 0; color: var(--vc-color-primary); text-decoration: none; border-radius: 4px; }
.hg-g-az a:hover { background: var(--vc-color-surface-muted); }
.hg-g-az a.off { color: var(--vc-color-border); pointer-events: none; }
.hg-g-list { max-width: 820px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.hg-g-letter { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 1.4rem; color: var(--vc-color-primary); border-bottom: 2px solid var(--vc-color-border-subtle); padding-bottom: 0.2rem; margin: 1.5rem 0 0.75rem; }
.hg-g-card { padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--vc-color-border-subtle); scroll-margin-top: 160px; }
.hg-g-term { font-size: 1.1rem; margin: 0 0 0.2rem; color: var(--vc-color-text); }
.hg-g-cat { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vc-color-primary); margin-bottom: 0.4rem; }
.hg-g-def { margin: 0.2rem 0 0; line-height: 1.6; color: var(--vc-color-text-soft); }
.hg-g-who { margin: 0.55rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--vc-color-text-soft); background: var(--vc-color-surface-muted); border-radius: 8px; padding: 0.55rem 0.8rem; }
.hg-g-who strong { color: var(--vc-color-primary); }
.hg-g-empty { color: var(--vc-color-text-muted); padding: 2rem 0; text-align: center; }
.hg-g-card.hg-g-flash { animation: hg-g-flash 1.6s ease; }
@keyframes hg-g-flash { 0%, 100% { background: transparent; } 25% { background: var(--vc-color-surface-muted); } }
/* ============================================================
CHECKLISTS — /homeground-checklist.html
============================================================ */
.hg-cl { max-width: 780px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.hg-cl-top { padding: 2.5rem 0 1rem; }
.hg-cl-top h1 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--vc-color-primary); margin: 0 0 0.5rem; }
.hg-cl-lead { font-size: 1.05rem; line-height: 1.6; color: var(--vc-color-text-soft); margin: 0 0 1rem; }
.hg-cl-choose h2, .hg-cl-list-wrap h2 { font-family: 'IBM Plex Serif', Georgia, serif; color: var(--vc-color-text); font-size: 1.4rem; margin: 1.5rem 0 1rem; }
.hg-cl-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hg-cl-role-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; border: 1.5px solid var(--vc-color-border); border-radius: 14px; background: var(--vc-color-surface); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.hg-cl-role-btn:hover { border-color: var(--vc-color-primary); transform: translateY(-2px); }
.hg-cl-role-icon { font-size: 2rem; }
.hg-cl-role-label { font-size: 1.1rem; font-weight: 600; color: var(--vc-color-text); }
.hg-cl-path-grid { display: flex; flex-direction: column; gap: 0.75rem; }
/* Selection cards are buttons, not content panels — a persistent arrow + real hover
motion so visitors know to click them to open the checklist (fix 2026-07-07). */
.hg-cl-path-btn { position: relative; text-align: left; padding: 1.1rem 2.9rem 1.1rem 1.25rem; border: 1.5px solid var(--vc-color-border); border-radius: 12px; background: var(--vc-color-surface); cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.hg-cl-path-btn::after { content: "→"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; line-height: 1; color: var(--vc-color-primary); transition: transform 0.15s ease; }
.hg-cl-path-btn:hover { border-color: var(--vc-color-primary); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(11,51,64,0.10); }
.hg-cl-path-btn:hover::after { transform: translateY(-50%) translateX(4px); }
.hg-cl-path-btn:focus-visible { outline: 2px solid var(--vc-color-primary); outline-offset: 2px; }
/* Small "tap to…" cue under each selection question. */
.hg-cl-hint { font-size: 0.9rem; color: var(--vc-color-text-muted); margin: -0.5rem 0 1rem; }
.hg-cl-path-label { display: block; font-size: 1.05rem; font-weight: 600; color: var(--vc-color-primary); margin-bottom: 0.25rem; }
.hg-cl-path-intro { display: block; font-size: 0.9rem; line-height: 1.5; color: var(--vc-color-text-soft); }
.hg-cl-back { background: none; border: none; color: var(--vc-color-primary); font-weight: 600; cursor: pointer; padding: 0.5rem 0; font-size: 0.92rem; }
.hg-cl-back:hover { text-decoration: underline; }
.hg-cl-intro { font-size: 1rem; line-height: 1.6; color: var(--vc-color-text-soft); margin: 0 0 1.25rem; }
.hg-cl-progress { height: 8px; background: var(--vc-color-surface-muted); border-radius: 999px; overflow: hidden; }
.hg-cl-progress-bar { height: 100%; background: var(--vc-color-primary); border-radius: 999px; transition: width 0.25s ease; }
.hg-cl-progress-text { font-size: 0.85rem; color: var(--vc-color-text-muted); margin: 0.4rem 0 1.25rem; }
.hg-cl-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.hg-cl-step { counter-increment: step; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.75rem; padding: 0.9rem 0; border-bottom: 1px solid var(--vc-color-border-subtle); }
.hg-cl-step-main { display: flex; align-items: flex-start; gap: 0.7rem; flex: 1; min-width: 60%; cursor: pointer; line-height: 1.55; }
.hg-cl-step-main input { margin-top: 0.25rem; flex: none; width: 1.15rem; height: 1.15rem; accent-color: var(--vc-color-primary); }
.hg-cl-step-main::before { content: counter(step); flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 999px; background: var(--vc-color-surface-muted); color: var(--vc-color-primary); font-size: 0.8rem; font-weight: 700; }
.hg-cl-step-text { color: var(--vc-color-text); }
.hg-cl-step.is-done .hg-cl-step-text { color: var(--vc-color-text-muted); text-decoration: line-through; }
.hg-cl-step-tags { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.hg-cl-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.hg-cl-badge-solicitor { background: rgba(11,51,64,0.10); color: #0B3340; }
.hg-cl-term-link { font-size: 0.82rem; font-weight: 600; color: var(--vc-color-primary); text-decoration: none; white-space: nowrap; }
.hg-cl-term-link:hover { text-decoration: underline; }
.hg-cl-closer { margin: 1.5rem 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--vc-color-text-soft); background: var(--vc-color-surface-muted); border-left: 4px solid var(--vc-color-primary); border-radius: 8px; padding: 0.9rem 1.1rem; }
@media (max-width: 520px) {
.hg-cl-role-grid { grid-template-columns: 1fr; }
.hg-cl-step-tags { margin-left: 2.3rem; }
}
/* ============================================================
ASK WIDGET — Village AI Q&A (on the glossary page)
============================================================ */
.hg-ask { max-width: 820px; margin: 0 auto 1rem; padding: 1.5rem 1.25rem; background: linear-gradient(135deg, rgba(11,51,64,0.06), rgba(55,48,163,0.06)); border: 1px solid var(--vc-color-border-subtle); border-radius: 14px; }
.hg-ask h2 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 1.3rem; color: var(--vc-color-primary); margin: 0 0 0.5rem; }
.hg-ask-sub { font-size: 0.92rem; line-height: 1.55; color: var(--vc-color-text-soft); margin: 0 0 1rem; }
.hg-ask-sub strong { color: var(--vc-color-text); }
.hg-ask-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hg-ask-form input { flex: 1; min-width: 200px; padding: 0.65rem 0.95rem; font-size: 1rem; border: 1.5px solid var(--vc-color-border); border-radius: 10px; background: var(--vc-color-surface); color: var(--vc-color-text); }
.hg-ask-form input:focus { outline: 2px solid var(--vc-color-primary); outline-offset: 1px; border-color: var(--vc-color-primary); }
.hg-ask-form button { flex: none; }
.hg-ask-answer { margin-top: 1rem; padding: 1rem 1.15rem; background: var(--vc-color-surface); border: 1px solid var(--vc-color-border-subtle); border-left: 4px solid var(--vc-color-primary); border-radius: 10px; line-height: 1.6; color: var(--vc-color-text); }
.hg-ask-answer.is-refer { border-left-color: #B8860B; background: var(--vc-color-surface-muted); }
.hg-ask-disclosure { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--vc-color-text-muted); font-style: italic; }
/* Footer identity + privacy/terms (all pages) — company identity for a data-collecting demo */
.hg-footer-identity { margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--vc-color-text-muted); }
.hg-footer-identity a { color: var(--vc-color-text-soft); text-decoration: underline; }
.hg-footer-identity a:hover { color: var(--vc-color-primary); }
/* ============================================================
NAV LINKS — persistent bar (Terms · Checklists · Ask AI), all pages
============================================================ */
.hg-nav-links { margin-left: auto; display: flex; gap: 0.2rem; align-items: center; }
.hg-nav-links a { color: #ffffff; text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: 6px; white-space: nowrap; line-height: 1; }
.hg-nav-links a:hover { background: rgba(255,255,255,0.14); }
.hg-nav-links a:focus-visible { outline: 2px solid #7FB4B9; outline-offset: 2px; }
@media (max-width: 560px) {
.hg-nav { flex-wrap: wrap; row-gap: 0.3rem; padding: 0.5rem 0.9rem; }
.hg-nav .hg-brand-word { font-size: 1.1rem; }
.hg-nav .hg-arch-mark { height: 1.4rem; }
.hg-nav-links { margin-left: auto; gap: 0.05rem; flex-wrap: wrap; }
.hg-nav-links a { padding: 0.3rem 0.45rem; font-size: 0.8rem; }
}
/* ============================================================
LIM ON FILE — listing detail card (metadata + honesty banner + gate-as-pitch)
============================================================ */
.hg-lim-card { border: 1px solid var(--vc-color-border-subtle); border-left: 4px solid var(--vc-color-primary); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(11,51,64,0.05), rgba(55,48,163,0.05)); }
.hg-lim-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem; }
.hg-lim-badge { flex: none; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--vc-color-primary); padding: 0.25rem 0.6rem; border-radius: 999px; }
.hg-lim-meta { font-weight: 600; color: var(--vc-color-text); }
.hg-lim-note { margin: 0.7rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--vc-color-text-soft); }
.hg-lim-gate { display: inline-block; margin-top: 0.8rem; font-size: 0.9rem; font-weight: 600; color: var(--vc-color-primary); text-decoration: none; }
.hg-lim-gate:hover { text-decoration: underline; }
/* ============================================================
WCAG AA CONTRAST FIXES — Lighthouse/axe audit 2026-07-07
homeground.css loads on Homeground pages only, so these :root
token overrides are scoped to the Homeground microsite and do
not touch the rest of the platform.
============================================================ */
:root {
--vc-color-text-muted: #4b5563; /* was #6b7280 (~4.2:1 on cream) → gray-600, ~6.4:1 */
--vc-color-text-subtle: #5b6470; /* was #9ca3af (~2.4:1 on cream) → ~5.4:1 */
}
/* The global site footer is dark (#020617); its Homeground identity block must use
LIGHT text/link colours, not the (now darker) muted token. */
.hg-footer-identity { color: #cbd5e1; }
.hg-footer-identity a { color: #93c5cf; }
.hg-footer-identity a:hover { color: #ffffff; }
/* Demo-banner label: darker rust clears 4.5:1 on the soft-orange banner. */
.hg-demo-banner strong { color: #9a3412; }
/* Diagram eyebrow contrast fix lives in homeground-routes.css (that sheet loads last, so it wins the cascade). */
/* Listing method badge: deeper indigo lifts white text past 4.5:1. */
.hg-listing-method-badge { background: #4f46e5; }
/* Non-hero secondary CTAs (e.g. pricing "Tell us what you think") were white-on-light → invisible.
Give them a visible teal outline. The hero's white-ghost secondary keeps its higher-specificity rule. */
.btn-secondary { background: transparent; color: #0B3340; border: 1.5px solid #0B3340; }
.btn-secondary:hover { background: rgba(11,51,64,0.08); color: #0B3340; }
/* ============================================================
TYPOGRAPHY — reading measure + paragraph rhythm (world-class pass 2026-07-07)
Prose set directly in a section (Resources, Law-in-the-open) ran the full
1000px section width (~110 chars/line). Constrain body text to a comfortable
reading column (~66ch), centred, with a consistent vertical rhythm. Cards,
grids and width-managed blocks are wrapped (not direct /
children) so
they keep the full section width. On mobile the measure exceeds the viewport,
so text is naturally full-width within the section padding.
============================================================ */
/* One shared rem measure (not ch — ch scales with each element's font-size, which
would give the larger h3 a wider column than the p and misalign their left edges). */
.hg-section > p,
.hg-section > h3 { max-width: 36rem; margin-left: auto; margin-right: auto; }
.hg-section > p { line-height: 1.7; margin-top: 0; margin-bottom: 1.15rem; }
.hg-section > h3 { margin-top: 2.25rem; margin-bottom: 0.6rem; line-height: 1.3; }
.hg-section > h3:first-child, .hg-section > p:first-child { margin-top: 0; }
/* Multi-paragraph lead blocks: .hg-price-lead p had margin:0, which butted the
Law-in-the-open intro's stacked paragraphs together. Restore a clear gap and
tighten the lead measure for a cleaner column. */
.hg-price-lead { max-width: 44rem; }
.hg-price-lead p + p { margin-top: 1.15rem; }
/* Centred lede/intro columns: tighten from 820/720px to a sharper measure. */
.hg-contrast { max-width: 44rem; }
.hg-section-intro { max-width: 44rem; }