/* ============================================================================ style.css — THE source of truth. Rebuilt from scratch on 2026-07-21. Everything that used to be here, plus admin.css, console-ui.css, home.css and the legacy sheet, is preserved under "OLD - CSS/" and is no longer loaded by anything. This file is the homepage design system and nothing else. Pages that have not been migrated onto these classes will look unstyled until they are. That is expected, not a regression. ========================================================================= */ :root{ --brand:#db252b; --brand-hover:#b31e23; --brand-tint:#fff1f1; /* Lifted brand red for dark surfaces — real --brand fails contrast on them. Currently unused: the footer went light. Keep it for .net and any future dark section rather than re-deriving the value. */ --brand-on-dark:#ff7d75; /* wordmark red: thin letterforms on dark blend toward the background, so the same hex as a solid button fill reads duller and pinker. Pushed to full saturation (not just lighter) so it stays vivid at text weight. */ --brand-wordmark:#ff1f28; --ink:#14161a; --ink-2:#3d444f; --muted:#697180; --faint:#98a0ad; --line:#e5e8ec; --line-soft:#eef0f3; --wash:#f6f7f8; --white:#fff; --dark:#14161a; --dark-2:#1b1e23; --font:'SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --display:'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --sh:0 4px 12px rgba(16,24,40,.07); --sh-md:0 12px 28px -8px rgba(16,24,40,.16); --sh-lg:0 24px 48px -16px rgba(16,24,40,.20); /* ── Backend-token bridge ────────────────────────────────────────────────── The portals (agent/admin/manager/user) and any portal component reused on a public page (lead modal, join popup, agent/brokerage cards) speak a second token vocabulary: --surface/--border/--text/--radius-* etc. Those were only defined in the backend stylesheets, so on public pages they were UNDEFINED — which is why reused controls rendered transparent/invisible. Define them here once, mapped to the public palette (identical values to what the backend sheets already use), so both systems share one source and nothing can render token-less again. The backend sheets still load after this on portal pages, so portals are visually unchanged. */ --surface:#fff; --surface-2:#fff; --surface-ink:#14161a; --bg-subtle:var(--wash); --bg-muted:#eceef1; --bg-dark:#14161a; --border:var(--line); --border-strong:#cbd5e0; --text:var(--ink); --text-strong:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--muted); --text-faint:var(--faint); --text-on-brand:#fff; --text-on-dark:#fff; --brand-ring:rgba(219,37,43,.22); --danger:var(--brand); --danger-tint:#fdecec; --danger-border:#f6c9c9; --success:#1a7f43; --success-tint:#e7f6ec; --success-border:#b6e3c4; --warning:#b45309; --warning-tint:#fdf3e3; --radius-sm:10px; --radius-md:12px; --radius:14px; --radius-lg:16px; --radius-xl:18px; --radius-pill:999px; --shadow-sm:var(--sh); --shadow-md:var(--sh-md); --shadow-lg:var(--sh-lg); } *{box-sizing:border-box;margin:0;padding:0} /* No sideways drag on mobile. Decorative floating pills (right:-6px, np*, the dfeat pills) and full-bleed rails can poke a hair past the viewport; clip it at the document level. `clip` (not `hidden`) so position:sticky still works; `hidden` is the fallback for older engines. */ html{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none} /* iOS Safari ignores overflow-x:clip on for touch panning, so also clip the body — clip (not hidden) keeps position:sticky working. */ body{overflow-x:clip;overscroll-behavior-x:none} body{font-family:var(--font);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased; overflow-x:hidden;overflow-x:clip;width:100%} img{display:block;max-width:100%} button,input{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.032em;line-height:1.06;font-weight:700} .shell{max-width:1460px;margin:0 auto;padding:0 40px} [data-in]{opacity:0;transform:translateY(14px);animation:in .7s var(--ease) forwards;animation-delay:var(--d,0s)} @keyframes in{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){[data-in]{opacity:1;transform:none;animation:none}} /* ═══════════════════════════════════════════════════════════════════════════ SECTION TEMPLATES — index Every block below is reusable on any page that loads this file. Markup for each one is in styles/COMPONENTS.md; copy it verbatim, nothing else needed. .nav / .nav--solid fixed header, transparent -> white on scroll .foot light footer .hero full-bleed photo hero, dark scrim .hero--split white hero, copy left / photo right .hero-strip trust band under a hero .pitch / .bigpanel feature panel + arch photo (+ .duo cards) .bigpanel--support centred arch, eyebrow + two-tone headline .stepcards three cards w/ images (--plain = text only) .hiw numbered how-it-works rail .dfeat split: copy + photo (+ optional figure pills) .cashoffer / .phone split with a CSS device mockup .appfeat tilted device on a blob .net full-screen dark map .proof / .quote testimonials .faq accordion, native
.cta plain closing CTA .blogx related-articles carousel (full-bleed by design) .odo odometer number TWO RULES: 1. In a two-column split the grid column IS the measure. Never add a ch max-width to a headline or paragraph inside one — it only makes the text narrower than the space it was given. 2. body is dark with white ink. A light section must set its own background and color, or it inherits the dark surface and its headings vanish. ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════ NAV — transparent over the hero, dark once scrolled ══════════ */ .nav{position:fixed;top:-1px;left:0;right:0;z-index:60;background:transparent; /* top:-1px + padding-top:1px lifts the box's top edge (and the sub-pixel repaint seam that position:fixed + backdrop-filter leaves on HiDPI/ fractional-DPR displays) just off-screen, while .nav-in keeps its exact on-screen position — so the thin white line at the very top of the viewport on scroll is clipped away without shifting any visible content. */ padding-top:1px; /* hairline separating the bar from the photo, as in the reference */ border-bottom:1px solid rgba(255,255,255,.16); /* backdrop-filter deliberately NOT transitioned: animating a backdrop blur on a fixed bar is what flashed the top seam (and it's a repaint hog). The blur still applies — it just snaps instead of tweening. */ transition:background .32s var(--ease),border-color .32s} /* Home page only: translucent over the photo hero, with a soft top-scrim so the white nav text stays legible; turns solid white on scroll (.is-stuck). */ .nav:not(.nav--solid):not(.nav--light):not(.is-stuck){ background:linear-gradient(180deg,rgba(9,11,15,.55) 0%,rgba(9,11,15,.18) 55%,rgba(9,11,15,0) 100%); border-bottom-color:rgba(255,255,255,.10)} /* Every other page: a permanent white bar — dark text, red logo — from the top. */ .nav--light{background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid var(--line)} /* One clean white bar on every page: BLACK logo, dark nav + profile. The extra class and the mirrored :has(hover) selectors beat the dark-hero rules regardless of source order — including the mega-menu hover state. */ .nav.nav--light .logo,.nav.nav--light .logo span, .nav.nav--light:has(.nav-item:hover) .logo,.nav.nav--light:has(.nav-item:hover) .logo span{color:var(--ink)} .nav.nav--light .nav-links a, .nav.nav--light:has(.nav-item:hover) .nav-links > .nav-item > a{color:var(--ink-2);text-shadow:none} .nav.nav--light .nav-links a:hover, .nav.nav--light:has(.nav-item:hover) .nav-links > .nav-item > a:hover{color:var(--ink)} .nav.nav--light .nav-right .signin,.nav.nav--light .nav-profile,.nav.nav--light .nav-profile span, .nav.nav--light:has(.nav-item:hover) .nav-right .signin{color:var(--ink);background:transparent;border-color:var(--line);text-shadow:none} .nav.nav--light .nav-right .signin:hover{background:rgba(20,22,26,.06);border-color:var(--ink)} /* ── Header auth area: profile button + hover dropdown, logged-out CTAs ── */ .nav-auth,.nav-acct{display:inline-flex;align-items:center;gap:10px;position:relative} /* !important on the background too — otherwise `.nav.is-stuck .signin{background:transparent}` (higher specificity) strips the fill on scroll, leaving white text on the white bar. */ .nav-cta{background:var(--brand) !important;color:#fff !important;border-color:var(--brand) !important} .nav-cta:hover{background:var(--brand-hover) !important;border-color:var(--brand-hover) !important} .nav-acct-btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px solid transparent; background:transparent;border-radius:99px;padding:2px 8px 2px 2px;font:600 12px/1 var(--font);color:var(--ink); transition:background .15s,border-color .15s} .nav-acct-btn:hover{background:rgba(20,22,26,.06)} .nav-acct-ava{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%; overflow:hidden;flex:none;background:var(--brand);color:#fff;font:800 9px/1 var(--display)} .nav-acct-ava img{width:100%;height:100%;object-fit:cover} .nav-acct-ava.lg{width:48px;height:48px;font-size:17px} .nav-acct-caret{width:10px;height:7px;stroke:currentColor;fill:none;stroke-width:2;opacity:.5;transition:transform .18s} .nav-acct:hover .nav-acct-caret,.nav-acct.open .nav-acct-caret{transform:rotate(180deg)} /* Transparent bridge across the gap so the menu doesn't close while the cursor travels from the button down onto it. */ .nav-acct::after{content:"";position:absolute;top:100%;right:0;width:220px;height:14px} .nav-acct-menu{position:absolute;top:calc(100% + 10px);right:0;width:304px;background:#fff; border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 70px rgba(16,24,40,.22);padding:12px; opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .16s,transform .16s,visibility .16s;z-index:70} .nav-acct:hover .nav-acct-menu,.nav-acct:focus-within .nav-acct-menu,.nav-acct.open .nav-acct-menu{opacity:1;visibility:visible;transform:none} .nav-acct-head{display:flex;align-items:center;gap:12px;padding:10px 8px 15px;border-bottom:1px solid var(--line);margin-bottom:8px} .nav-acct-id{display:flex;flex-direction:column;min-width:0} .nav-acct-id b{font:700 16px/1.2 var(--display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-acct-id small{font:400 13px/1.3 var(--font);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .nav-acct-role{align-self:flex-start;margin-top:7px;font:700 10px/1 var(--font);letter-spacing:.06em;text-transform:uppercase; color:var(--brand);background:var(--brand-tint);border-radius:99px;padding:4px 9px} .nav-acct-links{display:flex;flex-direction:column;gap:1px} .nav-acct-link{display:block;padding:11px 12px;border-radius:11px;font:500 15px/1 var(--font);color:var(--ink-2);text-decoration:none;transition:background .12s,color .12s} .nav-acct-link:hover{background:var(--wash);color:var(--ink)} .nav-acct-out{width:100%;margin-top:8px;padding:13px 12px 8px;border:0;border-top:1px solid var(--line);background:transparent; text-align:left;font:600 15px/1 var(--font);color:var(--brand);cursor:pointer;transition:color .12s} .nav-acct-out:hover{color:var(--brand-hover)} /* wider than the 1280 content shell — the bar breathes to the edges */ .nav-in{display:flex;align-items:center;gap:40px;height:76px;max-width:1600px;margin:0 auto;padding:0 28px} .logo{font:800 20px/1 var(--display);letter-spacing:-.03em;color:var(--brand);text-decoration:none;white-space:nowrap} /* whole wordmark in one brand red, both words */ .logo{color:var(--brand-wordmark)} .logo span{color:var(--brand-wordmark)} /* links pushed to the right, Opendoor-style, not clustered by the logo. align-self:stretch makes the row the full height of the bar; without it the row is only as tall as the text (22px in a 77px bar) and there is a dead strip under every link where the mega-menu loses hover and snaps shut. The old 26px flex gap is now padding on the links themselves, so adjacent items touch and sliding sideways between them never crosses a gap. */ .nav-links{display:flex;gap:0;margin-left:auto;align-self:stretch} /* white in both states — the hero scrim guarantees a dark backing, so the nav never has to change colour and Sign in never lands on a light patch */ .nav-links a{display:inline-flex;align-items:center;gap:5px; font:400 14px/1 var(--font);color:rgba(255,255,255,.85);text-decoration:none;padding:4px 0; text-shadow:0 1px 2px rgba(0,0,0,.3);transition:color .2s} .nav-links a:hover{color:#fff} /* caret signals a dropdown; nudges down on hover */ .nav-links .caret{width:9px;height:9px;flex:none;stroke:currentColor;fill:none; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.65; transition:transform .2s var(--ease),opacity .2s} .nav-links a:hover .caret{transform:translateY(1.5px);opacity:1} /* ── Mega-menu ─────────────────────────────────────────────────────────── Each top-level link wraps in .nav-item so the panel can stay inside the hover target. .nav-item is deliberately NOT positioned: the panel's position:absolute then resolves against .nav itself, which is what makes it span the full bar width instead of the width of one link. No JS. Opening is :hover for mice and :focus-within for keyboards. */ /* full bar height, so the link and the panel are flush — no dead strip between */ .nav-item{position:static;display:inline-flex;align-items:center} /* the old .nav-links gap, moved here so items are contiguous */ .nav-links > .nav-item > a{padding:0 13px;height:100%} .nav-panel{position:absolute;top:100%;left:0;right:0; background:#fff;border-bottom:1px solid var(--line); box-shadow:0 18px 40px -24px rgba(9,10,12,.28); opacity:0;visibility:hidden; /* Closing only. .32s with no delay — identical to the .nav background transition above, so the bar and the menu fade out together. */ transition:opacity .32s var(--ease),visibility .32s} .nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel{opacity:1;visibility:visible} /* While the pointer is on ANY item, every panel switches with no transition at all — the one leaving and the one arriving. A fading-in panel is translucent for its whole fade, so moving Buy -> Sell showed the hero photo through the new panel and read as the menu re-opening from scratch. Instant swap fixes that; the fade still runs on the way out, when no item is hovered. */ .nav-links:has(.nav-item:hover) .nav-panel{transition-duration:0s} .nav-panel-in{max-width:1600px;margin:0 auto;padding:36px 28px 40px; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px} .nav-col h4{font:600 14.5px/1.3 var(--font);letter-spacing:0;color:var(--ink); margin:0 0 16px} .nav-col ul{list-style:none;margin:0;padding:0} .nav-col li{margin-bottom:12px} /* beats .nav-links a — these live on white, never on the photo */ .nav-panel .nav-col a{display:block;padding:0;font:400 14.5px/1.4 var(--font); color:var(--ink-2);text-shadow:none;transition:color .16s} .nav-panel .nav-col a:hover{color:var(--brand)} .nav-item:hover > a .caret, .nav-item:focus-within > a .caret{transform:rotate(180deg);opacity:1} /* Open panel forces the bar white, whatever the scroll position. Kept as its own block rather than merged into the .is-stuck list below: :has() is all-or -nothing, so a browser without it would drop the scroll styles too. */ /* transition-duration:0s so the bar whitens at the same instant the panel appears. Leaving drops this rule, so the bar fades back on the base .32s — in step with the panel, which does the same. */ /* The :not() guards mirror line ~84's translucent-bar rule so this wins on specificity (0,5,0 > 0,4,0); without them the bar stays dark on hover while the links turn dark → invisible dark-on-dark nav. */ .nav:not(.nav--solid):not(.is-stuck):has(.nav-item:hover), .nav:not(.nav--solid):not(.is-stuck):has(.nav-item:focus-within){background:rgba(255,255,255,.98); backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:transparent; transition-duration:0s} .nav:has(.nav-item:hover) .logo, .nav:has(.nav-item:hover) .logo span, .nav:has(.nav-item:focus-within) .logo, .nav:has(.nav-item:focus-within) .logo span{color:var(--brand-wordmark)} .nav:has(.nav-item:hover) .nav-links > .nav-item > a, .nav:has(.nav-item:focus-within) .nav-links > .nav-item > a{color:var(--ink-2);text-shadow:none} .nav:has(.nav-item:hover) .nav-links > .nav-item > a:hover, .nav:has(.nav-item:focus-within) .nav-links > .nav-item > a:hover{color:var(--ink)} .nav:has(.nav-item:hover) .signin, .nav:has(.nav-item:focus-within) .signin{color:var(--ink);background:transparent; border-color:rgba(20,22,26,.28);text-shadow:none} .nav:has(.nav-item:hover) .signin:hover, .nav:has(.nav-item:focus-within) .signin:hover{background:rgba(20,22,26,.06);border-color:var(--ink)} /* ── Mobile drawer (hamburger → full-screen drill-in nav) ──────────────────── Hidden on desktop; the @media block below flips it on. The markup is server-rendered in header-html.js so it's present on first paint. */ .mnav-burger{display:none;width:42px;height:42px;flex:0 0 auto;align-items:center; justify-content:center;background:transparent;border:0;padding:0;margin:0;cursor:pointer; color:#fff;border-radius:10px;-webkit-tap-highlight-color:transparent} .mnav-burger svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none; stroke-linecap:round;stroke-linejoin:round} /* The burger is white for the transparent-over-photo hero. EVERY white-bar state needs a dark icon or it vanishes (white-on-white) — that includes the scrolled/stuck homepage bar, which turns white. */ .nav--light .mnav-burger, .nav--solid .mnav-burger, .nav:not(.nav--solid).is-stuck .mnav-burger{color:var(--ink)} .mnav{position:fixed;inset:0;z-index:200;background:#fff;display:flex;flex-direction:column; transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s; overscroll-behavior:contain} .mnav.open{transform:none;visibility:visible} .mnav-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between; height:64px;padding:0 16px 0 20px;border-bottom:1px solid var(--line)} /* beats `.nav .logo{color:#fff}` (line ~826) — the drawer is inside .nav */ .mnav .mnav-top .logo,.mnav .mnav-top .logo span{font-size:19px;color:var(--brand-wordmark)} .mnav-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:transparent;border:0;padding:0;cursor:pointer;color:var(--ink);border-radius:10px} .mnav-close svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round} .mnav-body{position:relative;flex:1 1 auto;overflow:hidden} .mnav-panel{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto; -webkit-overflow-scrolling:touch;background:#fff;padding:6px 0 0} /* sub-panels start off-screen right and slide over the main list */ .mnav-sub{transform:translateX(100%);visibility:hidden; transition:transform .28s var(--ease),visibility .28s} .mnav-sub.is-open{transform:none;visibility:visible} .mnav-list{list-style:none;margin:0;padding:8px 0} .mnav-list a,.mnav-drill{display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding:15px 22px;font:600 18px/1.25 var(--font);color:var(--ink); text-decoration:none;background:transparent;border:0;text-align:left;cursor:pointer} .mnav-list a:active,.mnav-drill:active{background:var(--wash)} .mnav-drill svg{width:20px;height:20px;flex:none;stroke:var(--muted);stroke-width:2;fill:none; stroke-linecap:round;stroke-linejoin:round} .mnav-back{display:inline-flex;align-items:center;gap:6px;margin:4px 12px 2px;padding:8px 10px; font:600 15px/1 var(--font);color:var(--muted);background:transparent;border:0;cursor:pointer} .mnav-back svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .mnav-sub h3{margin:6px 22px 4px;font:800 26px/1.1 var(--display);color:var(--ink);letter-spacing:-.02em} .mnav-group{padding:6px 0} .mnav-group h4{margin:0;padding:16px 22px 4px;font:700 12px/1 var(--font);letter-spacing:.09em; text-transform:uppercase;color:var(--muted)} .mnav-group ul{list-style:none;margin:0;padding:0} .mnav-group a{display:block;padding:11px 22px;font:500 16.5px/1.3 var(--font); color:var(--ink-2);text-decoration:none} .mnav-group a:active{background:var(--wash)} .mnav-all{color:var(--brand)!important;font-weight:600!important} .mnav-foot{margin-top:auto;padding:18px 22px calc(18px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line)} .mnav-foot .btn{width:100%} /* lock the page behind the open drawer */ html.mnav-lock,html.mnav-lock body{overflow:hidden} @media (max-width:900px){ /* no room for a four-column panel, and no hover on touch */ .nav-panel{display:none} /* hide the desktop link row + the logged-out text buttons; the drawer holds them */ .nav-links{display:none} /* .nav-in specificity so this beats the base `.nav-right{margin-left:26px}` (which is declared later in the file) — otherwise the bell + hamburger sit mid-bar instead of hugging the right edge. */ .nav-in .nav-right{margin-left:auto;gap:6px} .nav-right > .signin,.nav-auth{display:none!important} .mnav-burger{display:inline-flex} /* keep the logged-in account reachable but compact — avatar only */ .nav-acct-first,.nav-acct-caret{display:none} .nav-acct-btn{padding:0} } @media (min-width:901px){ .mnav{display:none} } .nav-right{margin-left:26px;display:flex;align-items:center;gap:14px} /* solid-enough outline that it reads as a button, not faint text */ .nav-right .signin{font:600 14.5px/1 var(--font);color:#fff;text-decoration:none; padding:11px 22px;border:1.5px solid rgba(255,255,255,.55);border-radius:99px; background:rgba(255,255,255,.08);backdrop-filter:blur(8px); text-shadow:0 1px 2px rgba(0,0,0,.3); transition:background .2s,border-color .2s} .nav-right .signin:hover{background:rgba(255,255,255,.2);border-color:#fff} /* The account chip is a .signin by markup, but it should NOT wear the big translucent pill-button treatment (padding:11px 22px + bordered blur) that Log in / Get started use — that's what made it read as a chunky bubble. Keep it compact: avatar + first name + caret, with only a subtle hover. */ .nav-right .nav-acct-btn{padding:3px 9px 3px 3px;border-color:transparent;background:transparent; backdrop-filter:none;font:600 13px/1 var(--font);text-shadow:none} .nav-right .nav-acct-btn:hover{background:rgba(255,255,255,.16);border-color:transparent} .nav.nav--light .nav-right .nav-acct-btn:hover, .nav.is-stuck .nav-right .nav-acct-btn:hover{background:rgba(20,22,26,.06);border-color:transparent} /* scrolled state — only the bar itself changes */ .nav.is-stuck{background:rgba(9,10,12,.97);backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:rgba(255,255,255,.1)} .nav.is-stuck .nav-links a,.nav.is-stuck .signin{text-shadow:none} .nav.is-stuck .signin{background:transparent;border-color:rgba(255,255,255,.34)} .nav.is-stuck .signin:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent; font:600 15px/1 var(--font);text-decoration:none;padding:14px 26px;border-radius:99px;cursor:pointer; transition:background .18s,color .18s,border-color .18s,box-shadow .18s} .btn-primary{background:var(--brand);color:#fff} .btn-primary:hover{background:var(--brand-hover)} .btn-outline{background:#fff;color:var(--ink);border-color:var(--line)} .btn-outline:hover{border-color:var(--ink)} .btn-sm{padding:11px 20px;font-size:14.5px} /* ══════════ HERO ══════════ */ .hero{position:relative;background:var(--wash)} .hero-media{position:absolute;inset:0;overflow:hidden} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%; filter:saturate(.9) contrast(1.02) brightness(.92)} /* dark scrim: heavy on the left for the copy, plus a top band so the transparent nav has something to sit on. Dark text could never clear this photo's range — it runs from a white wall to near-black hair. */ .hero-media::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(9,11,15,.66) 0%,rgba(9,11,15,.52) 32%, rgba(9,11,15,.28) 55%,rgba(9,11,15,.1) 76%,rgba(9,11,15,.06) 100%), linear-gradient(180deg,rgba(9,11,15,.34) 0%,rgba(9,11,15,0) 26%)} /* taller now that the stats strip is gone — the photo runs down to where it was */ .hero-in{position:relative;z-index:2;max-width:1460px;margin:0 auto;padding:140px 40px 96px; min-height:700px;display:flex;flex-direction:column;justify-content:center} .hero-copy{max-width:620px} /* 500 — at 64px, 700 reads as a slab and even 600 stays dense */ h1{font-weight:500;font-size:clamp(40px,5vw,64px);margin-bottom:22px;color:#fff;max-width:11em} /* Index full-bleed hero headline — thinner per request. Scoped so it never touches the split hero (buy/sell) or any other h1. */ .hero:not(.hero--split) .hero-copy h1{font-weight:300} .hero-sub{font:400 17.5px/1.5 var(--font);color:rgba(255,255,255,.86);max-width:34em;letter-spacing:-.006em} .tabs{display:flex;gap:28px;margin:30px 0 18px;border-bottom:1px solid rgba(255,255,255,.24); width:fit-content;max-width:100%} .tab{position:relative;background:none;border:0;padding:0 0 12px;cursor:pointer;white-space:nowrap; font:600 15px/1 var(--font);color:rgba(255,255,255,.68);transition:color .18s} .tab:hover{color:#fff} .tab[aria-selected="true"]{color:#fff} .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px; background:var(--brand);transform:scaleX(0);transition:transform .22s var(--ease)} .tab[aria-selected="true"]::after{transform:scaleX(1)} /* rounded rectangle with an icon-only square button, per the reference */ .search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid transparent; border-radius:12px;padding:7px 7px 7px 20px;box-shadow:var(--sh-md);max-width:580px; transition:box-shadow .2s,border-color .2s} .search:focus-within{border-color:#c9ced6;box-shadow:0 0 0 4px rgba(219,37,43,.12),var(--sh-md)} .search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:15px 0; font:400 16.5px/1.3 var(--font);letter-spacing:-.005em} .search input::placeholder{color:var(--faint)} .search-go{width:50px;height:50px;flex:none;border:0;border-radius:9px;cursor:pointer; background:var(--brand);display:grid;place-items:center;transition:background .18s} .search-go:hover{background:var(--brand-hover)} .search-go svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round} .hero-note{margin-top:16px;font:400 14px/1.5 var(--font);color:rgba(255,255,255,.72)} /* floating proof cards over the photo */ .pill{position:absolute;z-index:3;display:flex;align-items:center;gap:11px; background:#fff;border-radius:16px;padding:12px 17px;box-shadow:var(--sh-lg); opacity:0;animation:in .8s var(--ease) forwards;animation-delay:var(--d)} .pill .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--brand-tint);color:var(--brand);font:700 13px/1 var(--display)} .pill .k{display:block;font:600 14px/1.25 var(--font);color:var(--ink);white-space:nowrap} .pill .s{display:block;font:500 12.5px/1.25 var(--font);color:var(--muted);margin-top:3px;white-space:nowrap} .pill .score{font:700 17px/1 var(--display);color:var(--brand);letter-spacing:-.02em} .pill-1{bottom:34%;right:4%} .pill-2{bottom:12%;right:29%} /* ══════════ SELL / BUY PANELS ══════════ */ .pitch{padding:88px 0 0} /* explicit class — `.pitch:last-of-type` matched nothing, since the last
on the page is the FAQ, so the buy panel had no bottom padding */ .pitch-end{padding-bottom:120px} .pitch-head{max-width:640px;margin-bottom:38px} .pitch-head h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:14px} .pitch-head p{font:400 17.5px/1.55 var(--font);color:var(--ink-2)} .bigpanel{position:relative;background:var(--wash);border-radius:24px;overflow:hidden; display:grid;grid-template-columns:1fr 1fr;gap:24px;min-height:540px} .bp-copy{padding:44px 20px 48px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:40px} .bp-eyebrow{font:600 16.5px/1.3 var(--display);letter-spacing:-.018em} .bp-title{font:700 clamp(24px,2.5vw,34px)/1.16 var(--display);letter-spacing:-.03em;max-width:14em} .bp-cta{margin-top:22px} /* a radius larger than half the width clamps to a true semicircle at any size */ .bp-media{position:relative;align-self:end;justify-self:center;width:100%;max-width:400px;padding:0 20px} .arch{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:.86; box-shadow:0 18px 40px -20px rgba(16,24,40,.3)} .arch img{width:100%;height:100%;object-fit:cover} .bp-pill{position:absolute;z-index:3;border-radius:99px;padding:13px 24px;text-align:center; box-shadow:0 12px 30px -10px rgba(16,24,40,.3);white-space:nowrap} .bp-pill .lbl{display:block;font:500 12.5px/1 var(--font)} .bp-pill .val{display:block;font:700 21px/1 var(--display);letter-spacing:-.028em;margin-top:6px} .bp-pill.brand{background:var(--brand);color:#fff} .bp-pill.brand .lbl{color:rgba(255,255,255,.82)} .bp-pill.light{background:#fff;color:var(--ink)} .bp-pill.light .lbl{color:var(--muted)} .pill-a{top:6%;right:-6px} .pill-b{bottom:16%;left:-14px} .duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .duo-p{background:var(--wash);border-radius:24px;padding:36px 34px 32px} .duo-p .ico{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--line); display:grid;place-items:center;margin-bottom:18px} .duo-p .ico svg{width:19px;height:19px;stroke:var(--brand);fill:none;stroke-width:1.9} .duo-p h3{font:700 20px/1.25 var(--display);letter-spacing:-.024em;margin-bottom:10px} .duo-p p{font:400 15.5px/1.55 var(--font);color:var(--ink-2);margin-bottom:20px;max-width:32em} .duo-p a{font:600 15px/1 var(--font);color:var(--brand);text-decoration:none; display:inline-flex;align-items:center;gap:7px} .duo-p a:hover{text-decoration:underline} /* ══════════ NETWORK (full-screen dark) ══════════ */ .net{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center; background:#0b0c0e url('/assets/images/cr-neighborhood-dusk.jpg') center/cover no-repeat;overflow:hidden;isolation:isolate} /* The decorative road-map SVG read as "weird lines" over the real photo — hide it and let the photo carry the section. */ .net-map{display:none} .net-map svg{width:100%;height:100%;display:block} .net-map .road{fill:none;stroke:rgba(255,255,255,.075);stroke-width:1.4} .net-map .road-major{stroke:rgba(255,255,255,.11);stroke-width:2.2;fill:none} .net-map .river{fill:none;stroke:rgba(120,160,185,.10);stroke-width:7;stroke-linecap:round} /* Flat dark wash over the photo keeps the black-overlay look and the text crisp; the two radials add the centre vignette on top. */ .net::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(rgba(11,12,14,.72),rgba(11,12,14,.72)), radial-gradient(ellipse 42% 46% at 50% 50%,rgba(11,12,14,.86),rgba(11,12,14,.5) 55%,rgba(11,12,14,0) 78%), radial-gradient(ellipse 90% 80% at 50% 50%,transparent 38%,rgba(11,12,14,.9) 100%)} .net-in{position:relative;z-index:3;text-align:center;padding:80px 24px;max-width:720px} .net-in h2{font-size:clamp(34px,4.4vw,58px);line-height:1.06;color:#fff;margin-bottom:22px} /* scoped to .dim — a bare `h2 span` also caught the odometer's digit spans */ .net-in h2 .dim{color:rgba(255,255,255,.42)} .net-in p{font:400 18px/1.55 var(--font);color:rgba(255,255,255,.66);max-width:26em;margin:0 auto 34px} .net-in .btn-primary{box-shadow:0 6px 18px -8px rgba(0,0,0,.6)} .npill{position:absolute;z-index:2;display:flex;align-items:center;gap:11px; background:rgba(28,30,34,.9);border:1px solid rgba(255,255,255,.09); border-radius:99px;padding:8px 18px 8px 8px;white-space:nowrap; animation:npfloat 9s ease-in-out infinite} .npill .av{width:38px;height:38px;border-radius:50%;flex:none;background:#2b2f36; background-size:400%;background-repeat:no-repeat; display:grid;place-items:center;font:700 13px/1 var(--display);color:rgba(255,255,255,.6)} .npill .lbl{display:block;font:500 11.5px/1 var(--font);color:rgba(255,255,255,.5)} .npill .val{display:block;font:700 15px/1 var(--display);letter-spacing:-.02em;color:#fff;margin-top:5px} @keyframes npfloat{50%{transform:translateY(-10px)}} /* Depth without washing them out — the cards should read as real matches, so keep them crisp and mostly opaque (no heavy blur). */ .npill.far{opacity:.82;filter:none} .npill.mid{opacity:.92} .npill{box-shadow:0 10px 30px -10px rgba(0,0,0,.55)} .np1{top:11%;left:9%} .np2{top:7%;right:14%} .np3{top:37%;left:6%} .np4{bottom:28%;right:8%} .np5{bottom:14%;left:19%} .np6{top:25%;right:5%} .np7{bottom:11%;right:29%} /* ══════════ PROOF / REVIEWS ══════════ */ .proof{padding:92px 0 96px} .proof-head{max-width:760px;margin-bottom:40px} .proof-head h2{font-size:clamp(28px,3.2vw,42px);margin-bottom:14px} .proof-head p{font:400 17.5px/1.55 var(--font);color:var(--ink-2)} /* odometer — each digit is a reel that spins to its value */ .odo{display:inline-flex;align-items:baseline;gap:1px;vertical-align:baseline} .reel{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:baseline} /* named odo-strip, not strip — the trust bar already owns .strip */ .reel .odo-strip{display:flex;flex-direction:column;transform:translateY(0); transition:transform 2.1s cubic-bezier(.16,.84,.3,1);transition-delay:var(--sd,0s)} .reel .odo-strip span{height:1em;line-height:1;display:block;font-variant-numeric:tabular-nums} .odo .sep{display:inline-block} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .quote{background:var(--wash);border-radius:20px;padding:36px 28px 30px; display:flex;flex-direction:column;align-items:center;text-align:center} .quote .face{width:96px;height:96px;border-radius:50%;flex:none;margin-bottom:22px; background-size:400%;background-repeat:no-repeat;box-shadow:0 0 0 4px #fff,0 4px 14px rgba(16,24,40,.12)} .quote blockquote{font:400 16px/1.6 var(--font);color:var(--ink);letter-spacing:-.006em; max-width:34ch;margin-bottom:auto} .quote .who{margin-top:24px} .quote .who .n{font:600 15.5px/1.3 var(--font)} .quote .who .l{font:400 13.5px/1.4 var(--font);color:var(--muted);margin-top:5px} /* ══════════ FAQ ══════════ */ /* Owns its own top gap now. It used to run flush to the section above and rely on that section to supply the space, which meant every new page had to remember to add it — and none of them did. */ .faq{padding:80px 0 96px} .faq-in{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start} .faq-head h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:14px} .faq-head p{font:400 16.5px/1.55 var(--font);color:var(--ink-2);margin-bottom:22px} .faq-list{border-top:1px solid var(--line)} .faq-list details{border-bottom:1px solid var(--line)} .faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px; padding:22px 0;cursor:pointer;list-style:none; font:600 17px/1.4 var(--display);letter-spacing:-.02em;transition:color .18s} .faq-list summary::-webkit-details-marker{display:none} .faq-list summary:hover{color:var(--brand)} .faq-list .mk{position:relative;width:18px;height:18px;flex:none} .faq-list .mk::before,.faq-list .mk::after{content:"";position:absolute;background:var(--muted); border-radius:2px;transition:transform .25s var(--ease),background .2s} .faq-list .mk::before{top:8px;left:0;width:18px;height:2px} .faq-list .mk::after{left:8px;top:0;width:2px;height:18px} .faq-list details[open] .mk::after{transform:rotate(90deg)} .faq-list details[open] summary{color:var(--brand)} .faq-list details[open] .mk::before,.faq-list details[open] .mk::after{background:var(--brand)} .faq-a{padding:0 0 24px;font:400 15.5px/1.65 var(--font);color:var(--ink-2);max-width:64ch} /* ══════════ CLOSING CTA ══════════ */ /* deliberately plain: hairline, whitespace, one line, one button */ .cta{padding:96px 0 104px;text-align:center;border-top:1px solid var(--line-soft)} .cta h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px} .cta p{font:400 18px/1.55 var(--font);color:var(--ink-2);margin:0 auto 32px;max-width:34em} /* ══════════ FOOTER ══════════ */ /* Light footer. Was dark; the whole page now ends on white, so the footer separates itself with a hairline and wash panels instead of a colour flip. --brand-on-dark is no longer needed here: real brand red passes contrast on white, so links hover to var(--brand). */ .foot{background:var(--white);color:var(--ink);padding:72px 0 36px;border-top:1px solid var(--line)} /* ── "Ask AI about us" — compact monochrome logo row under the brand blurb ── */ .foot-ai{margin-top:22px;max-width:30ch} .foot-ai-label{display:block;font:600 11px/1 var(--font);letter-spacing:.09em;text-transform:uppercase; color:var(--faint);margin-bottom:12px} .foot-ai-row{display:flex;flex-wrap:wrap;gap:15px} .foot-ai-i{position:relative;display:inline-flex;align-items:center;justify-content:center; width:17px;height:17px;color:var(--muted);transition:color .16s,transform .16s} .foot-ai-i svg{width:100%;height:100%} .foot-ai-i:hover{color:var(--ink);transform:translateY(-1px)} /* sleek hover tooltip — left-anchored so it grows rightward and never clips */ .foot-ai-i::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:-4px; background:var(--ink);color:#fff;font:500 12px/1.3 var(--font);letter-spacing:0;text-transform:none; white-space:nowrap;padding:6px 9px;border-radius:7px;box-shadow:var(--sh-md); opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none; transition:opacity .15s,transform .15s;z-index:5} .foot-ai-i::before{content:"";position:absolute;bottom:calc(100% + 5px);left:6px; border:5px solid transparent;border-top-color:var(--ink); opacity:0;visibility:hidden;transition:opacity .15s;z-index:5} .foot-ai-i:hover::after,.foot-ai-i:hover::before{opacity:1;visibility:visible} .foot-ai-i:hover::after{transform:translateY(0)} .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px} .foot-brand .logo, .foot-brand .logo span{font-size:22px;color:var(--ink)} .foot-blurb{font:400 14.5px/1.6 var(--font);color:var(--ink-2);margin-top:16px;max-width:30ch} .foot-col h4{font:600 14px/1 var(--font);letter-spacing:.01em;margin-bottom:18px;color:var(--ink)} .foot-col ul{list-style:none;display:grid;gap:12px} .foot-col a{font:400 14.5px/1.35 var(--font);color:var(--ink-2);text-decoration:none;transition:color .18s} .foot-col a:hover{color:var(--brand)} .foot-panel{background:var(--wash);border-radius:20px;padding:26px 30px;margin-bottom:16px} .foot-panel h4{font:600 15px/1 var(--display);letter-spacing:-.01em;margin-bottom:18px; color:var(--ink);display:flex;align-items:center;gap:10px} .foot-panel h4::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--brand);flex:none} .foot-tags{display:flex;flex-wrap:wrap;align-items:center} .foot-tags a{font:400 14px/1.9 var(--font);color:var(--ink-2);text-decoration:none; padding:0 12px;border-right:1px solid var(--line);transition:color .18s} .foot-tags a:first-child{padding-left:0} .foot-tags a:last-child{border-right:0} .foot-tags a:hover{color:var(--brand)} .foot-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .foot-duo .foot-panel{margin-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px} .foot-duo h4{margin-bottom:0} .foot-duo .btn{flex:none} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{background:var(--wash);border-color:var(--ink)} .foot-legal{font:400 13.5px/1.75 var(--font);color:var(--muted)} .foot-legal b{color:var(--ink);font-weight:600} .foot-legal .foot-brand{color:var(--brand);font-weight:600} .foot-legal a{color:var(--ink-2)} .foot-legal a:hover{color:var(--brand)} .foot-legal p+p{margin-top:10px} /* Popular-metros directory shortcuts */ .foot-cities{margin:8px 0 20px;padding-top:30px;border-top:1px solid var(--line);text-align:center} .foot-cities h4{font:600 14px/1 var(--font);color:var(--ink);margin:0 0 16px;text-align:left} .foot-cities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px 24px;justify-content:center;text-align:center} .foot-cities-grid a{font:500 14px/1.4 var(--font);color:var(--brand);text-decoration:none;transition:opacity .15s} .foot-cities-grid a:hover{opacity:.7} @media(max-width:600px){.foot-cities-grid{grid-template-columns:1fr 1fr;gap:8px 16px}} .foot-bottom{display:flex;align-items:center;justify-content:center;gap:18px; padding-top:34px;margin-top:20px;border-top:1px solid var(--line); font:400 13.5px/1 var(--font);color:var(--muted);flex-wrap:wrap} .eho{display:flex;align-items:center;gap:8px;color:var(--muted)} .eho svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6} /* ══════════ RESPONSIVE ══════════ */ @media (max-width:900px){ .shell,.nav-in,.hero-in{padding-left:24px;padding-right:24px} .nav-links,.nav-right .signin{display:none} .hero-media img{object-position:78% 50%} .hero-media::after{background:linear-gradient(180deg,rgba(9,11,15,.6) 0%,rgba(9,11,15,.68) 46%,rgba(9,11,15,.78) 100%)} .hero-in{padding:108px 24px 64px;min-height:auto} .pill{display:none} .pitch{padding-top:64px} .pitch-end{padding-bottom:80px} .bigpanel{grid-template-columns:1fr;gap:0;min-height:0} .bp-copy{padding:32px 26px 26px;gap:20px} .bp-media{max-width:320px;margin-top:8px;padding:0} .pill-a{top:4%;right:-6px} .pill-b{bottom:12%;left:-6px} .duo{grid-template-columns:1fr;gap:16px;margin-top:16px} .duo-p{padding:28px 24px 26px} .net{min-height:88vh} .net-in{padding:64px 22px} .np3,.np6,.np7{display:none} .np1{top:8%;left:-2%} .np2{top:5%;right:-4%} .np4{bottom:20%;right:-4%} .np5{bottom:8%;left:-2%} .proof{padding:68px 0 72px} .quotes{grid-template-columns:1fr;gap:16px} .quote{padding:30px 24px 26px} .faq{padding-bottom:72px} .faq-in{grid-template-columns:1fr;gap:28px} .cta{padding:68px 0 76px} .foot{padding:56px 0 32px} .foot-top{grid-template-columns:1fr 1fr;gap:32px;padding-bottom:36px} .foot-brand{grid-column:1/-1} .foot-duo{grid-template-columns:1fr} .foot-duo .foot-panel{flex-direction:column;align-items:flex-start;gap:14px} .foot-panel{padding:22px 20px} } @media (max-width:520px){ h1{font-size:35px} .hero-sub{font-size:16.5px} .search{padding-left:16px} .search input{font-size:15.5px} .tabs{gap:20px} .foot-top{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){.npill{animation:none}} /* ══════════ FEATURED BLOG — horizontal card rail ══════════ Cards scroll on the x-axis with scroll-snap so the arrows and the native trackpad gesture stay in sync; the dots are derived from scroll position rather than tracked separately, so they cannot drift out of step. */ .blogx{background:var(--wash);padding:88px 0 96px} /* Wider than the 1280 page shell on purpose: at 1280 the four cards come out 281px and read undersized. 1520 puts them at ~340, matching the design. */ .blogx-in{max-width:1520px;margin:0 auto;padding:0 40px} .blogx-head{margin-bottom:0} .blogx-head h2{font:700 clamp(28px,3.2vw,42px)/1.06 var(--display);letter-spacing:-.032em;color:var(--ink);margin:0} .blogx-nav{display:flex;justify-content:flex-end;gap:10px;margin:26px 0 22px} .blogx-arrow{width:44px;height:44px;border-radius:50%;flex:none;cursor:pointer; background:var(--white);border:1px solid var(--line);display:grid;place-items:center; transition:border-color .2s,background .2s,opacity .2s} .blogx-arrow svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .blogx-arrow:hover{border-color:var(--ink)} .blogx-arrow[disabled]{opacity:.35;cursor:default} .blogx-arrow[disabled]:hover{border-color:var(--line)} .blogx-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 26px) / 4); gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px} .blogx-rail::-webkit-scrollbar{display:none} .blogx-card{scroll-snap-align:start;background:var(--white);border-radius:12px;overflow:hidden; display:flex;flex-direction:column;text-decoration:none; box-shadow:0 1px 3px rgba(16,24,40,.09); transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .blogx-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} .blogx-thumb{aspect-ratio:5/4;background:#e8ebee;overflow:hidden} .blogx-thumb img{width:100%;height:100%;object-fit:cover;display:block} .blogx-body{padding:18px 20px 24px} .blogx-date{display:block;font:400 13.5px/1 var(--font);color:var(--muted);margin-bottom:10px} .blogx-title{font:600 16px/1.35 var(--font);letter-spacing:-.008em;color:var(--ink); transition:color .18s} .blogx-card:hover .blogx-title{color:var(--brand)} .blogx-dots{display:flex;justify-content:center;gap:7px;margin-top:34px} .blogx-dot{width:8px;height:8px;border-radius:99px;background:#d3d8de;border:0;padding:0;cursor:pointer; transition:width .25s var(--ease),background .25s} .blogx-dot[aria-current="true"]{width:22px;background:var(--ink)} @media (max-width:1080px){ .blogx-rail{grid-auto-columns:calc((100% - 2 * 26px) / 3)} } @media (max-width:900px){ .blogx{padding:64px 0 72px} .blogx-in{padding:0 24px} .blogx-rail{grid-auto-columns:calc((100% - 26px) / 2)} /* the arrows carry the gap under the heading on desktop; they're hidden here, so give the heading its own bottom margin or it glues to the cards */ .blogx-nav{display:none} .blogx-head{margin-bottom:22px} } @media (max-width:600px){ .blogx{padding:52px 0 58px} .blogx-in{padding:0 18px} /* one card + a peek of the next; shorter image so the card isn't a monolith */ .blogx-rail{grid-auto-columns:85%;gap:16px} .blogx-thumb{aspect-ratio:16/10} .blogx-body{padding:15px 16px 20px} .blogx-title{font-size:16.5px} .blogx-dots{margin-top:22px;flex-wrap:wrap;gap:8px} } @media (prefers-reduced-motion:reduce){ .blogx-rail{scroll-behavior:auto} .blogx-card{transition:none} } /* ══════════ SELL HERO — white, split ══════════ Copy left, photograph right, on the page background rather than behind a full-bleed scrim. Shares .hero-copy/.hero-sub/.search/.pill with the homepage hero; only the colour treatment and layout differ, and the copy flips to dark ink because there is no longer a dark surface under it. */ .hero--split{background:var(--white)} .hero--split .hero-in{max-width:1460px;margin:0 auto;padding:152px 40px 116px;min-height:0; display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center} .hero--split .hero-copy{max-width:none} .hero--split h1{color:var(--ink);max-width:none; font-size:clamp(34px,3.4vw,52px);margin-bottom:24px} .hero--split .hero-sub{color:var(--ink-2);margin-bottom:30px;max-width:44ch} .hero--split .hero-note{color:var(--muted)} /* the eyebrow loses its glass treatment — nothing to sit on now */ .hero--split .hero-eyebrow{color:var(--ink-2);background:var(--wash); border-color:var(--line);backdrop-filter:none} /* on white the search bar needs a real edge, not just a shadow */ /* Outlined pill with the magnifier sitting inside it, rather than a filled button hanging off the end. */ .hero--split .search{background:transparent;border:1px solid var(--border-strong,#cbd5e0); border-radius:99px;box-shadow:none;padding:5px 8px 5px 24px;max-width:620px} .hero--split .search:focus-within{border-color:var(--ink);box-shadow:none} .hero--split .search input{padding:15px 0;font-size:16px} .search-go--ghost{width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer; background:transparent;display:grid;place-items:center;transition:background .18s} .search-go--ghost:hover{background:var(--wash)} .search-go--ghost svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round} .hero--split .hero-trust{color:var(--muted)} .hero--split .hero-trust b{color:var(--ink)} .hero--split .hero-trust .d{background:var(--border-strong,#cbd5e0)} .hero-figure{position:relative} /* height:auto matters. The img carries height="1066" as a presentational hint, and aspect-ratio is ignored whenever height is definite. */ .hero-figure img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover; border-radius:24px;display:block;box-shadow:var(--sh-lg)} .hero--split .pill-1{top:9%;left:-5%;bottom:auto;right:auto} .hero--split .pill-2{bottom:8%;right:-4%;left:auto;top:auto} /* Solid bar. The transparent nav assumes a dark hero behind it; this page is white at the top, and white links on white are invisible. */ .nav--solid{background:rgba(9,10,12,.97); -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); border-bottom-color:rgba(255,255,255,.1)} @media (max-width:900px){ .hero--split .hero-in{grid-template-columns:1fr;gap:36px;padding:108px 24px 56px} .hero-figure{order:-1} .hero-figure img{aspect-ratio:16/10} .hero--split .pill-1,.hero--split .pill-2{display:none} } /* ══════════ STEP CARDS — three-up "how it works" row ══════════ Small eyebrow, two-line headline, lede, then three equal cards. Each card is a light panel with an inset image and its own label/title/body, so the row reads as three parallel steps rather than three unrelated features. Named .stepcards because .step and .steps are already taken by 11 and 7 pages respectively. */ .stepcards{background:var(--white);padding:88px 0 96px} .stepcards-in{max-width:1460px;margin:0 auto;padding:0 40px} .stepcards-eyebrow{font:600 14px/1 var(--font);color:var(--ink);margin-bottom:20px} .stepcards h2{font:700 clamp(30px,3.6vw,46px)/1.14 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0 0 22px;max-width:16ch} .stepcards-lede{font:400 17px/1.6 var(--font);color:var(--ink-2);max-width:52ch;margin:0 0 44px} .stepcards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px} .stepcard{background:var(--wash);border-radius:16px;padding:12px 12px 30px; display:flex;flex-direction:column} .stepcard-media{border-radius:10px;overflow:hidden;aspect-ratio:1.43;margin-bottom:22px; background:#e8ebee;flex:none} .stepcard-media img{width:100%;height:100%;object-fit:cover;display:block} .stepcard-label{font:500 13.5px/1 var(--font);color:var(--muted);margin:0 13px 11px} .stepcard h3{font:700 19px/1.32 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 13px 11px} .stepcard p{font:400 14.5px/1.6 var(--font);color:var(--ink-2);margin:0 13px} @media (max-width:980px){ .stepcards-grid{grid-template-columns:1fr;gap:18px} .stepcards{padding:64px 0 72px} .stepcards-in{padding:0 24px} .stepcards h2{max-width:none} .stepcard-media{aspect-ratio:1.6} } /* ══════════ SUPPORT PANEL ══════════ Reuses .bigpanel/.bp-media/.arch from the sell + buy panels, but centres the media instead of bottom-anchoring it and swaps the copy stack for an eyebrow / two-tone headline / subhead / body / outline button. */ .bigpanel--support{align-items:center;min-height:0;padding:56px 0} .bigpanel--support .bp-copy{justify-content:center;gap:0;padding:0 24px 0 64px} .bigpanel--support .bp-media{align-self:center;justify-self:center;max-width:440px;padding:0 40px 0 24px} .bigpanel--support .arch{aspect-ratio:.94;box-shadow:none} .bp-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 14px} .bp-head{font:700 clamp(26px,2.9vw,38px)/1.24 var(--display);letter-spacing:-.03em; color:var(--ink);margin:0 0 28px;max-width:18ch} /* second clause drops to muted, so the sentence reads as one thought with a turn in it rather than two competing lines */ .bp-head .soft{color:var(--muted)} .bp-sub{font:600 15.5px/1.5 var(--font);color:var(--ink);margin:0 0 10px} .bp-body{font:400 15px/1.6 var(--font);color:var(--ink-2);margin:0 0 28px;max-width:46ch} @media (max-width:900px){ .bigpanel--support{padding:32px 0 36px} .bigpanel--support .bp-copy{padding:0 26px} .bigpanel--support .bp-media{padding:24px 26px 0;max-width:340px} .bp-head{max-width:none} } /* Text-only variant of .stepcards — no media, tighter cards, smaller titles. Used where the three items are explanations rather than steps. */ .stepcards--plain .stepcard{padding:30px 30px 34px} .stepcards--plain .stepcard h3, .stepcards--plain .stepcard p{margin-left:0;margin-right:0} .stepcards--plain .stepcard h3{font:600 15.5px/1.4 var(--font);letter-spacing:-.008em;margin:0 0 12px} .stepcards--plain .stepcard p{font:400 14.5px/1.62 var(--font)} .stepcards--plain h2{max-width:22ch} /* Labelled submit. Without this the 50px icon width from .search-go applies and the label wraps inside a square button. */ .search-go--text{width:auto;flex:none;padding:0 24px;height:50px;gap:8px; font:600 15px/1 var(--font);color:#fff;white-space:nowrap} /* Base rules for the sell hero copy stack. The .hero--split versions above only recolour these; without the bases there is no pill, no flex row and no separator dots. */ .hero-eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px; font:600 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase; border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:9px 16px} .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--brand)} .hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px; font:500 13px/1 var(--font)} .hero-trust b{font-weight:600} .hero-trust .d{width:3px;height:3px;border-radius:50%;flex:none} /* ── Nav colour states ─────────────────────────────────────────────────── At rest the bar is transparent over a dark hero, so the wordmark and links are white. Once scrolled it becomes a white bar and everything flips to ink. Scoped with :not(.nav--solid) so pages that opt into a permanently dark bar (the sell page, which is white at the top) are not dragged along. */ .nav .logo, .nav .logo span{color:#fff} .nav:not(.nav--solid).is-stuck{background:rgba(255,255,255,.97); border-bottom-color:var(--line)} .nav:not(.nav--solid).is-stuck .logo, .nav:not(.nav--solid).is-stuck .logo span{color:var(--ink)} .nav:not(.nav--solid).is-stuck .nav-links a{color:var(--ink-2);text-shadow:none} .nav:not(.nav--solid).is-stuck .nav-links a:hover{color:var(--ink)} .nav:not(.nav--solid).is-stuck .signin{color:var(--ink);background:transparent; border-color:rgba(20,22,26,.3);text-shadow:none} .nav:not(.nav--solid).is-stuck .signin:hover{background:rgba(20,22,26,.06);border-color:var(--ink)} /* ══════════ HOW IT WORKS — numbered rail ══════════ Headline and intro on the left, a numbered list on the right separated by hairlines. The left column stays put while the list carries the detail, so the section reads as one explanation rather than four disconnected cards. */ .hiw{background:var(--white);padding:88px 0 96px} .hiw-in{max-width:1460px;margin:0 auto;padding:0 40px; display:grid;grid-template-columns:1fr 1.12fr;gap:80px;align-items:start} .hiw h2{font:700 clamp(34px,4vw,54px)/1.08 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0 0 26px} .hiw-lede{font:600 16px/1.62 var(--font);color:var(--ink);margin:0;max-width:42ch} .hiw-item{display:grid;grid-template-columns:auto 1fr;gap:22px; padding:28px 0;border-bottom:1px solid var(--line)} .hiw-item:first-child{padding-top:0} .hiw-item:last-child{border-bottom:0;padding-bottom:0} .hiw-num{width:36px;height:36px;border-radius:9px;flex:none; background:var(--wash);display:grid;place-items:center; font:500 13px/1 var(--font);color:var(--ink-2)} .hiw-item h3{font:700 19px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 10px} .hiw-item p{font:400 15.5px/1.62 var(--font);color:var(--ink-2);margin:0} @media (max-width:900px){ .hiw{padding:64px 0 72px} .hiw-in{grid-template-columns:1fr;gap:36px;padding:0 24px} .hiw-lede{max-width:none} } /* Trust strip — full-width band directly under the hero, centred, pipe separated. Sits outside .hero so it can run edge to edge. */ .hero-strip{background:var(--wash);border-top:1px solid var(--line)} .hero-strip-in{max-width:1460px;margin:0 auto;padding:20px 40px; display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap; font:500 15px/1.5 var(--font)} .hero-strip-in a{color:var(--brand);text-decoration:none} .hero-strip-in a:hover{text-decoration:underline} .hero-strip-in a:last-child{text-decoration:underline;color:var(--ink)} .hero-strip-in .sep{color:var(--faint)} @media (max-width:900px){ .hero-strip-in{padding:16px 24px;font-size:13.5px;gap:10px} .hero-strip-in .sep{display:none} } /* ══════════ FEATURE SPLIT — copy left, photo + figure pills right ══════════ Two headline numbers ride the photo: one neutral, one brand, so a before/after or price/cost comparison reads at a glance. */ .dfeat{background:var(--wash);padding:88px 0 96px} .dfeat-in{max-width:1460px;margin:0 auto;padding:0 40px; display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center} .dfeat h2{font:700 clamp(28px,3.2vw,42px)/1.14 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 0 20px} .dfeat p{font:400 16px/1.65 var(--font);color:var(--ink-2);margin:0} .dfeat-media{position:relative} .dfeat-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover; border-radius:24px;display:block} .dfeat-pill{position:absolute;z-index:2;border-radius:99px;padding:14px 28px; text-align:center;white-space:nowrap;box-shadow:0 14px 32px -10px rgba(16,24,40,.34)} .dfeat-pill .l{display:block;font:500 13px/1 var(--font)} .dfeat-pill .v{display:block;font:700 24px/1 var(--display);letter-spacing:-.03em;margin-top:7px} .dfeat-pill--light{background:var(--white);color:var(--ink)} .dfeat-pill--light .l{color:var(--muted)} .dfeat-pill--brand{background:var(--brand);color:#fff} .dfeat-pill--brand .l{color:rgba(255,255,255,.82)} .dfeat-pill--a{top:44%;left:-7%} .dfeat-pill--b{top:36%;right:-5%} @media (max-width:900px){ .dfeat{padding:64px 0 72px} .dfeat-in{grid-template-columns:1fr;gap:36px;padding:0 24px} .dfeat h2{max-width:none} .dfeat-media img{aspect-ratio:4/3} .dfeat-pill{padding:11px 20px} .dfeat-pill .v{font-size:19px} .dfeat-pill--a{left:-3%;top:auto;bottom:14%} .dfeat-pill--b{right:-3%;top:12%} } /* Optional eyebrow, action and a wider photo for .dfeat — used where the section is a pitch rather than a price comparison, so there are no figure pills and the copy ends in a button. */ .dfeat-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 14px} .dfeat .btn{margin-top:28px} .dfeat--wide .dfeat-media img{aspect-ratio:16/10} /* ══════════ CASH OFFER — copy left, phone mockup right ══════════ The device is drawn in CSS rather than shipped as an image: it stays sharp at any density, the screen content is real text (so it is selectable and readable to a screen reader), and the numbers inside can be changed without re-exporting a mockup. The phone deliberately bleeds past the section bottom, which is what .cashoffer's overflow:hidden is for. */ /* margin, not padding: overflow:hidden clips at the padding box, so adding padding-bottom here would reveal more of the phone instead of spacing the section off the one below it. */ /* margin, not padding — overflow clips at the padding box, so padding here would reveal more of the phone instead of spacing the section below. Trimmed to 24px once .faq started supplying its own 80px top gap. */ .cashoffer{background:var(--white);padding:104px 0 0;margin-bottom:24px;overflow:hidden} .cashoffer-in{max-width:1460px;margin:0 auto;padding:0 40px; display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .cashoffer h2{font:700 clamp(30px,3.4vw,44px)/1.12 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0 0 20px} /* scoped to the copy column: a bare .cashoffer p also matched .phone-lede inside the mockup and zeroed its margin */ .cashoffer-in > div > p{font:400 16px/1.65 var(--font);color:var(--ink-2);margin:0} .cashoffer .btn{margin-top:28px} .phone{width:min(440px,100%);margin:0 auto -80px;background:#0b0c0e;border-radius:54px; padding:11px;box-shadow:0 40px 80px -30px rgba(16,24,40,.45)} .phone-screen{background:var(--white);border-radius:44px;overflow:hidden;padding-bottom:40px} .phone-status{position:relative;display:flex;align-items:center;justify-content:space-between; padding:15px 30px 6px;font:600 15px/1 var(--font);color:var(--ink)} /* the island is absolutely placed so the time and icons keep their own edges */ .phone-island{position:absolute;left:50%;top:11px;transform:translateX(-50%); width:112px;height:33px;background:#0b0c0e;border-radius:99px} .phone-icons{display:flex;align-items:center;gap:5px} .phone-icons svg{height:12px;width:auto;fill:var(--ink)} .phone-body{padding:26px 30px 0} .phone-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:40px} .phone-addr{font:600 15.5px/1 var(--font);color:var(--ink)} .phone-save{font:600 15.5px/1 var(--font);color:var(--brand);text-decoration:none} .phone-body h3{font:700 28px/1.24 var(--display);letter-spacing:-.028em;color:var(--ink);margin:0 0 18px} .phone-lede{font:400 15px/1.5 var(--font);color:var(--ink-2);margin:0 0 46px} .phone-label{display:block;font:600 17px/1 var(--font);color:var(--ink);margin:0 0 16px} .phone-field{display:flex;align-items:center;justify-content:space-between; border:1px solid var(--line);border-radius:12px;padding:22px 18px;margin-bottom:46px; font:400 17px/1 var(--font);color:var(--ink)} .phone-field svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} @media (max-width:900px){ .cashoffer{padding-top:64px} .cashoffer-in{grid-template-columns:1fr;gap:40px;padding:0 24px} .cashoffer h2{max-width:none} .phone{width:min(330px,100%);margin-bottom:-56px} } /* ══════════ APP FEATURE — copy left, tilted device on a blob ══════════ The device reuses .phone and its screen primitives, scaled and rotated as a whole so proportions stay exactly as they are on the cash-offer section. The blob behind it is a single asymmetric border-radius rather than an image, so it recolours with the palette and costs nothing to load. */ .appfeat{background:var(--white);padding:88px 0 96px} .appfeat-in{max-width:1460px;margin:0 auto;padding:0 40px; display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center} .appfeat-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 16px} .appfeat h2{font:700 clamp(28px,3.2vw,42px)/1.16 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 0 20px} .appfeat p{font:400 16px/1.65 var(--font);color:var(--ink-2);margin:0} .appfeat .btn{margin-top:28px} .appfeat-stage{position:relative;display:grid;place-items:center; min-height:660px;overflow:hidden} .appfeat-blob{position:absolute;inset:0;background:#e9e7e4; border-radius:52% 52% 10% 10% / 40% 40% 8% 8%} /* scaled and tilted as one unit — the screen keeps the cash-offer proportions */ .appfeat-phone{position:relative;z-index:2;transform:rotate(-7deg) scale(.66); transform-origin:center;box-shadow:0 50px 90px -34px rgba(16,24,40,.5)} /* list of saved rentals shown on the screen */ .plist-h{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px} .plist-title{font:700 30px/1 var(--display);letter-spacing:-.03em;color:var(--ink)} .plist-h svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.8} .pcard{border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:18px} .pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px} .pcard-name{font:600 15px/1.3 var(--font);color:var(--muted)} .pcard-tag{font:600 12px/1 var(--font);color:var(--ink-2);background:var(--wash); border-radius:99px;padding:7px 12px;white-space:nowrap} .pcard-addr{font:700 17px/1.35 var(--font);color:var(--ink);margin-bottom:8px} .pcard-meta{font:400 14px/1.4 var(--font);color:var(--muted);margin-bottom:18px} .pcard-btn{display:block;text-align:center;background:var(--ink);color:#fff; border-radius:12px;padding:15px;font:600 15px/1 var(--font)} @media (max-width:900px){ .appfeat{padding:64px 0 72px} .appfeat-in{grid-template-columns:1fr;gap:32px;padding:0 24px} .appfeat h2{max-width:none} .appfeat-stage{min-height:480px} .appfeat-phone{transform:rotate(-6deg) scale(.5)} .appfeat-blob{border-radius:44% 44% 10% 10% / 26% 26% 8% 8%} } /* ══════════ TEXT BLOCK ══════════ Centred eyebrow / headline / lede on white. No media, no buttons — a breather between heavy sections, or an intro to the one below it. Headline sits lighter than the sitewide 700: it runs large and centred, and at that size a heavy weight shouts. */ .textblock{background:var(--white);padding:104px 0 96px;text-align:center} .textblock-in{max-width:1460px;margin:0 auto;padding:0 40px} .textblock-eyebrow{font:400 17px/1.4 var(--font);color:var(--ink-2);margin:0 0 18px} .textblock h2{font:550 clamp(32px,4.4vw,56px)/1.14 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 auto;max-width:16ch} /* the only ch clamp allowed here — this section IS a centred measure, there is no grid column doing the job (see rule 1 in COMPONENTS.md) */ .textblock-lede{font:400 15.5px/1.62 var(--font);color:var(--ink-2); margin:26px auto 0;max-width:62ch} .textblock--tight{padding:80px 0 72px} .textblock--wash{background:var(--wash)} @media (max-width:900px){ .textblock{padding:64px 0 60px} .textblock-in{padding:0 24px} .textblock h2{max-width:none} } /* ══════════ PORTALS ══════════ Product cards for the signed-in apps. Each card carries a CSS-drawn window preview rather than a screenshot — sharp at any density, no image to keep in sync with the real UI, and nothing that pretends to be live data. */ .portals{background:var(--wash);padding:96px 0 104px} .portals-in{max-width:1460px;margin:0 auto;padding:0 40px} .portals-head{max-width:720px;margin-bottom:48px} .portals-eyebrow{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 14px} .portals-head h2{font:700 clamp(30px,3.4vw,44px)/1.1 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 0 14px} .portals-head p{font:400 17px/1.55 var(--font);color:var(--ink-2);margin:0} .portals-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .portal{background:var(--white);border:1px solid var(--line);border-radius:24px; overflow:hidden;display:flex;flex-direction:column} .portal-chrome{background:var(--wash);border-bottom:1px solid var(--line); padding:14px 16px 0;height:186px} .portal-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px} .portal-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block} .portal-bar i:first-child{background:var(--brand);opacity:.55} .portal-win{display:grid;grid-template-columns:52px 1fr;gap:10px;height:100%} .portal-side{display:flex;flex-direction:column;gap:7px;padding-top:2px} .portal-side span{height:7px;border-radius:3px;background:var(--line);display:block} .portal-side span:first-child{background:var(--brand);opacity:.5;width:80%} .portal-main{background:var(--white);border:1px solid var(--line);border-radius:10px 10px 0 0; border-bottom:0;padding:12px;display:flex;flex-direction:column;gap:9px} .portal-row{display:flex;align-items:center;gap:8px} .portal-row span{height:8px;border-radius:4px;background:var(--line);display:block} .portal-row span:first-child{width:34%} .portal-row span:last-child{width:18%;background:var(--brand);opacity:.35} .portal-row--wide span:first-child{width:56%} .portal-row--short span:first-child{width:24%} .portal-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1} .portal-label{font:600 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase; color:var(--brand);margin:0 0 12px} .portal-body h3{font:700 21px/1.28 var(--display);letter-spacing:-.024em;color:var(--ink);margin:0 0 10px} .portal-body > p{font:400 15.5px/1.6 var(--font);color:var(--ink-2);margin:0 0 18px} .portal-list{list-style:none;margin:0 0 22px;padding:0} .portal-list li{position:relative;padding-left:22px;margin-bottom:9px; font:400 15px/1.5 var(--font);color:var(--ink-2)} .portal-list li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px; border-left:1.8px solid var(--brand);border-bottom:1.8px solid var(--brand); transform:rotate(-45deg)} .portal-body a{margin-top:auto;align-self:flex-start; font:600 15px/1 var(--font);color:var(--brand);text-decoration:none} .portal-body a:hover{text-decoration:underline} @media (max-width:900px){ .portals{padding:64px 0 72px} .portals-in{padding:0 24px} .portals-grid{grid-template-columns:1fr;gap:20px} .portal-chrome{height:158px} } /* Button row in a split hero, where the page wants a single action instead of a search field (the join page asks agents to create a profile, not to type an address). Sits on the same rhythm as .search, which it replaces. */ .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .hero--split .hero-actions{margin-top:28px} /* ══════════ LIBRARY ══════════ Resource / guides section. A headed intro, a four-across grid of category cards each listing what is inside it, and a closing bar that carries the conversion. Built for "here is what comes with an account" — the card grid shows the value, the bar asks for the signup. */ .library{background:var(--white);padding:96px 0 104px} .library-in{max-width:1460px;margin:0 auto;padding:0 40px} .library-head{max-width:760px;margin-bottom:44px} .library-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 14px} .library-head h2{font:700 clamp(30px,3.4vw,44px)/1.1 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 0 14px} .library-head p{font:400 17px/1.55 var(--font);color:var(--ink-2);margin:0} .library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .lib{background:var(--wash);border-radius:20px;padding:28px 26px 30px; display:flex;flex-direction:column} .lib-badge{align-self:flex-start;font:600 11.5px/1 var(--font);letter-spacing:.09em; text-transform:uppercase;color:var(--brand);background:var(--brand-tint); border-radius:99px;padding:7px 12px;margin-bottom:18px} .lib h3{font:700 18.5px/1.3 var(--display);letter-spacing:-.022em;color:var(--ink);margin:0 0 10px} .lib > p{font:400 15px/1.55 var(--font);color:var(--ink-2);margin:0 0 18px} .lib-items{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);padding-top:16px} .lib-items li{font:400 14.5px/1.5 var(--font);color:var(--ink-2);margin-bottom:9px; padding-left:15px;position:relative} .lib-items li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px; border-radius:50%;background:var(--brand);opacity:.5} .lib-items li:last-child{margin-bottom:0} /* closing bar — the actual ask */ .library-cta{margin-top:24px;background:var(--ink);border-radius:20px; padding:32px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px} .library-cta h3{font:700 22px/1.3 var(--display);letter-spacing:-.024em;color:#fff;margin:0 0 6px} .library-cta p{font:400 15px/1.55 var(--font);color:rgba(255,255,255,.72);margin:0} .library-cta .btn{flex:none;background:var(--white);color:var(--ink);border-color:var(--white)} .library-cta .btn:hover{background:#eceef1} @media (max-width:1080px){ .library-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .library{padding:64px 0 72px} .library-in{padding:0 24px} .library-grid{grid-template-columns:1fr;gap:16px} .library-cta{flex-direction:column;align-items:flex-start;padding:26px 24px 28px} } /* ══════════ HUB HEAD ══════════ White masthead that curves into whatever follows — same device as the article head in blog.css, but living in style.css so any page can use it without pulling in the article stylesheet. */ .hubhead{background:var(--white);border-radius:0 0 40px 40px; padding:calc(var(--nav-h, 76px) + 72px) 0 88px} .hubhead-in{max-width:1460px;margin:0 auto;padding:0 40px} .hubhead h1{font:550 clamp(38px,5.3vw,72px)/1.1 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0;max-width:18ch} .hubhead p{font:400 17.5px/1.55 var(--font);color:var(--ink-2);margin:22px 0 0;max-width:60ch} .hubhead .hubhead-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 16px;max-width:none} /* ══════════ BLOGX — hub variant ══════════ The rail was built as a single per-page instance with hardcoded ids. On a hub page there are several, so .blogx--hub is wired by class *within its own section* instead, and each section declares its own data-tag. .blogx-bar is the row under the rail: arrows left, "See all" right. */ .blogx--hub{padding:56px 0 8px} .blogx--hub + .blogx--hub{padding-top:40px} .blogx--hub .blogx-head h2{font:700 clamp(24px,2.6vw,34px)/1.14 var(--display)} .blogx--hub .blogx-head{margin-bottom:24px;max-width:38ch} .blogx-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px} .blogx-bar .blogx-nav{margin:0;justify-content:flex-start} .blogx-seeall{font:600 15px/1 var(--font);color:var(--brand);text-decoration:none; background:none;border:0;padding:0;cursor:pointer;transition:opacity .18s} .blogx-seeall:hover{text-decoration:underline} /* "See all" expands the rail in place into a wrapping grid — no second page to build, and the cards keep their exact styling. */ .blogx.is-expanded .blogx-rail{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;row-gap:26px} .blogx.is-expanded .blogx-nav{display:none} .blogx.is-expanded .blogx-bar{justify-content:flex-end} .blogx-empty{font:400 15.5px/1.6 var(--font);color:var(--muted);margin:0} @media (max-width:1080px){ .blogx.is-expanded .blogx-rail{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:900px){ .hubhead{padding:calc(var(--nav-h, 76px) + 40px) 0 56px;border-radius:0 0 28px 28px} .hubhead-in{padding:0 24px} .hubhead h1{max-width:none} .blogx--hub{padding:40px 0 8px} .blogx.is-expanded .blogx-rail{grid-template-columns:1fr} } /* Optional standfirst under a hub rail heading. */ .blogx-sub{font:400 16px/1.55 var(--font);color:var(--ink-2);margin:12px 0 0} /* .lib-items normally holds plain text. On the resources hub the items are links, so they need the brand treatment rather than the browser default. */ .lib-items a{color:var(--ink-2);text-decoration:none;transition:color .16s} .lib-items a:hover{color:var(--brand);text-decoration:underline} /* On the hub the rails sit among sections on the 1460 measure, so they align to it. The 1520 full-bleed exists for the index, where .blogx is the only section of its kind and wider cards read better — here it would put every rail heading 26px left of the masthead. */ .blogx--hub .blogx-in{max-width:1460px} /* ══════════ CALCULATOR ══════════ Split layout: the form is the hero on the left, the result panel sits on the right and stays put while you fill the form in. Built for /home-value but nothing in it is home-value specific — any calculator can use it. Ids on the fields stay hv-* because the estimate script and the CalcCapture lead hook both address them by id. These classes only carry the styling. */ .calc{background:var(--white);padding:calc(var(--nav-h, 76px) + 64px) 0 96px} .calc-in{max-width:1460px;margin:0 auto;padding:0 40px} .calc-cols{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:56px;align-items:start} .calc-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 16px} .calc h1{font:550 clamp(34px,4.4vw,58px)/1.1 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0;max-width:none} .calc-lede{font:400 17.5px/1.55 var(--font);color:var(--ink-2);margin:20px 0 0;max-width:52ch} /* ── Form ──────────────────────────────────────────────────────────────── */ .calc-form{margin-top:36px;max-width:640px} .calc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .calc-row--full{grid-template-columns:1fr} .calc-legend{display:block;font:600 12px/1 var(--font);letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin:26px 0 14px} .calc-form > .calc-legend:first-child{margin-top:0} .calc-row--3{grid-template-columns:repeat(3,minmax(0,1fr))} .calc-field label{display:block;font:600 13.5px/1 var(--font);color:var(--ink);margin-bottom:8px} .calc-field input,.calc-field select,.calc-field textarea{width:100%;box-sizing:border-box; padding:14px 16px;border:1px solid var(--border-strong,#cbd5e0);border-radius:12px; font:400 15.5px/1.3 var(--font);color:var(--ink);background:var(--white); transition:border-color .18s,box-shadow .18s} .calc-field textarea{resize:vertical;min-height:120px;line-height:1.5;font-family:var(--font)} .calc-field input::placeholder,.calc-field textarea::placeholder{color:var(--faint)} .calc-field input:focus,.calc-field select:focus,.calc-field textarea:focus{outline:0;border-color:var(--ink); box-shadow:0 0 0 3px rgba(20,22,26,.07)} /* Replace the OS double-arrow with one clean chevron so the select matches the inputs instead of looking like a stray native control. */ .calc-field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23697180' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center} .calc-field select:invalid,.calc-field select option[value=""]{color:var(--faint)} .calc-more{margin:4px 0 20px;border-top:1px solid var(--line);padding-top:18px} .calc-more summary{cursor:pointer;font:600 14.5px/1 var(--font);color:var(--brand); list-style:none;display:flex;align-items:center;gap:8px} .calc-more summary::-webkit-details-marker{display:none} .calc-more summary::before{content:"+";font-size:16px;line-height:1} .calc-more[open] summary::before{content:"–"} .calc-note{font:400 13.5px/1.6 var(--font);color:var(--muted);margin:20px 0 0;max-width:56ch} /* ── Result panel ──────────────────────────────────────────────────────── */ .calc-out{background:var(--wash);border-radius:24px;padding:36px 34px 38px; position:sticky;top:calc(var(--nav-h, 76px) + 24px)} .calc-out-label{font:600 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin:0 0 14px} .calc-val{font:700 clamp(38px,4.6vw,56px)/1.05 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0} .calc-range{font:400 15px/1.5 var(--font);color:var(--ink-2);margin:12px 0 0} .calc-eq{font:600 15px/1.5 var(--font);color:var(--brand);margin:10px 0 0} .calc-basis{font:400 13.5px/1.55 var(--font);color:var(--muted);margin:14px 0 0} .calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} /* the panel starts as a placeholder rather than hidden, so the column has shape before the first estimate instead of the page jumping when it appears */ .calc-out--idle .calc-val{color:var(--faint)} .calc-out--idle .calc-actions{display:none} .calc-err{font:500 14.5px/1.5 var(--font);color:var(--brand);margin:14px 0 0} @media (max-width:1080px){ .calc-cols{grid-template-columns:1fr;gap:36px} .calc-out{position:static} } @media (max-width:900px){ .calc{padding:calc(var(--nav-h, 76px) + 32px) 0 72px} .calc-in{padding:0 24px} .calc-row{grid-template-columns:1fr;gap:14px;margin-bottom:14px} .calc-out{padding:28px 24px 30px} } /* ── Calculator extensions ─────────────────────────────────────────────── Everything the five calculators need beyond the home-value shape. Named .calc-* deliberately: these are parts of ONE template, not five bespoke pages. Reach for these before writing anything new. .calc-help inline "why do you need this" tooltip on a field label .calc-unit $ / % switch inside a label .calc-lines labelled rows under the headline number (the breakdown) .calc-verdict dark banner stating the answer, above the number .calc-picks two-or-three option cards to compare side by side .calc-table year-by-year projection .calc-people repeatable person/row list with an add button */ /* label furniture */ .calc-field label{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .calc-help{position:relative;display:inline-flex} .calc-help button{width:16px;height:16px;padding:0;border-radius:50%;cursor:help; border:1px solid var(--line);background:var(--white);color:var(--muted); font:700 10px/1 var(--font);display:grid;place-items:center} /* display:none, not visibility:hidden. A hidden-but-laid-out 250px tooltip still contributes to scroll width, and on a help icon near the right edge of the form column that alone pushes the whole page sideways. */ .calc-help span{display:none;position:absolute;top:calc(100% + 8px);z-index:20;width:250px; background:var(--ink);color:#fff;border-radius:10px;padding:11px 13px; font:400 12.5px/1.5 var(--font);pointer-events:none} /* anchored to the icon's right edge, so a tooltip late in a label opens inward instead of off the side of the page */ .calc-help span{right:0} .calc-help:hover span,.calc-help.open span,.calc-help button:focus + span{display:block} .calc-unit{display:inline-flex;padding:2px;gap:2px;background:var(--wash);border-radius:8px; margin-left:auto} .calc-unit button{border:0;background:transparent;cursor:pointer;padding:5px 10px;border-radius:6px; font:600 12px/1 var(--font);color:var(--ink-2)} .calc-unit button.active{background:var(--white);color:var(--brand); box-shadow:0 1px 2px rgba(16,24,40,.12)} /* The adornment sits inside the input, so the input needs padding on that side. Which side depends on the unit: currency leads ($ 650,000), rate and term trail (6.5 %, 30 yrs). Markup order decides it — a before the input renders left, after it renders right — so the CSS keys off position rather than requiring every page to add a modifier class. */ .calc-field .calc-adorn{position:relative;display:block} .calc-field .calc-adorn > span{position:absolute;top:50%;transform:translateY(-50%); font:400 15px/1 var(--font);color:var(--muted);pointer-events:none} .calc-field .calc-adorn > span:first-child{left:14px} .calc-field .calc-adorn > span:last-child{right:14px} .calc-field .calc-adorn > span:first-child ~ input{padding-left:30px} .calc-field .calc-adorn > input:has(+ span){padding-right:44px} /* breakdown rows */ .calc-lines{margin-top:26px;border-top:1px solid var(--line);padding-top:18px} .calc-lines div{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:9px 0;font:400 14.5px/1.5 var(--font);color:var(--ink-2)} .calc-lines div span:last-child{font-weight:600;color:var(--ink)} .calc-lines div.is-total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px; font-weight:700;color:var(--ink)} .calc-lines div.is-muted span{color:var(--muted);font-weight:400} /* verdict banner */ .calc-verdict{background:var(--ink);border-radius:18px;padding:24px 26px;margin-bottom:24px} /* .vk/.vh/.vs are the kicker/headline/sub inside a verdict. The markup keeps them as divs (see the transformer note), so these are class selectors rather than tag ones. */ .calc-verdict p:first-child,.calc-verdict .vk{font:600 11.5px/1 var(--font);letter-spacing:.11em; text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 10px} .calc-verdict h2,.calc-verdict .vh{font:700 25px/1.2 var(--display);letter-spacing:-.026em; color:#fff;margin:0} .calc-verdict p:last-child,.calc-verdict .vs{font:400 14.5px/1.55 var(--font); color:rgba(255,255,255,.75);margin:9px 0 0} /* comparable option cards */ .calc-picks{display:grid;gap:12px;margin-top:22px} .calc-pick{background:var(--white);border:1px solid var(--line);border-radius:16px; padding:18px 20px} .calc-pick.is-best{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .calc-pick h3{font:700 16px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 4px} .calc-pick p{font:400 14px/1.5 var(--font);color:var(--ink-2);margin:0} .calc-pick b{font:700 20px/1.2 var(--display);letter-spacing:-.024em;color:var(--ink); display:block;margin-top:8px} .calc-pick .tag{display:inline-block;font:600 10.5px/1 var(--font);letter-spacing:.09em; text-transform:uppercase;color:var(--brand);background:var(--brand-tint); border-radius:99px;padding:6px 9px;margin-bottom:10px} /* projection table */ .calc-table{width:100%;border-collapse:collapse;margin-top:22px; font:400 13.5px/1.5 var(--font);color:var(--ink-2)} .calc-table th,.calc-table td{text-align:right;padding:9px 8px;border-bottom:1px solid var(--line)} .calc-table th:first-child,.calc-table td:first-child{text-align:left} .calc-table th{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.04em; text-transform:uppercase} .calc-table tr.is-flip td{color:var(--brand);font-weight:600} .calc-tablewrap{max-height:300px;overflow-y:auto;margin-top:6px} /* repeatable rows */ .calc-people{display:grid;gap:10px;margin-bottom:14px} .calc-person{display:grid;grid-template-columns:minmax(0,1fr) 130px 34px;gap:8px;align-items:center} .calc-person input{width:100%;box-sizing:border-box;padding:12px 13px;border-radius:10px; border:1px solid var(--border-strong,#cbd5e0);font:400 14.5px/1.3 var(--font);color:var(--ink)} .calc-person button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line); background:var(--white);color:var(--muted);cursor:pointer;font:400 17px/1 var(--font)} .calc-person button:hover{border-color:var(--brand);color:var(--brand)} .calc-add{border:1px dashed var(--line);background:none;border-radius:10px;width:100%; padding:12px;cursor:pointer;font:600 14px/1 var(--font);color:var(--brand)} .calc-add:hover{border-color:var(--brand);background:var(--brand-tint)} .calc-share{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:18px 0 12px; background:var(--line)} .calc-share i{display:block;height:100%} @media (max-width:900px){ .calc-person{grid-template-columns:minmax(0,1fr) 100px 34px} .calc-verdict{padding:20px 20px} } /* ── Calculator result furniture ───────────────────────────────────────── Two side-by-side totals, and the short class names the calculator JS emits into its own containers (.yby-*, .oh/.on/.obadge, .ln, .bname/.bamt/.rm, .ph/.pn/.pp/.dot). Scoped under .calc-out so these deliberately terse names cannot leak into the rest of the site. */ .calc-cells{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px} .calc-cell{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .calc-cell.win{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .calc-cell .lbl{font:600 11.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin:0 0 8px} .calc-cell .num{font:700 22px/1.15 var(--display);letter-spacing:-.026em;color:var(--ink);margin:0} .calc-cell .sub{font:400 12.5px/1.4 var(--font);color:var(--muted);margin:5px 0 0} .calc-out .yby-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center; padding:5px 0;font:400 12.5px/1.3 var(--font);color:var(--ink-2)} .calc-out .yby-row.break{color:var(--brand);font-weight:600} .calc-out .yby-bars{display:grid;gap:3px} .calc-out .yby-bar{height:7px;border-radius:99px;background:var(--line);min-width:2px} .calc-out .yby-bar.rent{background:var(--faint)} .calc-out .yby-bar.own{background:var(--brand)} .calc-out .bl{font:400 11px/1 var(--font);color:var(--muted)} .calc-out .oh{font:700 15.5px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 4px} .calc-out .on{font:700 20px/1.2 var(--display);letter-spacing:-.024em;color:var(--ink)} .calc-out .obadge{display:inline-block;font:600 10.5px/1 var(--font);letter-spacing:.09em; text-transform:uppercase;color:var(--brand);background:var(--brand-tint);border-radius:99px; padding:6px 9px;margin-bottom:9px} .calc-out .ln{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:8px 0;font:400 14px/1.5 var(--font);color:var(--ink-2)} .calc-out .ln span:last-child{font-weight:600;color:var(--ink)} .calc-out .ln.hi{color:var(--brand)} .calc-out .ln.hi span:last-child{color:var(--brand)} .calc-out .ph{display:flex;align-items:center;gap:9px;font:600 13.5px/1.3 var(--font);color:var(--ink)} .calc-out .pn{flex:1;min-width:0} .calc-out .pp{font:400 13px/1.3 var(--font);color:var(--muted)} .calc-out .dot,.calc-out .cdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--brand)} .calc-out .gain{color:var(--brand);font-weight:600} /* ── Calculator chart ──────────────────────────────────────────────────── A calculator whose answer is a trend, not a number, gets a chart card below the form instead of cramming it into the result panel. Same shell language as .calc-out (wash fill, 24px radius) at full width. */ .calc-chart{background:var(--white);padding:0 0 88px} .calc-chart-in{max-width:1460px;margin:0 auto;padding:0 40px} .calc-chart-card{background:var(--wash);border-radius:24px;padding:34px 34px 36px} .calc-chart-card h2{font:700 20px/1.3 var(--display);letter-spacing:-.022em;color:var(--ink); margin:0 0 6px;display:flex;align-items:center;gap:10px} .calc-chart-card h2 svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:2} .calc-chart-legend{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 20px; font:400 13px/1.4 var(--font);color:var(--muted)} .calc-chart-legend span{display:inline-flex;align-items:center;gap:7px} .calc-chart-legend i{width:11px;height:11px;border-radius:3px;display:inline-block} @media (max-width:900px){ .calc-chart{padding:0 0 64px} .calc-chart-in{padding:0 24px} .calc-chart-card{padding:24px 22px 26px} } /* ── Calculator matrix ─────────────────────────────────────────────────── Compact repeated input rows under one header — the buydown points table. Too dense for a stack of .calc-field blocks, so it gets its own grid. */ .calc-matrix-head,.calc-matrix-row{display:grid;grid-template-columns:28px 1fr 1fr;gap:10px; align-items:center} .calc-matrix-head{font:600 11.5px/1 var(--font);letter-spacing:.07em;text-transform:uppercase; color:var(--muted);margin-bottom:10px} .calc-matrix-row{margin-bottom:10px} .calc-matrix-row .oi{font:700 14px/1 var(--display);color:var(--muted);text-align:center} .calc-matrix-row .calc-adorn input{width:100%;box-sizing:border-box;padding:12px 14px; border:1px solid var(--border-strong,#cbd5e0);border-radius:10px; font:400 14.5px/1.3 var(--font);color:var(--ink);background:var(--white)} .calc-matrix-row .calc-adorn input:focus{outline:0;border-color:var(--ink)} .calc-hint{font:400 13.5px/1.55 var(--font);color:var(--muted);margin:-4px 0 16px} /* ── Calculator panel card ─────────────────────────────────────────────── A wash card below the calculator for a block that needs explaining as well as showing — the 2-1 temporary buydown, say. Shares the .calc-chart-card shell; adds a 3-up cell grid and a summary strip. */ .calc-panel-lede{font:400 15.5px/1.65 var(--font);color:var(--ink-2);margin:0 0 22px;max-width:70ch} .calc-cells--3{grid-template-columns:repeat(3,minmax(0,1fr))} .calc-cell .ty{font:600 11.5px/1 var(--font);letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin-bottom:9px} .calc-cell .tr{font:700 22px/1.15 var(--display);letter-spacing:-.026em;color:var(--ink)} .calc-cell .tp{font:400 14px/1.4 var(--font);color:var(--ink-2);margin-top:4px} .calc-cell .tsave{font:600 13px/1.4 var(--font);color:var(--brand);margin-top:6px} .calc-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px; border-top:1px solid var(--line);padding-top:18px} .calc-sum .ts .l{font:400 13px/1.4 var(--font);color:var(--muted)} .calc-sum .ts .v{font:700 19px/1.2 var(--display);letter-spacing:-.024em;color:var(--ink);margin-top:4px} @media (max-width:900px){ .calc-cells--3,.calc-sum{grid-template-columns:1fr} } /* ── Calculator segmented control ──────────────────────────────────────── Full-width two-or-three way switch (how should the cost split?). Same language as .calc-unit, sized for a standalone row rather than a label. */ .calc-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px; background:var(--wash);border-radius:12px;margin-bottom:18px} .calc-seg button{border:0;background:transparent;cursor:pointer;padding:11px 14px;border-radius:9px; font:600 13.5px/1 var(--font);color:var(--ink-2);transition:background .18s,color .18s} .calc-seg button.active{background:var(--white);color:var(--brand); box-shadow:0 1px 3px rgba(16,24,40,.12)} /* ── Remaining calculator JS classes ───────────────────────────────────── Emitted by the calculators into their own containers. Scoped so these terse names stay inside a result panel or chart card. */ .calc-out .rc-hd{margin-bottom:4px} .calc-out .rc-hd .k{font:600 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-bottom:12px} .calc-out .rc-hd .v{font:700 clamp(34px,4vw,48px)/1.05 var(--display);letter-spacing:-.034em; color:var(--ink)} .calc-out .rc-body{margin-top:22px} .calc-out .s{font:400 13px/1.5 var(--font);color:var(--muted)} .calc-out .dp-status{font:400 13px/1.5 var(--font);color:var(--muted);margin-top:6px} .calc-out .sharebar,.calc-form .sharebar{display:flex;height:10px;border-radius:99px; overflow:hidden;margin:16px 0 12px;background:var(--line)} /* Repeatable co-buyer rows, built in JS as .buyer-row > .bname + .input + .rm. These live in the FORM, not the result panel — scoping them to .calc-out only is why they first rendered as a stack of bare inputs. */ .calc-form .buyer-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 38px;gap:8px; align-items:center;margin-bottom:8px} .calc-form .buyer-row .bname,.calc-form .buyer-row .bamt{width:100%;box-sizing:border-box; border:1px solid var(--border-strong,#cbd5e0);border-radius:10px;padding:12px 13px; font:400 14.5px/1.3 var(--font);color:var(--ink);background:var(--white)} .calc-form .buyer-row .bname:focus,.calc-form .buyer-row .bamt:focus{outline:0;border-color:var(--ink)} .calc-form .buyer-row .input{position:relative;display:block} .calc-form .buyer-row .input .adorn{position:absolute;left:13px;top:50%;transform:translateY(-50%); font:400 14.5px/1 var(--font);color:var(--muted);pointer-events:none} .calc-form .buyer-row .input .bamt{padding-left:28px;border-radius:10px} .calc-form .buyer-row .rm{width:38px;height:40px;border-radius:10px;border:1px solid var(--line); background:var(--white);color:var(--muted);cursor:pointer;font:400 18px/1 var(--font)} .calc-form .buyer-row .rm:hover:not(:disabled){border-color:var(--brand);color:var(--brand)} .calc-form .buyer-row .rm:disabled{opacity:.35;cursor:default} .calc-form .add-btn,.calc-out .add-btn{display:inline-flex;align-items:center;justify-content:center; gap:8px;border:1px dashed var(--line);background:none;border-radius:10px;width:100%; padding:12px;cursor:pointer;font:600 14px/1 var(--font);color:var(--brand)} /* the button ships an inline svg with no intrinsic size — unconstrained it expands to fill the column as a 500px plus sign */ .calc-form .add-btn svg,.calc-out .add-btn svg{width:14px;height:14px;flex:none; stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round} .calc-form .add-btn:hover{border-color:var(--brand);background:var(--brand-tint)} .calc-form .add-btn:disabled{opacity:.45;cursor:default} .calc-out .opt-card{background:var(--white);border:1px solid var(--line);border-radius:14px; padding:16px 18px;margin-bottom:10px} .calc-out .opt-card.best{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .calc-chart .yn{font:600 12.5px/1 var(--font);color:var(--muted);text-align:right} .calc-chart .yby-row.cheaper .yby-bar.own{background:#2f855a} /* ══════════ WIZARD ══════════ Multi-step lead form: steps on the left, photo on the right. The photo is a sticky full-height panel so the column does not shift as steps change height. One step is visible at a time (.wz-step.is-on). Steps are hidden with display:none rather than visibility, so a hidden step's fields are removed from layout AND skipped by tab order — a visually-hidden step you can still tab into is the classic broken multi-step form. */ .wz{background:var(--white);padding:calc(var(--nav-h, 76px) + 56px) 0 0;min-height:100vh} .wz-in{max-width:1460px;margin:0 auto;padding:0 40px 88px; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start} .wz-col{max-width:520px} .wz-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 14px} .wz h1{font:550 clamp(30px,3.6vw,46px)/1.12 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 0 14px;max-width:none} .wz-lede{font:400 17px/1.55 var(--font);color:var(--ink-2);margin:0 0 30px} /* progress */ .wz-bar{height:4px;border-radius:99px;background:var(--line);margin-bottom:10px;overflow:hidden} .wz-bar i{display:block;height:100%;background:var(--brand);border-radius:99px; transition:width .35s var(--ease)} .wz-count{font:600 12px/1 var(--font);letter-spacing:.09em;text-transform:uppercase; color:var(--muted);margin:0 0 26px} .wz-step{display:none} .wz-step.is-on{display:block} .wz-step h2{font:700 22px/1.3 var(--display);letter-spacing:-.024em;color:var(--ink);margin:0 0 8px} .wz-step > p{font:400 15.5px/1.6 var(--font);color:var(--ink-2);margin:0 0 22px} /* choice tiles */ .wz-opts{display:grid;gap:10px;margin-bottom:8px} .wz-opts--2{grid-template-columns:1fr 1fr} .wz-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer; background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px; font:600 15px/1.35 var(--font);color:var(--ink);transition:border-color .18s,background .18s} .wz-opt:hover{border-color:var(--ink)} .wz-opt.is-sel{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)} .wz-opt small{display:block;font:400 13px/1.4 var(--font);color:var(--muted);margin-top:3px} .wz-opt.is-sel small{color:var(--brand)} .wz-field{margin-bottom:16px} .wz-field label{display:block;font:600 13.5px/1 var(--font);color:var(--ink);margin-bottom:8px} .wz-field input,.wz-field select,.wz-field textarea{width:100%;box-sizing:border-box; padding:15px 16px;border:1px solid var(--border-strong,#cbd5e0);border-radius:12px; font:400 15.5px/1.35 var(--font);color:var(--ink);background:var(--white); transition:border-color .18s,box-shadow .18s} .wz-field textarea{resize:vertical;min-height:96px} .wz-field input:focus,.wz-field select:focus,.wz-field textarea:focus{outline:0; border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.07)} .wz-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .wz-nav{display:flex;align-items:center;gap:12px;margin-top:26px} .wz-back{background:none;border:0;cursor:pointer;font:600 14.5px/1 var(--font);color:var(--muted); padding:14px 4px} .wz-back:hover{color:var(--ink)} .wz-nav .btn{flex:1;justify-content:center} .wz-err{display:none;font:500 14.5px/1.5 var(--font);color:var(--brand); background:var(--brand-tint);border-radius:12px;padding:12px 15px;margin-top:16px} .wz-err.is-on{display:block} .wz-fine{font:400 13px/1.6 var(--font);color:var(--muted);margin:18px 0 0} /* right-hand photo */ .wz-figure{position:sticky;top:calc(var(--nav-h, 76px) + 40px);border-radius:24px;overflow:hidden; aspect-ratio:4/5;background:var(--wash)} .wz-figure img{width:100%;height:100%;object-fit:cover;display:block} .wz-quote{position:absolute;left:24px;right:24px;bottom:24px;background:rgba(255,255,255,.94); backdrop-filter:blur(10px);border-radius:16px;padding:20px 22px} .wz-quote p{font:500 15px/1.5 var(--font);color:var(--ink);margin:0} .wz-quote span{display:block;font:400 13px/1.4 var(--font);color:var(--muted);margin-top:8px} /* done */ .wz-done{text-align:center;padding:24px 0} .wz-done .tick{width:56px;height:56px;border-radius:50%;background:var(--brand-tint); display:grid;place-items:center;margin:0 auto 22px} .wz-done .tick svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} @media (max-width:1080px){ .wz-in{grid-template-columns:1fr;gap:40px} /* relative (not static) so the absolutely-positioned .wz-quote stays anchored to the image instead of escaping onto the form below */ .wz-figure{position:relative;aspect-ratio:16/10;order:-1} .wz-col{max-width:none} } @media (max-width:900px){ .wz{padding:calc(var(--nav-h, 76px) + 32px) 0 0} .wz-in{padding:0 24px 64px} .wz-opts--2,.wz-row{grid-template-columns:1fr} } /* ══════════ SEARCH ══════════ Global search: masthead with the query box, then grouped results. The result classes (.search-group, .search-hit, .h-name, .h-meta, .h-sub, .search-empty) are emitted SERVER-SIDE by the /search route in server.js — the page ships placeholders and the route fills them. Renaming any of them here silently unstyles the results, so they are styled as-is. */ .srch{background:var(--white);padding:calc(var(--nav-h, 76px) + 56px) 0 0} .srch-in{max-width:1460px;margin:0 auto;padding:0 40px} .srch-head{max-width:720px;margin-bottom:34px} .srch-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 14px} .srch-head h1{font:550 clamp(32px,4vw,50px)/1.1 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0;max-width:none} .srch-form{display:flex;align-items:center;gap:8px;max-width:640px;margin:26px 0 0; background:var(--white);border:1px solid var(--border-strong,#cbd5e0);border-radius:99px; padding:5px 6px 5px 22px;transition:border-color .2s,box-shadow .2s} .srch-form:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.07)} .srch-form input{flex:1;min-width:0;border:0;outline:0;background:none;padding:14px 0; font:400 16px/1.3 var(--font);color:var(--ink)} .srch-form input::placeholder{color:var(--faint)} .srch-form button{flex:none;border:0;border-radius:99px;background:var(--brand);color:#fff; cursor:pointer;padding:13px 24px;font:600 14.5px/1 var(--font)} .srch-form button:hover{background:var(--brand-hover)} /* ── Results (markup comes from the server) ── */ .srch-results{padding:8px 0 88px;max-width:820px} .search-group{margin-bottom:38px} .search-group h2{font:600 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)} .search-hit{display:block;text-decoration:none;padding:16px 18px;margin:0 -18px;border-radius:14px; transition:background .16s} .search-hit:hover{background:var(--wash)} .search-hit > div:first-child{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .h-name{font:700 16.5px/1.35 var(--display);letter-spacing:-.018em;color:var(--ink)} .search-hit:hover .h-name{color:var(--brand)} .h-meta{font:400 13.5px/1.4 var(--font);color:var(--muted)} .h-sub{font:400 14.5px/1.55 var(--font);color:var(--ink-2);margin-top:5px} .search-empty{font:400 16.5px/1.6 var(--font);color:var(--ink-2);margin:0; background:var(--wash);border-radius:16px;padding:26px 28px} @media (max-width:900px){ .srch{padding:calc(var(--nav-h, 76px) + 32px) 0 0} .srch-in{padding:0 24px} .srch-form{padding-left:18px} .srch-form button{padding:12px 18px} .search-hit{margin:0;padding:14px 0} .search-hit:hover{background:none} } /* ── Library card action ───────────────────────────────────────────────── A .lib card that ends in an action rather than a link list. */ .lib-cta{margin-top:auto;padding-top:18px} .lib-cta .btn{width:100%;justify-content:center} .lib-meta{font:400 13px/1.5 var(--font);color:var(--muted);margin:0 0 14px} /* ── Upload ────────────────────────────────────────────────────────────── Drag-or-click file field. Used by the careers application; generic enough for any form that takes a document. */ .upload{border:1.5px dashed var(--line);border-radius:14px;padding:26px 22px;text-align:center; cursor:pointer;transition:border-color .18s,background .18s} .upload:hover,.upload.is-over{border-color:var(--brand);background:var(--brand-tint)} .upload.is-done{border-style:solid;border-color:var(--brand);background:var(--brand-tint);text-align:left} .upload input[type=file]{display:none} .upload-primary{font:600 15px/1.4 var(--font);color:var(--ink);margin:0} .upload.is-done .upload-primary{color:var(--brand)} .upload-secondary{font:400 13.5px/1.5 var(--font);color:var(--muted);margin:6px 0 0} .upload-remove{background:none;border:0;cursor:pointer;font:600 13px/1 var(--font); color:var(--brand);text-decoration:underline;padding:8px 0 0} /* Anchored sections must clear the fixed bar, or a jump link lands with the heading hidden underneath it. */ [id]:target,.faq[id],.hiw[id],.library[id]{scroll-margin-top:calc(var(--nav-h, 76px) + 24px)} /* Mirror of .dfeat — media left, copy right. Uses `direction` rather than reordering the markup so the copy stays first in the DOM (and in the reading order for screen readers and keyboard users) regardless of which side the photo lands on. */ .dfeat--flip .dfeat-in{direction:rtl} .dfeat--flip .dfeat-in > *{direction:ltr} /* the pills are positioned against the media edges, so they swap too */ .dfeat--flip .dfeat-pill--a{left:auto;right:-7%} .dfeat--flip .dfeat-pill--b{right:auto;left:-5%} /* Two .dfeat sections back to back would otherwise read as one long band — they share a background. Kill the doubled padding and add a real gap. */ .dfeat + .dfeat{padding-top:0} .dfeat + .dfeat .dfeat-in{padding-top:72px;border-top:1px solid var(--line)} @media (max-width:900px){ .dfeat--flip .dfeat-in{direction:ltr} .dfeat + .dfeat .dfeat-in{padding-top:48px} } /* ══════════ AGENT GRID ══════════ Directory cards + pagination. New because nothing existing carries a photo, a name, badges and stats in one card — .stepcard is editorial, .lib is a list. Everything inside reuses site tokens. */ .agrid{background:var(--wash);padding:56px 0 96px} .agrid-in{max-width:1460px;margin:0 auto;padding:0 40px} .agrid-bar{margin-bottom:26px} .agrid-count{font:400 15px/1.4 var(--font);color:var(--muted);margin:14px 0 0} /* Search + filter toolbar */ .agrid-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .agrid-search{position:relative;flex:1 1 300px;min-width:220px} .agrid-search-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px; stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .agrid-search input{width:100%;box-sizing:border-box;height:48px;border:1px solid var(--line);border-radius:99px; background:var(--white);padding:0 18px 0 46px;font:400 15px/1 var(--font);color:var(--ink);transition:border-color .16s,box-shadow .16s} .agrid-search input::placeholder{color:var(--muted)} .agrid-search input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(20,22,26,.05)} .agrid-select{height:48px;box-sizing:border-box;border:1px solid var(--line);border-radius:99px;background:var(--white); padding:0 40px 0 18px;font:500 14.5px/1 var(--font);color:var(--ink);cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 16px center} .agrid-select:focus{outline:0;border-color:var(--ink)} @media (max-width:640px){ .agrid-select{flex:1 1 44%} } .agrid-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .acard{background:var(--white);border:1px solid var(--line);border-radius:20px; padding:26px 26px 24px;display:flex;flex-direction:column;text-decoration:none; transition:border-color .18s,box-shadow .22s var(--ease),transform .22s var(--ease)} .acard:hover{border-color:var(--ink);box-shadow:var(--sh-md);transform:translateY(-2px)} .acard-top{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;margin-bottom:16px} .acard-photo{width:60px;height:60px;border-radius:50%;flex:none;object-fit:cover; background:var(--wash);display:grid;place-items:center; font:700 20px/1 var(--display);color:var(--ink-2);overflow:hidden} .acard-photo img{width:100%;height:100%;object-fit:cover;display:block} /* both are in the card markup (the whole card is an , so no block elements inside) — without display:block they sit on one line and their margins are ignored entirely */ .acard-name{display:block;font:700 17.5px/1.25 var(--display);letter-spacing:-.02em; color:var(--ink);margin:0} .acard-firm{display:block;font:400 14px/1.4 var(--font);color:var(--muted);margin:5px 0 0} .acard-top > span:last-child{min-width:0} .acard-bio{display:-webkit-box} .acard-bio{font:400 14.5px/1.6 var(--font);color:var(--ink-2);margin:0 0 16px;text-align:left; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .acard-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;justify-content:flex-start} .acard-tag{font:500 12.5px/1 var(--font);color:var(--brand);background:var(--brand-tint); border-radius:99px;padding:7px 11px} .acard-foot{margin-top:auto;padding-top:15px;border-top:1px solid var(--line); display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-start} .acard-stat{font:400 13px/1.3 var(--font);color:var(--muted)} .acard-stat b{display:block;font:700 15px/1.2 var(--display);color:var(--ink);letter-spacing:-.015em} .acard-badge{font:600 11.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase; color:var(--brand);background:var(--brand-tint);border-radius:99px;padding:6px 10px} .acard-badge--muted{color:#92600e;background:#fdf0d5} .acard-badge--cr{color:var(--text-on-brand,#fff);background:var(--brand)} /* ── Pagination ── */ .apage{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:40px} .apage-info{font:400 14.5px/1 var(--font);color:var(--muted);margin-right:auto} .apage-btn{display:inline-flex;align-items:center;gap:8px;background:var(--white); border:1px solid var(--line);border-radius:99px;padding:12px 22px;cursor:pointer; font:600 14.5px/1 var(--font);color:var(--ink);transition:border-color .18s,opacity .18s} .apage-btn:hover:not([disabled]){border-color:var(--ink)} .apage-btn[disabled]{opacity:.4;cursor:default} .apage-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .agrid-empty{background:var(--white);border:1px solid var(--line);border-radius:20px; padding:48px 40px;text-align:center} .agrid-empty p{font:400 16px/1.6 var(--font);color:var(--ink-2);margin:0 0 20px} @media (max-width:1080px){ .agrid-grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .agrid{padding:40px 0 72px} .agrid-in{padding:0 24px} .agrid-grid{grid-template-columns:1fr} .apage{flex-wrap:wrap} .apage-info{margin-right:0;width:100%} } /* ══════════ AUTH ══════════ Narrow centred column for sign-in / create-account. Nothing existing does a single centred form column, so this is its own component. */ .auth{background:var(--white);min-height:100vh;padding:calc(var(--nav-h, 76px) + 72px) 20px 96px; display:flex;justify-content:center;align-items:flex-start} .auth-card{width:100%;max-width:424px} .auth-card h1{font:550 clamp(30px,3.4vw,40px)/1.14 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 0 14px;max-width:none} .auth-legal{font:400 13.5px/1.6 var(--font);color:var(--ink-2);margin:0 0 30px} .auth-legal a{color:var(--brand);text-decoration:none} .auth-legal a:hover{text-decoration:underline} .auth-field{margin-bottom:16px} .auth-field label{display:block;font:600 14px/1 var(--font);color:var(--ink);margin-bottom:8px} .auth-field input{width:100%;box-sizing:border-box;padding:15px 16px; border:1px solid var(--border-strong,#cbd5e0);border-radius:12px; font:400 15.5px/1.3 var(--font);color:var(--ink);background:var(--white); transition:border-color .18s,box-shadow .18s} .auth-field input::placeholder{color:var(--faint)} .auth-field input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.07)} .auth-submit{width:100%;justify-content:center;padding:16px 26px;margin-top:6px} /* second action, visually subordinate to the primary submit */ .auth-alt{width:100%;justify-content:center;padding:15px 26px;margin-top:12px} .auth-links{text-align:center;margin-top:22px} .auth-links a{font:600 14.5px/1.6 var(--font);color:var(--brand);text-decoration:none} .auth-links a:hover{text-decoration:underline} .auth-sep{display:flex;align-items:center;gap:16px;margin:26px 0; font:400 14px/1 var(--font);color:var(--muted)} .auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)} .auth-note{font:400 13.5px/1.6 var(--font);color:var(--muted);text-align:center;margin:20px 0 0} /* error / status line above the form */ .auth-alert{display:none;font:500 14.5px/1.5 var(--font);border-radius:12px; padding:13px 16px;margin-bottom:18px} .auth-alert.error{display:block;background:var(--brand-tint);color:var(--brand)} @media (max-width:900px){ .auth{padding:calc(var(--nav-h, 76px) + 40px) 20px 64px} } /* ══════════ AD SLOT ══════════ Fed by GET /api/ads/slot/:key. The element ships empty and hidden; the fetcher unhides it only when a booking comes back, so an unsold slot leaves no gap in the article. Labelled, because an ad in an article that isn't marked as one is the thing readers rightly object to. */ .adslot{display:none;margin:36px 0;border:1px solid var(--line);border-radius:16px; overflow:hidden;background:var(--wash)} .adslot.is-filled{display:block} .adslot-label{font:600 10.5px/1 var(--font);letter-spacing:.12em;text-transform:uppercase; color:var(--faint);padding:12px 16px 0} .adslot a{display:block;text-decoration:none;padding:12px 16px 16px} .adslot img{width:100%;height:auto;border-radius:10px;display:block;margin-bottom:12px} .adslot-headline{font:700 16.5px/1.35 var(--display);letter-spacing:-.018em;color:var(--ink);margin:0} .adslot-body{font:400 14.5px/1.55 var(--font);color:var(--ink-2);margin:6px 0 0} .adslot-who{font:400 12.5px/1 var(--font);color:var(--muted);margin:10px 0 0} .adslot a:hover .adslot-headline{color:var(--brand)} /* rail variant — narrower, sits under the sticky capture card */ .adslot--rail{margin:20px 0 0} /* Leaderboard variants (top of article + footer) read as banners. */ .adslot--leader{margin:24px 0} /* House "Advertise here" placeholder shown in any unsold slot — a dashed, muted box so it clearly reads as available inventory, not editorial. */ .adslot.is-house{background:var(--wash);border-style:dashed;border-color:var(--line)} .adslot.is-house .adslot-house{display:flex;flex-direction:column;gap:3px;align-items:center; text-align:center;padding:20px 16px;transition:border-color .15s} .adslot-house-eyebrow{font:700 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .adslot-house-head{font:700 16px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)} .adslot-house-sub{font:500 13px/1.3 var(--font);color:var(--brand)} .adslot.is-house:hover{border-color:var(--brand)} .adslot--rail.is-house .adslot-house{padding:16px 12px} /* ══════════ DOC ══════════ Long-form page: prose in a single measure with an optional sticky contents rail. Terms, privacy, about, careers — anything that is mostly words and is NOT a blog article (articles use .art-* in blog.css). */ .doc{background:var(--white);padding:calc(var(--nav-h, 76px) + 56px) 0 96px} .doc-in{max-width:1460px;margin:0 auto;padding:0 40px} .doc-head{max-width:820px;margin-bottom:48px} .doc-kicker{font:400 14px/1.4 var(--font);color:var(--muted);margin:0 0 14px} .doc-head h1{font:550 clamp(34px,4.4vw,58px)/1.1 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0;max-width:none} .doc-head p{font:400 17.5px/1.55 var(--font);color:var(--ink-2);margin:20px 0 0} .doc-meta{font:400 14px/1.5 var(--font);color:var(--muted);margin:18px 0 0} .doc-cols{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start} .doc-nav{position:sticky;top:calc(var(--nav-h, 76px) + 24px)} .doc-nav h2{font:600 13px/1 var(--font);letter-spacing:.08em;text-transform:uppercase; color:var(--muted);margin:0 0 16px} .doc-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .doc-nav a{font:400 14.5px/1.45 var(--font);color:var(--ink-2);text-decoration:none} .doc-nav a:hover{color:var(--brand)} .doc-body{max-width:74ch} .doc-body > *:first-child{margin-top:0} .doc-body h2{font:700 clamp(22px,2.2vw,28px)/1.25 var(--display);letter-spacing:-.026em; color:var(--ink);margin:48px 0 16px;scroll-margin-top:calc(var(--nav-h, 76px) + 24px)} .doc-body h3{font:700 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);margin:32px 0 12px} .doc-body p{font:400 16.5px/1.8 var(--font);color:var(--ink-2);margin:0 0 20px} .doc-body ul,.doc-body ol{margin:0 0 22px;padding-left:22px} .doc-body li{font:400 16.5px/1.8 var(--font);color:var(--ink-2);margin-bottom:8px} .doc-body li::marker{color:var(--faint)} .doc-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px} .doc-body strong{color:var(--ink);font-weight:600} .doc-body hr{border:0;border-top:1px solid var(--line);margin:40px 0} .doc-body table{width:100%;border-collapse:collapse;margin:0 0 24px; font:400 15px/1.6 var(--font);color:var(--ink-2)} .doc-body th,.doc-body td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} .doc-body th{font-weight:600;color:var(--ink)} /* ══════════ STATUS ══════════ Small centred page: 404, forbidden, a confirmation. One message, one or two actions, nothing else. */ .status{background:var(--white);min-height:70vh; padding:calc(var(--nav-h, 76px) + 88px) 24px 96px; display:flex;justify-content:center;text-align:center} .status-card{max-width:520px} .status-code{font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase; color:var(--brand);margin:0 0 18px} .status-card h1{font:550 clamp(30px,3.8vw,46px)/1.12 var(--display);letter-spacing:-.032em; color:var(--ink);margin:0 0 16px;max-width:none} .status-card p{font:400 17px/1.6 var(--font);color:var(--ink-2);margin:0 auto 30px;max-width:46ch} .status-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .status-links{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} .status-links p{font:400 14.5px/1.6 var(--font);color:var(--muted);margin:0 0 12px} .status-links a{font:600 14.5px/1 var(--font);color:var(--brand);text-decoration:none; margin:0 10px;display:inline-block} .status-links a:hover{text-decoration:underline} /* ══════════ FORM PAGE ══════════ Form on the left, reassurance on the right. Contact, leave a review, list your community — anything that asks for a submission and needs to explain why. Fields reuse .calc-field. */ .formpage{background:var(--white);padding:calc(var(--nav-h, 76px) + 56px) 0 96px} .formpage-in{max-width:1460px;margin:0 auto;padding:0 40px} .formpage-cols{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start} .formpage h1{font:550 clamp(32px,4vw,50px)/1.1 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0 0 16px;max-width:none} .formpage-lede{font:400 17.5px/1.55 var(--font);color:var(--ink-2);margin:0 0 34px;max-width:52ch} .formpage-form{max-width:620px} .formpage-aside{background:var(--wash);border-radius:20px;padding:30px 28px 32px; position:sticky;top:calc(var(--nav-h, 76px) + 24px)} .formpage-aside h2{font:700 20px/1.3 var(--display);letter-spacing:-.022em;color:var(--ink);margin:0 0 12px} .formpage-aside p{font:400 15px/1.6 var(--font);color:var(--ink-2);margin:0 0 16px} .formpage-aside ul{list-style:none;margin:0;padding:0} .formpage-aside li{position:relative;padding-left:22px;margin-bottom:10px; font:400 15px/1.5 var(--font);color:var(--ink-2)} .formpage-aside li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:6px; border-left:1.8px solid var(--brand);border-bottom:1.8px solid var(--brand);transform:rotate(-45deg)} .formpage-note{font:400 13.5px/1.6 var(--font);color:var(--muted);margin:20px 0 0;max-width:56ch} .formpage-ok{background:var(--wash);border-radius:16px;padding:24px 26px; font:400 16px/1.6 var(--font);color:var(--ink);margin-bottom:24px} @media (max-width:1080px){ .doc-cols{grid-template-columns:1fr;gap:32px} .doc-nav{position:static} .formpage-cols{grid-template-columns:1fr;gap:40px} .formpage-aside{position:static} } @media (max-width:900px){ .doc{padding:calc(var(--nav-h, 76px) + 32px) 0 64px} .doc-in,.formpage-in{padding:0 24px} .doc-body{max-width:none} .formpage{padding:calc(var(--nav-h, 76px) + 32px) 0 64px} .status{padding:calc(var(--nav-h, 76px) + 48px) 24px 64px} } /* ══════════ PORTAL ══════════ Full-viewport search surface: map on the left, results on the right. Ported from the old .zx layout (OLD - CSS/page-local/pages__public__map.css) onto the new tokens, because that layout was right — this is a search portal, not a marketing page. Rules inherited from the original, each load-bearing: • The document itself never scrolls. The map pane and the results column are the only two scroll surfaces, so neither can move the other. • Which is also why a portal page carries no footer — 800px of it below the fold would scroll the map off-screen. • Grid children need min-height/min-width:0 or they refuse to shrink below their content and scroll the document instead. */ .portal{--pt-bar:64px; --pt-pane:calc(100vh - var(--nav-h, 76px) - var(--pt-bar)); position:relative;margin-top:var(--nav-h, 76px);background:var(--white)} @supports (height:100dvh){ /* mobile browser chrome makes 100vh lie; dvh tracks the real viewport */ .portal{--pt-pane:calc(100dvh - var(--nav-h, 76px) - var(--pt-bar))} } body.portal-locked{height:100%;overflow:hidden} /* ── Toolbar ── */ .pt-bar{position:sticky;top:var(--nav-h, 76px);z-index:500; display:flex;align-items:center;gap:12px;height:var(--pt-bar); padding:0 20px;background:var(--white);border-bottom:1px solid var(--line)} .pt-search{position:relative;flex:0 1 340px;min-width:180px} .pt-search input{width:100%;box-sizing:border-box;height:40px;padding:0 38px 0 14px; border:1px solid var(--border-strong,#cbd5e0);border-radius:10px; font:400 14.5px/1 var(--font);color:var(--ink);background:var(--white)} .pt-search input:focus{outline:0;border-color:var(--ink)} .pt-search button{position:absolute;right:4px;top:4px;width:32px;height:32px;border:0; background:none;cursor:pointer;display:grid;place-items:center} .pt-search svg{width:16px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round} /* segmented Properties / Agents switch */ .pt-seg{display:inline-flex;padding:3px;gap:2px;background:var(--wash);border-radius:10px;flex:none} .pt-seg button{border:0;background:transparent;cursor:pointer; font:600 13.5px/1 var(--font);color:var(--ink-2);padding:9px 16px;border-radius:8px; transition:background .18s,color .18s} .pt-seg button[aria-pressed="true"]{background:var(--white);color:var(--brand); box-shadow:0 1px 3px rgba(16,24,40,.1)} .pt-filters{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none} .pt-filters::-webkit-scrollbar{display:none} .pt-pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;height:40px; padding:0 14px;font:600 13.5px/1 var(--font);color:var(--ink);background:var(--white); border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .18s} .pt-pill:hover{border-color:var(--ink)} .pt-pill[aria-pressed="true"]{border-color:var(--ink);background:var(--wash)} .pt-count{font:400 13.5px/1.3 var(--font);color:var(--muted);white-space:nowrap;flex:none} /* ── Panes ── */ .pt-shell{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(520px,1fr); grid-template-rows:minmax(0,1fr);height:var(--pt-pane);overflow:hidden} .pt-map,.pt-results{min-height:0;min-width:0} .pt-map{position:relative;overflow:hidden;background:var(--wash)} .pt-results{overflow-y:auto;border-left:1px solid var(--line);padding:20px} .pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .pt-empty{padding:56px 24px;text-align:center} .pt-empty p{font:400 15.5px/1.6 var(--font);color:var(--muted);margin:0 0 18px} /* mobile map/list switch — fixed to the bottom, above both panes */ .pt-toggle{display:none} @media (max-width:1100px){ .pt-shell{grid-template-columns:1fr} .pt-results{border-left:0} .pt-shell[data-view="map"] .pt-results{display:none} .pt-shell[data-view="list"] .pt-map{display:none} .pt-grid{grid-template-columns:1fr} .pt-toggle{display:inline-flex;gap:4px;padding:4px;position:fixed;left:50%;bottom:22px; transform:translateX(-50%);z-index:800;background:var(--ink);border-radius:99px; box-shadow:0 12px 30px -10px rgba(9,10,12,.5)} .pt-toggle button{border:0;background:transparent;cursor:pointer; font:600 13.5px/1 var(--font);color:rgba(255,255,255,.66);padding:10px 20px;border-radius:99px} .pt-toggle button[aria-pressed="true"]{background:var(--brand);color:#fff} } @media (max-width:700px){ .pt-bar{gap:8px;padding:0 14px} .pt-search{flex:1 1 auto;min-width:120px} } /* ══════════ RESULT CARDS ══════════ Used in the portal results column and on any plain grid page. */ .rcard{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden; display:flex;flex-direction:column;text-decoration:none; transition:border-color .18s,box-shadow .22s var(--ease),transform .22s var(--ease)} .rcard:hover{border-color:var(--ink);box-shadow:var(--sh-md);transform:translateY(-2px)} .rcard-media{aspect-ratio:4/3;background:var(--wash);overflow:hidden;position:relative} .rcard-media img{width:100%;height:100%;object-fit:cover;display:block} .rcard-flag{position:absolute;top:12px;left:12px;font:600 11.5px/1 var(--font); letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--brand); border-radius:99px;padding:7px 11px} .rcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1} .rcard-price{font:700 19px/1.2 var(--display);letter-spacing:-.024em;color:var(--ink);margin:0} .rcard-facts{font:400 14px/1.5 var(--font);color:var(--ink-2);margin:7px 0 0} .rcard-addr{font:400 14px/1.5 var(--font);color:var(--muted);margin:5px 0 0} .rcard-foot{margin-top:auto;padding-top:14px;font:400 13px/1.4 var(--font);color:var(--muted)} /* ══════════ PLAIN GRID PAGE ══════════ Header + filter row + card grid, for pages that list things without a map. */ .gridpage{background:var(--wash);padding:calc(var(--nav-h, 76px) + 48px) 0 96px} .gridpage-in{max-width:1460px;margin:0 auto;padding:0 40px} .gridpage-head{margin-bottom:32px;max-width:760px} .gridpage-head h1{font:550 clamp(32px,4vw,50px)/1.1 var(--display);letter-spacing:-.034em; color:var(--ink);margin:0 0 14px;max-width:none} .gridpage-head p{font:400 17px/1.55 var(--font);color:var(--ink-2);margin:0} .gridpage-bar{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-bottom:24px} .gridpage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} @media (max-width:1200px){ .gridpage-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:900px){ .gridpage{padding:calc(var(--nav-h, 76px) + 32px) 0 64px} .gridpage-in{padding:0 24px} .gridpage-grid{grid-template-columns:1fr 1fr;gap:16px} } @media (max-width:560px){ .gridpage-grid{grid-template-columns:1fr} } /* Two fields side by side inside .auth (first name / last name). */ .auth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* Success state for the alert — the error variant already exists above. */ .auth-alert.ok{display:block;background:#eef7f1;color:#186a3b} @media (max-width:520px){ .auth-row{grid-template-columns:1fr;gap:0} } /* ══════════ SP SECTIONS ══════════ Marketing-section vocabulary lifted from the OLD shared stylesheet. It is used by the calculators, careers, contact, list-your-community and several app pages, so it lives here rather than being duplicated into each page-specific sheet. Rules are the originals with legacy tokens rewritten to the current ones. */ .select-wrapper{position: relative; width: 100%;} .select-wrapper select{width: 100%; padding: 1.25rem 3rem 1.25rem 1.5rem; font-size: 1rem; border: 1px solid #edf0f3; border-radius: 16px; appearance: none; -webkit-appearance: none; background-color: #fcfcfd; cursor: pointer; font-weight: 400; color: var(--faint); font-family: inherit; transition: border-color 0.2s, background-color 0.2s, color 0.2s;} .select-wrapper select:valid, .select-wrapper select:not(:has(option[value=""]:checked)){color: var(--ink);} .select-wrapper select:focus{outline: none; border-color: var(--brand); background-color: var(--white);} .select-wrapper::after{content: ""; position: absolute; right: 1.5rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: border-color 0.2s;} .select-wrapper:focus-within::after{border-color: var(--brand);} .sp-dark-section{padding: 5rem 1.25rem !important;} .sp-dark-section .sp-title{font-size: 2.5rem !important;} .sp-dark-section .sp-media-wrapper{height: 320px !important;} .sp-dark-section .sp-title{font-size: 2rem !important;} .sp-title{font-size: 3.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -1px; margin-bottom: 1rem; color: #000;} .sp-title span{color: #6e7a8a;} .sp-section{padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; clear: both;} .sp-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;} .sp-grid{grid-template-columns: 1fr; gap: 2rem;} .sp-media-wrapper{position: relative; border-radius: 24px; overflow: hidden; width: 100%;} .sp-media-wrapper img{width: 100%; height: auto; display: block; border-radius: 24px; object-fit: cover;} .sp-stat-title{font-size: 0.8rem; color: var(--ink-2); margin-bottom: 0.5rem;} .sp-stat-value{font-size: 2.5rem; font-weight: 700; color: #000; margin-bottom: 0.5rem;} .sp-stat-delta{font-size: 0.85rem; color: #059669; font-weight: 600; margin-bottom: 0.25rem;} .sp-stat-desc{font-size: 0.75rem; color: var(--faint);} .sp-feat-item{display: flex; gap: 1.25rem; align-items: flex-start;} .sp-feat-icon{flex-shrink: 0; color: #000; margin-top: 2px;} .sp-feat-content h4{font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #000;} .sp-feat-content p{font-size: 0.95rem; line-height: 1.6; color: var(--ink-2);} .sp-quote-mark{font-size: 5rem; line-height: 1; color: var(--brand); margin-bottom: 1rem; font-family: Georgia, serif; font-style: italic;} .sp-quote-text{font-size: 1.4rem; line-height: 1.5; font-weight: 500; color: #000; margin-bottom: 2rem;} .sp-quote-author{display: flex; align-items: center; gap: 1rem;} .sp-quote-avatar{width: 50px; height: 50px; border-radius: 50%; object-fit: cover;} .sp-quote-name{font-weight: 600; color: var(--brand); font-size: 1rem; margin-bottom: 0.2rem;} .sp-quote-role{font-size: 0.85rem; color: var(--muted);} .sp-dark-section .sp-title{color: #fff;} .sp-dark-section .sp-subtitle{color: var(--faint);} .sp-dark-section .sp-quote-text{color: #fff;} .sp-check-list{display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem;} .sp-check-item{display: flex; gap: 1rem; align-items: flex-start;} .sp-check-icon{width: 24px; height: 24px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;} .sp-check-icon svg{width: 14px; height: 14px; stroke: #000; stroke-width: 3; fill: none;} .sp-check-text{font-size: 0.95rem; line-height: 1.5; color: var(--line);} .sp-link-blue{color: #ce3136; text-decoration: none; font-weight: 500; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; transition: opacity 0.2s;} .sp-link-blue:hover{opacity: 0.8;} .sp-grid-3{display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem;} .sp-grid-3{grid-template-columns: 1fr;} .sp-fw-image{width: 100%; height: 500px; object-fit: cover; border-radius: var(--radius-2xl); margin-top: 2rem;} .sp-header-split{display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2rem;} .sp-header-split{grid-template-columns: 1fr; gap: 1.5rem; align-items: start;} .sp-section{padding: 3rem 1.25rem !important;} .sp-section[style*="padding: 10rem"]{padding: 6rem 1.25rem 3rem !important;} .sp-section[style*="padding-bottom: 8rem"]{padding-bottom: 4rem !important;} .sp-grid{grid-template-columns: 1fr !important; gap: 1.5rem !important;} .sp-grid > .sp-media-wrapper{height: 320px !important;} .sp-grid > .sp-media-wrapper[style*="600px"]{height: 340px !important;} .sp-grey-box{padding: 2.5rem 1.75rem !important;} .sp-grey-box .sp-title{font-size: 2rem !important;} .sp-fw-image{height: 320px !important;} .sp-grid-3{gap: 2rem !important; margin-top: 2rem !important;} .sp-stat-card{min-width: 0; padding: 1rem 1.25rem; right: 1rem; bottom: 1rem;} .sp-stat-value{font-size: 1.75rem;} .sp-check-list{gap: 1rem;} .sp-feat-list{gap: 1.75rem;} .sp-dark-section .sp-grid{align-items: stretch !important;} .sp-title{font-size: 1.9rem !important;} .sp-grey-box{padding: 2rem 1.25rem !important;} .sp-grey-box .sp-title{font-size: 1.75rem !important;} .sp-fw-image{height: 240px !important; border-radius: 20px;} .sp-grid > .sp-media-wrapper{height: 260px !important;} .sp-grid > .sp-media-wrapper[style*="600px"]{height: 260px !important;} .sp-dark-section .testimonial-main-title{color: var(--ink); text-align: left;} .sp-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;} .sp-media-wrapper img{border-radius: 20px !important; box-shadow: 0 18px 40px -18px rgba(9,10,12,.35);} .sp-dark-section p{color: var(--muted) !important;} .sp-check-list{display: grid; gap: 0.9rem;} .sp-check-item{display: flex; align-items: flex-start; gap: 0.75rem;} .sp-check-icon{flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand-tint); display: grid; place-items: center;} .sp-check-icon svg{width: 0.95rem; height: 0.95rem; stroke: var(--brand); stroke-width: 3; fill: none;} .sp-check-text{color: var(--ink-2); line-height: 1.55;} .sp-dark-section .btn-primary{background: var(--brand); color: #fff; border-radius: 99px; border: none;} .sp-grid{grid-template-columns: 1fr;} .sp-dark-section p, .sp-dark-section li, .sp-dark-section .sp-check-text{color: var(--ink-2) !important;} .sp-dark-section a:not(.btn){color: var(--brand) !important;} .sp-dark-section .btn-outline{color: var(--ink) !important; border-color: var(--line) !important; border-radius: 99px !important;} .sp-dark-section .btn-outline:hover{background: var(--ink) !important; color: var(--white) !important;} .cta-band{width: 75%; max-width: 1100px; margin: 0 auto; background: var(--brand); border-radius: var(--radius-2xl); padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; box-shadow: 0 24px 50px -24px rgba(219, 37, 43, 0.55);} .cta-band-text h2{margin: 0; font-size: clamp(1.4rem, 2.1vw, 1.85rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: #fff;} .cta-band-text p{margin: 0.4rem 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82);} .cta-band-btn{flex: 0 0 auto; border: none; cursor: pointer; font-family: inherit; font-size: 0.98rem; font-weight: 700; color: var(--brand); background: var(--white); padding: 0.9rem 1.9rem; border-radius: 99px; transition: transform .18s var(--ease), background .18s var(--ease);} .cta-band-btn:hover{transform: translateY(-1px); background: var(--wash);} .cta-band{width: 100%; flex-direction: column; text-align: center;} .cta-band-text h2{font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15;} .cta-band-text p{margin-top: 0.6rem; font-size: 1.02rem; max-width: 44ch; color: rgba(255, 255, 255, 0.88);} .cta-band-btn{font-size: 1.02rem; padding: 1rem 2.2rem; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);} .sp-dark-section .sp-grid{max-width: 1460px !important; margin-inline: auto; padding-inline: 40px;}