/* Homepage only (Magic preview, 2026-10-15). Loaded after site.css on "/" alone; every rule is scoped under
   body.az-home. About alignment (preview, 2026-10-20): /about/ loads this file too, without the az-home class. The rules
   for the components About reuses (hero band, orb, hero grid, pill, headline, lede, portrait and chip, the San Clemente
   band, the why-broker panel, the proof band and cards, band-soft, the lead form spacing and home-final) are scoped under
   :root instead, which has the same specificity as .az-home and sits in the same place, so the homepage renders exactly
   as before; everything still scoped under .az-home (orb drift, marquee, bento cards, funded cards, hero-copy order,
   trust strip and the rest) stays homepage-only. Site-wide (2026-10-15): the tokens, fonts, buttons, header, nav, footer and phone bar moved to the end of
   site.css; what stays here is the homepage's own hero, sections and type scale. Design: docs/design-system-proposed/magic-home/DESIGN.md.
   "Signal": white page, graphite ink, one cobalt accent, a grainy radial-gradient orb behind the portrait
   (Hero Static Radial Gradient 19151, cult-ui, rebuilt in CSS), bento cards (Bento Grid 622, kokonutd),
   hairline stats (35089), a testimonial marquee (24457), a CTA panel (610), a glass pill navbar
   (26786) and an outlined-watermark footer (29772). Inter Tight for display, Geist for everything else.
   v2 (2026-10-15): the whole page is light (the marquee band, CTA panel and footer were dark) and the nav is the
   segmented pill with a sliding highlight and frosted mega-menu panels described under "v2 nav" below. */


.az-home {
  /* Tokens (DESIGN.md). Contrast on white: ink 19.6:1, ink-2 9.9:1, mute 4.9:1, cobalt 5.8:1. On dark: text 18:1, dark-mute 7.6:1. */
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--h-ink);
  background: var(--h-bg);
  font-feature-settings: "ss01", "cv11";
}

/* Type ------------------------------------------------------------------- */
.az-home h1, .az-home h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; color: var(--h-ink); }
.az-home h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.9rem); line-height: 1.05; margin: 0 0 1rem; }
.az-home h3 { font-family: var(--font); font-weight: 500; letter-spacing: -0.015em; font-size: 1.15rem; }
.az-home .lede { font-size: 1.125rem; line-height: 1.6; color: var(--h-ink-2); }
.az-home .small { color: var(--h-mute); font-size: 0.875rem; }
.az-home a { color: var(--h-cobalt-deep); text-underline-offset: 0.16em; }
.az-home :focus-visible { outline: 3px solid var(--h-cobalt); outline-offset: 3px; }


/* Hero (Hero Static Radial Gradient 19151, cult-ui) ----------------------- */
:root .hero-band-v2 { position: relative; overflow: hidden; background: #fff; isolation: isolate; }
:root .hero-band-v2 > .wrap { position: relative; z-index: 2; }
:root .hero-orb { position: absolute; z-index: 0; right: -12vw; top: 44%; width: clamp(34rem, 58vw, 56rem); aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(closest-side, var(--h-mint) 0%, var(--h-sky) 34%, var(--h-lilac) 60%, rgba(201, 184, 255, 0) 100%);
  filter: blur(18px); opacity: 1; }
.az-home .hero-orb { animation: h-orb 22s ease-in-out infinite alternate; will-change: transform; } /* the drift stays homepage-only; /about/ shows the orb still */
:root .hero-band-v2::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.28; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes h-orb { from { transform: translateY(-52%) translateX(0) scale(1); } to { transform: translateY(-46%) translateX(-2.5%) scale(1.05); } }
:root .hero-band-v2 .hero { padding: clamp(3rem, 6vw, 6rem) 0 clamp(3rem, 6vw, 5.5rem); }
:root .hero-grid-v2 { grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
:root .eyebrow-hero { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.85rem 0.42rem 0.7rem; margin: 0 0 1.4rem; border: 1px solid var(--h-line); border-radius: var(--h-r-pill); background: #fff; color: var(--h-ink-2); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.01em; text-transform: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
:root .eyebrow-hero::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--h-cobalt); box-shadow: 0 0 0 3px var(--h-cobalt-soft); }
:root .hero-display { font-size: clamp(3rem, 2.1rem + 3.8vw, 5.4rem); line-height: 0.98; letter-spacing: -0.045em; max-width: 11ch; margin: 0 0 1.4rem; color: var(--h-ink); }
:root .hero-lede { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--h-ink-2); max-width: 33rem; margin: 0 0 1.75rem; }
:root .hero-v2 .btn-row { margin: 0 0 0.9rem; gap: 0.75rem; }
.az-home .hero-pa-note { margin: 0 0 0.5rem; }
.az-home .hero-heloc-link { color: var(--h-mute); font-size: 0.95rem; margin: 0.4rem 0 0; }
.az-home .hero-heloc-link .options-text-link { color: var(--h-ink); font-weight: 500; }
.az-home .trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--h-line); max-width: 38rem; }
.az-home .trust-strip li { gap: 0.3rem; padding: 0 1.25rem; border-left: 1px solid var(--h-line); }
.az-home .trust-strip li:first-child { padding-left: 0; border-left: 0; }
.az-home .trust-strip li.wide { grid-column: 1 / -1; border-left: 0; padding: 1rem 0 0; margin-top: 1.25rem; border-top: 1px solid var(--h-line); }
.az-home .trust-strip .num { font-family: var(--font-display); font-weight: 600; font-size: 2.3rem; letter-spacing: -0.045em; line-height: 1; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.az-home .trust-strip .lbl { font-size: 0.84rem; color: var(--h-mute); line-height: 1.4; }
.az-home .trust-strip .lbl a { color: var(--h-ink-2); }
:root .hero-portrait { width: min(100%, 27rem); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: var(--h-shadow-3); background: var(--h-bg-2); position: relative; }
:root .hero-portrait::after { display: none; }
:root .hero-portrait img { object-position: 50% 18%; }
:root .hero-chip { position: absolute; left: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 8px 24px rgba(11, 12, 16, 0.14); font-size: 0.82rem; line-height: 1.3; color: var(--h-ink-2); }
:root .hero-chip strong { font-weight: 500; color: var(--h-ink); font-size: 0.92rem; letter-spacing: -0.01em; }
/* /about/ (2026-10-20): its chip carries the company logo it always had; keep the logo at its own small size, not the
   portrait photo's full-frame fill, radius and lift. No homepage element matches (the homepage chip has no image). */
:root .hero-chip .company-logo { width: 5.5rem; height: auto; max-width: 5.5rem; object-fit: contain; border: 1px solid var(--h-line); border-radius: 6px; box-shadow: none; padding: 0.2rem 0.35rem; margin: 0 0 0.35rem; }

/* Section rhythm --------------------------------------------------------- */
.az-home main { padding-bottom: 0; }
.az-home .solutions, .az-home #funded, .az-home #offers, .az-home #answers, .az-home #all { padding: var(--h-sec) 0 0; }
:root .sc-band { padding: var(--h-sec) 0 0; background: transparent; margin: 0; }
.az-home section > h2 + .lede { margin: 0 0 2rem; max-width: 40rem; }
.az-home section > h2 { max-width: 22ch; }

/* Solutions: bento (Bento Grid 622, kokonutd) ---------------------------- */
.az-home .sol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; }
.az-home .sol-grid:not(.sol-grid-more) > li:nth-child(1), .az-home .sol-grid:not(.sol-grid-more) > li:nth-child(4), .az-home .sol-grid:not(.sol-grid-more) > li:nth-child(5) { grid-column: span 2; }
.az-home .sol-card { gap: 0.4rem; min-height: 11.5rem; padding: 1.3rem 1.3rem 1.15rem; background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-md); box-shadow: none; transition: transform 300ms var(--h-ease), box-shadow 300ms var(--h-ease), border-color 300ms var(--h-ease); will-change: transform; overflow: hidden; }
.az-home .sol-card::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 1px, transparent 1px); background-size: 4px 4px; opacity: 0; transition: opacity 300ms var(--h-ease); pointer-events: none; }
.az-home .sol-card:hover, .az-home .sol-grid:not(.sol-grid-more) > li:first-child .sol-card { transform: translateY(-2px); box-shadow: var(--h-shadow-2); border-color: var(--h-line-2); }
.az-home .sol-card:hover::before, .az-home .sol-grid:not(.sol-grid-more) > li:first-child .sol-card::before { opacity: 1; }
.az-home .sol-card:active { transform: translateY(0) scale(0.99); }
.az-home .sol-tag { position: absolute; top: 1rem; right: 1rem; font-size: 0.72rem; font-weight: 500; line-height: 1; padding: 0.4rem 0.55rem; border-radius: 8px; background: rgba(11, 12, 16, 0.05); color: var(--h-ink-2); backdrop-filter: blur(4px); }
.az-home .sol-t { position: relative; font-weight: 500; font-size: 1.08rem; letter-spacing: -0.015em; line-height: 1.3; padding-right: 5rem; margin-top: 0.2rem; }
.az-home .sol-d { position: relative; font-size: 0.9rem; color: var(--h-mute); line-height: 1.45; }
.az-home .sol-go { position: relative; margin-top: auto; align-self: flex-end; color: var(--h-ink); opacity: 0.45; transition: opacity 300ms var(--h-ease), transform 300ms var(--h-ease); }
.az-home .sol-card:hover .sol-go { opacity: 1; transform: translateX(2px); }
.az-home .sol-card:hover .sol-go .arrow-go { transform: none; }
.az-home .sol-more { margin-top: 1.25rem; }
.az-home .sol-more > summary { border-color: var(--h-line-2); color: var(--h-ink); font-weight: 500; background: #fff; }
.az-home .sol-more > summary:hover { background: var(--h-ink); border-color: var(--h-ink); color: #fff; }
.az-home .sol-grid-more { margin-top: 0.75rem; }
.az-home .sol-all { margin: 1.25rem 0 0; font-size: 0.95rem; }

/* San Clemente band: pull quote (the pier photo stays in the markup for the test; hidden here) ------ */
.az-home .sc-grid { display: block; max-width: 54rem; }
.az-home .sc-photo { display: none; }
.az-home .sc-quote { margin: 0; padding: 0; }
.az-home .sc-quote::before { content: "\201C" / ""; display: block; font-family: var(--font-display); font-weight: 600; font-size: 4rem; line-height: 0.7; color: var(--h-cobalt); margin: 0 0 0.75rem; }
.az-home .sc-quote p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.22; letter-spacing: -0.03em; color: var(--h-ink); max-width: none; margin: 0 0 0.9rem; }
.az-home .sc-quote footer { font-size: 0.95rem; color: var(--h-mute); margin-top: 1.2rem; }

/* Why work with me (preview, 2026-10-18): a light panel, the question on the left and Zach's copy on the right at a
   reading width; one column on phones with the two buttons stacked full width (site.css .btn-row at 700px). */
:root .why-broker { padding: var(--h-sec) 0 0; }
:root .why-broker-panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: start; background: var(--h-bg-2); border: 1px solid var(--h-line); border-radius: var(--h-r-lg); padding: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
:root .why-broker h2 { max-width: 13ch; margin: 0; }
:root .why-broker-copy { max-width: 38rem; }
:root .why-broker-copy p { color: var(--h-ink-2); margin: 0 0 1rem; max-width: none; }
.az-home .why-broker-copy .why-broker-ask { color: var(--h-ink); font-weight: 500; font-size: 1.125rem; margin: 1.5rem 0 0; }
.az-home .why-broker-actions { margin: 1.25rem 0 0; }
.az-home .why-broker-actions .btn-secondary { background: #fff; }
.az-home .why-broker-copy .why-broker-link { margin: 1rem 0 0; }
.az-home .why-broker-link a { color: var(--h-ink); font-weight: 500; }

/* Recently funded -------------------------------------------------------- */
.az-home .fund-ticker { border-color: var(--h-line); margin-top: 1.75rem; }
.az-home .fund-ticker li { color: var(--h-mute); }
.az-home .fund-ticker li strong { color: var(--h-ink); font-weight: 500; }
.az-home .fund-filter { gap: 0.4rem; margin-top: 1.5rem; }
.az-home .chip { font-weight: 500; font-size: 0.86rem; border: 1px solid var(--h-line-2); color: var(--h-ink-2); background: #fff; }
.az-home .chip:hover { border-color: var(--h-ink); color: var(--h-ink); }
.az-home .chip.is-on { background: var(--h-ink); border-color: var(--h-ink); color: #fff; }
.az-home .fund-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.az-home .fund-card { border: 1px solid var(--h-line); border-radius: var(--h-r-md); box-shadow: none; background: #fff; transition: transform 300ms var(--h-ease), box-shadow 300ms var(--h-ease), border-color 300ms var(--h-ease), opacity 220ms ease; }
.az-home .fund-card:hover { transform: translateY(-2px); box-shadow: var(--h-shadow-2); border-color: var(--h-line-2); }
.az-home .fund-body { padding: 1.25rem 1.3rem 1.2rem; display: flex; flex-direction: column; }
.az-home .fund-kind { order: 2; font-size: 0.92rem; font-weight: 500; color: var(--h-ink); margin: 0.9rem 0 0; }
.az-home .fund-where { order: 3; font-size: 0.88rem; color: var(--h-mute); margin: 0.1rem 0 0; }
.az-home .fund-when { order: 1; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--h-mute); margin: 0; }
.az-home .fund-amt { order: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 1.3vw, 2.3rem); letter-spacing: -0.045em; line-height: 1.05; color: var(--h-ink); margin: 0.6rem 0 0.35rem; display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.az-home .fund-amt span { font-family: var(--font); font-weight: 400; font-size: 0.85rem; letter-spacing: 0; color: var(--h-mute); }
.az-home .fund-more { margin-top: 0.75rem; }
.az-home .fund-more > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 48px; padding: 0.75rem 1.4rem; border-radius: var(--h-r-pill); border: 1px solid var(--h-line-2); font-weight: 500; font-size: 0.98rem; background: #fff; color: var(--h-ink); }
.az-home .fund-more > summary:hover { background: var(--h-ink); border-color: var(--h-ink); color: #fff; }
.az-home .fund-more[open] > summary { margin-bottom: 1rem; }
.az-home .fund-brand { margin-top: 2rem; padding: 1.1rem 1.25rem; background: var(--h-bg-2); color: var(--h-ink-2); border: 1px solid var(--h-line); border-radius: var(--h-r-md); }
.az-home .fund-brand-text { font-size: 0.9rem; }
.az-home .fund-brand-text strong { color: var(--h-ink); font-weight: 500; }
.az-home .fund-brand .avatar { border-color: #fff; box-shadow: var(--h-shadow-2); }
.az-home .fund-brand .company-logo { background: #fff; border: 1px solid var(--h-line); }
.az-home .fund-brand .btn-secondary { background: var(--h-ink); color: #fff; border-color: var(--h-ink); }
.az-home .fund-brand .btn-secondary:hover { background: #22242C; }
.az-home #funded > .small:last-child { margin-top: 1rem; max-width: 44rem; }

/* Social proof: dark marquee (Testimonial Marquee 24457, adapted) -------- */
/* v2 light (2026-10-15): the band is a soft grey with hairlines and a faint cobalt-mint glow; the cards are white. */
:root .proof-band { background: var(--h-bg-2); color: var(--h-ink); padding: var(--h-sec) 0; margin-top: var(--h-sec); border-radius: 0; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
:root .proof-band::before { display: block; background: radial-gradient(50% 60% at 85% 10%, rgba(43, 78, 255, 0.14) 0%, rgba(43, 78, 255, 0) 60%), radial-gradient(40% 40% at 5% 100%, rgba(110, 247, 204, 0.22) 0%, rgba(110, 247, 204, 0) 60%); }
:root .proof-band h2 { color: var(--h-ink); max-width: 18ch; margin-bottom: 0.5rem; }
.az-home .proof-marquee { margin: 2.5rem 0 1.75rem; overflow: hidden; }
.az-home .proof-marquee.is-looping { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.az-home .proof-track { display: flex; width: max-content; animation: h-marquee 70s linear infinite; }
.az-home .proof-marquee:hover .proof-track, .az-home .proof-marquee:focus-within .proof-track { animation-play-state: paused; }
:root .proof-cards { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0; }
.az-home .is-looping .proof-cards { flex-wrap: nowrap; padding-right: 0.9rem; }
/* /about/ (2026-10-20): its four excerpts are longer and unabridged, so each card takes the marquee card's 26rem, two to a
   row on desktop, one on phones. The homepage's cards are not inside .review-proof, so nothing there matches. */
:root .review-proof .proof-card { flex-basis: 26rem; }
:root .review-proof .proof-cards { margin: 1.5rem 0 1.25rem; }
:root .proof-card { flex: 1 1 18rem; width: auto; margin: 0; padding: 1.5rem 1.6rem 1.4rem; background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-md); box-shadow: var(--h-shadow-2); display: flex; flex-direction: column; }
.az-home .is-looping .proof-card { flex: 0 0 auto; width: min(26rem, 80vw); }
.az-home .proof-mark { color: var(--h-cobalt); font-family: var(--font-display); font-size: 2.5rem; line-height: 0.6; margin-bottom: 0.9rem; opacity: 1; }
:root .proof-card .quote { margin: 0; padding: 0; border: 0; background: transparent; color: var(--h-ink); }
:root .proof-card .quote p { color: var(--h-ink); font-size: 1.02rem; line-height: 1.55; margin: 0 0 1rem; max-width: none; }
:root .proof-card .quote footer { color: var(--h-mute); font-size: 0.88rem; }
:root .proof-card .quote footer a { color: var(--h-ink); font-weight: 500; }
.az-home .proof-note { color: #5F636E; max-width: 52rem; }
.az-home .proof-note a { color: var(--h-ink); }
@keyframes h-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* How I work and company (band) ------------------------------------------ */
:root .band-soft { background: var(--h-bg-2); padding: var(--h-sec) 0; margin: 0; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
.az-home #company { padding-top: var(--h-sec-sm); margin-top: var(--h-sec-sm); border-top: 1px solid var(--h-line-2); }
/* /about/ (2026-10-20): the same divider between consecutive sections on the soft band (Licensing, then Sources). On the
   homepage this matches #company alone, which the rule above already gives these exact values. */
:root .band-soft section + section { padding-top: var(--h-sec-sm); margin-top: var(--h-sec-sm); border-top: 1px solid var(--h-line-2); }
.az-home .steps { gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.75rem; }
.az-home .steps li { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-md); padding: 1.5rem 1.5rem 1.4rem; }
.az-home .steps li::before { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.04em; color: var(--h-cobalt); margin-bottom: 1rem; }
.az-home .steps h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.az-home .steps p { font-size: 0.95rem; color: var(--h-ink-2); }
.az-home #how > .small { max-width: 44rem; }
.az-home .two-col { gap: 2rem; align-items: start; margin-top: 1.5rem; }
.az-home .two-col p { max-width: 40rem; }
.az-home .callout-source { background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-r-md); padding: 1.4rem 1.5rem; margin: 0; box-shadow: none; }
.az-home .callout-label { color: var(--h-mute); font-weight: 500; letter-spacing: 0.1em; }

/* Programs (offers) -------------------------------------------------------- */
.az-home .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; }
.az-home .offer { padding: 1.3rem 1.3rem 1.2rem; border: 1px solid var(--h-line); border-radius: var(--h-r-md); box-shadow: none; transition: transform 300ms var(--h-ease), box-shadow 300ms var(--h-ease), border-color 300ms var(--h-ease); }
.az-home a.offer:hover { transform: translateY(-2px); box-shadow: var(--h-shadow-2); border-color: var(--h-line-2); }
.az-home .offer .t { font-weight: 500; font-size: 1.05rem; letter-spacing: -0.015em; }
.az-home .offer .d { color: var(--h-mute); font-size: 0.92rem; }
.az-home .offer .go { color: var(--h-ink); font-weight: 500; font-size: 0.9rem; margin-top: 0.6rem; }
.az-home .offer.talk { background: var(--h-bg-2); }

/* Folded lists ------------------------------------------------------------ */
.az-home .fold-list { border: 1px solid var(--h-line); border-radius: var(--h-r-md); padding: 0.25rem 1.1rem; background: #fff; }
.az-home .fold-list > summary { font-weight: 500; color: var(--h-ink); min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.az-home #answers .lede { margin-bottom: 1.25rem; }
.az-home #all > .small { margin-top: 1rem; }

/* Lead form -------------------------------------------------------------- */
:root .lead-form-wrap { padding: var(--h-sec) 0 0; margin: 0; }
:root .lead-form { max-width: 36rem; padding: 1.75rem; border: 1px solid var(--h-line); border-radius: var(--h-r-lg); background: var(--h-bg-2); }

/* Final CTA: dark panel with a glow (Cta 10 610, adapted) ----------------- */
:root .home-final { padding: var(--h-sec) 0; background: transparent; }
/* v2 light (2026-10-15): a faintly tinted panel with a hairline and the glow kept in a light version. */
:root .home-final-panel { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F7F8FC 0%, var(--h-bg-2) 100%); color: var(--h-ink); border: 1px solid var(--h-line); border-radius: var(--h-r-lg); padding: clamp(2.25rem, 2rem + 3vw, 4.5rem); box-shadow: var(--h-shadow-1); }
:root .home-final-panel::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(43, 78, 255, 0.22), rgba(110, 247, 204, 0.26) 55%, transparent 100%); filter: blur(40px); pointer-events: none; }
:root .home-final-copy { max-width: 40rem; }
:root .home-final h2 { color: var(--h-ink); margin-bottom: 0.75rem; }
:root .home-final .lede { color: var(--h-ink-2); margin-bottom: 1.5rem; }
:root .home-final .answer-actions { background: transparent; border: 0; padding: 0; margin: 0; }
:root .home-final .answer-actions .btn { flex: 0 1 auto; min-width: 11rem; }
:root .home-final .btn-primary { background: var(--h-ink); border-color: var(--h-ink); color: #fff; }
:root .home-final .btn-primary:hover { background: #22242C; border-color: #22242C; }
:root .home-final .btn-secondary { background: #fff; border-color: var(--h-line-2); color: var(--h-ink); }
:root .home-final .btn-secondary:hover { border-color: var(--h-ink); }
:root .home-final .answer-actions .small { color: #5F636E; margin-top: 0.75rem; }


/* Responsive -------------------------------------------------------------- */
@media (max-width: 1023px) {
  .az-home .sol-grid, .az-home .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .az-home .sol-grid:not(.sol-grid-more) > li:nth-child(4), .az-home .sol-grid:not(.sol-grid-more) > li:nth-child(5) { grid-column: auto; }
  .az-home .fund-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .az-home .steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
@media (max-width: 900px) {
  :root .hero-grid-v2 { grid-template-columns: 1fr; gap: 1.75rem; }
  :root .why-broker-panel { grid-template-columns: 1fr; gap: 1.25rem; }
  :root .why-broker h2 { max-width: 20ch; }
  :root .hero-portrait { justify-self: stretch; width: 100%; max-width: 30rem; aspect-ratio: 4 / 5; }
  :root .hero-orb { right: -30%; top: 12%; width: 32rem; transform: none; }
  .az-home .trust-strip { max-width: none; }
}
@media (max-width: 700px) {
  /* Phone hero: the geometry site.css proved in the phone audit (portrait first at 5:3, headline, strip, lede, buttons). */
  :root .hero-band-v2 .hero { padding: 0.75rem 0 1.5rem; }
  :root .hero-grid-v2 { gap: 1rem; }
  :root .hero-portrait { order: -1; aspect-ratio: 13 / 9; width: 100%; max-width: none; border-radius: 20px; }
  :root .hero-portrait img { object-position: 50% 12%; }
  :root .hero-chip { left: 0.75rem; bottom: 0.75rem; padding: 0.5rem 0.75rem; font-size: 0.76rem; }
  :root .hero-chip strong { font-size: 0.84rem; }
  :root .hero-orb { right: -40%; top: -8rem; width: 26rem; filter: blur(30px); opacity: 0.75; }
  :root .eyebrow-hero { margin-bottom: 0.6rem; padding: 0.32rem 0.7rem 0.32rem 0.6rem; font-size: 0.76rem; }
  :root .hero-display { font-size: clamp(2.25rem, 10.5vw, 2.9rem); margin-bottom: 0.7rem; max-width: none; letter-spacing: -0.04em; }
  :root .hero-lede { font-size: 1.05rem; line-height: 1.5; margin-bottom: 0.85rem; }
  :root .hero-v2 .btn-row { gap: 0.6rem; margin-bottom: 0.9rem; }
  :root .hero-v2 .btn-row .btn { width: 100%; }
  :root .hero-v2 .btn-lg { padding: 0.85rem 1.3rem; font-size: 1.02rem; min-height: 48px; }
  .az-home .hero-copy > .trust-strip { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.75rem 0 0; border-top: 1px solid var(--h-line); max-width: none; }
  .az-home .trust-strip li { flex: 1 1 5rem; border: 0; padding: 0; }
  .az-home .trust-strip li.wide { flex-basis: 100%; border: 0; margin: 0; padding: 0; }
  .az-home .trust-strip .num { font-size: 1.45rem; }
  .az-home .trust-strip .lbl { font-size: 0.8rem; }
  .az-home .sol-grid, .az-home .offers, .az-home .fund-grid { grid-template-columns: 1fr; }
  .az-home .sol-grid:not(.sol-grid-more) > li:nth-child(1) { grid-column: auto; }
  .az-home .sol-card { min-height: 0; }
  .az-home .sc-quote { padding-left: 1.1rem; }
  :root .home-final-panel { border-radius: 20px; }
  :root .home-final .answer-actions .btn { flex: 1 1 100%; }
  .az-home .fund-brand { padding: 1rem; }
}

/* Reduced motion: the global site.css rule already ends every animation and transition; this keeps the
   marquee a static wrapped grid, hides the loop copy and removes the edge masks. */
@media (prefers-reduced-motion: reduce) {
  .az-home .hero-orb { animation: none; }
  .az-home .proof-marquee.is-looping { -webkit-mask-image: none; mask-image: none; }
  .az-home .proof-track { width: auto; animation: none; display: block; }
  .az-home .proof-track > .proof-cards[aria-hidden="true"] { display: none; }
  .az-home .is-looping .proof-cards { flex-wrap: wrap; padding-right: 0; }
  .az-home .is-looping .proof-card { flex: 1 1 18rem; width: auto; }
}

/* Spacing and polish pass (2026-10-15, after visual QA of the Fable build). */
/* Stats row: number above label, top-aligned, so the three figures share one baseline. */
.az-home .trust-strip li { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.az-home .trust-strip li.wide { flex-direction: row; margin-left: 0; }
.az-home .hero-copy > .trust-strip { align-items: start; }
/* "Show every answer / situation": a single pill like the other disclosure buttons, not a pill inside a box. */
.az-home .fold-list { border: 0; padding: 0; background: none; border-radius: 0; margin-top: 1.25rem; }
.az-home .fold-list > summary { display: inline-flex; gap: 0.5rem; padding: 0.75rem 1.4rem; border-radius: var(--h-r-pill); border: 1px solid var(--h-line-2); background: #fff; font-size: 0.98rem; }
.az-home .fold-list > summary:hover { background: var(--h-ink); border-color: var(--h-ink); color: #fff; }
.az-home .fold-list[open] > summary { margin-bottom: 1rem; }
/* Lead form: keep the page gutter and centring of .wrap (only the top spacing is ours). */
:root .lead-form-wrap { margin: 0 auto; padding-top: var(--h-sec); padding-bottom: 0; }
/* With motion off, the funded ticker would wrap into a long wall of text; every loan in it is also in the cards and
   "View all funded loans", so it simply steps aside. */
@media (prefers-reduced-motion: reduce) {
  .az-home .fund-ticker { display: none; }
}

/* Phone CTAs above the fold (Zach, 10:28 AM PT 2026-10-15: "make the pre approval button fit on mobile").
   Phones only; desktop is untouched. Text Zach (primary) and the pre-approval link sit directly under the headline, then
   the trust strip (still fully above the bottom bar, as the phone audit requires), then the intro, the timing line and
   the HELOC link. The pre-approval button keeps its markup and classes (pinned by the hero test) and is restyled here as
   a quieter text link with an arrow, so it reads as secondary to Text Zach and keeps a 44px tap target. */
@media (max-width: 700px) {
  :root .hero-grid-v2 { gap: 0.85rem; }
  :root .eyebrow-hero { margin-bottom: 0.5rem; }
  :root .hero-display { font-size: clamp(2.1rem, 9.6vw, 2.7rem); margin-bottom: 0.85rem; }
  /* Mobile density pass (preview, 2026-10-16): the visual `order` values that put the buttons and the stats above the
     intro were removed here, so the phone hero reads in DOM (and focus) order; the block at the end of this file sets
     the spacing. The remaining declarations are unchanged. */
  .az-home .hero-copy > .btn-row { flex-direction: column; align-items: stretch; gap: 0.15rem; margin: 0 0 0.75rem; }
  .az-home .hero-copy > .trust-strip { margin: 0 0 1rem; padding-top: 0.7rem; gap: 0.3rem 0.9rem; }
  .az-home .hero-v2 .btn-row .hero-pa { width: auto; align-self: center; min-height: 44px; padding: 0.55rem 0.75rem; background: none; border: 0; box-shadow: none; color: var(--h-ink); font-size: 0.98rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--h-line-2); text-underline-offset: 0.3em; }
  .az-home .hero-v2 .btn-row .hero-pa::after { content: "→" / ""; margin-left: 0.4rem; text-decoration: none; display: inline-block; }
  .az-home .hero-v2 .btn-row .hero-pa:hover { background: none; color: var(--h-cobalt); text-decoration-color: currentColor; }
  .az-home .trust-strip .num { font-size: 1.3rem; }
  .az-home .trust-strip .lbl { font-size: 0.76rem; line-height: 1.3; }
}

/* Hero Call Zach (Zach approved shipping it, 1:13 PM PT 2026-10-15). Text Zach (primary, filled) and Call Zach
   (secondary, outline) sit side by side, the same pair as the phone bottom bar; the pre-approval link drops to its own
   row below as the smaller text-link action, on desktop and phones. */
.az-home .hero-copy > .btn-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.75rem; }
.az-home .hero-v2 .btn-row .hero-pa { grid-column: 1 / -1; justify-self: start; width: auto; min-height: 44px; padding: 0.5rem 0.1rem; background: none; border: 0; box-shadow: none; color: var(--h-ink); font-size: 1rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--h-line-2); text-underline-offset: 0.3em; transform: none; }
.az-home .hero-v2 .btn-row .hero-pa::after { content: "→" / ""; margin-left: 0.4rem; text-decoration: none; display: inline-block; }
.az-home .hero-v2 .btn-row .hero-pa:hover { background: none; color: var(--h-cobalt); text-decoration-color: currentColor; box-shadow: none; transform: none; }
@media (max-width: 700px) {
  .az-home .hero-copy > .btn-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .az-home .hero-v2 .btn-row .btn { width: 100%; padding-left: 0.6rem; padding-right: 0.6rem; }
  .az-home .hero-v2 .btn-row .hero-pa { width: auto; justify-self: center; padding: 0.4rem 0.75rem; font-size: 0.98rem; margin-top: -0.2rem; }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Mobile density pass (preview, 2026-10-16). Phones only (the site's 700px breakpoint); desktop is untouched. Groups the
   opening into readable blocks. Zach's feedback (2026-10-16): the portrait with its name tag stays first, shorter (13:9,
   about 240 to 270px tall at 390 to 430), and Text/Call sit as high as possible, so the pair with the pre-approval link
   follows the headline, then the stats strip, the pre-approval explanation, the intro and the HELOC link (Zach's
   placement for the strip, 2026-10-16). Applies the 20px gutter / 17px body / 12px button
   gap spacing system and trims nested card padding. No copy, markup, links or tracking change. No !important, no
   negative margins, no overflow clipping. */
@media (max-width: 700px) {
  :root .hero-band-v2 .hero { padding: var(--s-16) 0 var(--s-32); }
  :root .hero-grid-v2 { gap: 1.25rem; }
  /* Phone order (one place; site.css's older values are overridden here): portrait, pill, headline, Text/Call with the
     pre-approval link, the stats strip, the pre-approval explanation, intro, HELOC link. Zach's placement (2026-10-16):
     the strip right under the pair, as in production. Note: the strip's Experience.com link therefore sits visually
     above the HELOC link while following it in DOM order, exactly as production has had it. */
  .az-home .hero-copy > .eyebrow-hero { order: 1; }
  .az-home .hero-copy > .hero-display { order: 2; }
  .az-home .hero-copy > .btn-row { order: 3; }
  .az-home .hero-copy > .trust-strip { order: 4; } /* Zach, 2026-10-16 (late): the stats strip right under Text/Call, as in production */
  .az-home .hero-copy > .hero-pa-note { order: 5; }
  .az-home .hero-copy > .hero-lede { order: 6; }
  .az-home .hero-copy > .hero-heloc-link { order: 7; }
  .az-home .hero-portrait { order: -1; aspect-ratio: 13 / 9; width: 100%; max-width: none; border-radius: 20px; } /* first on phones, as in production; 13:9 is about 232 to 270px tall at 375 to 430 */
  .az-home .hero-portrait img { object-position: 50% 12%; } /* the phone-audit crop: the frame starts above the hair */
  :root .eyebrow-hero { margin-bottom: 1rem; }
  :root .hero-display { font-size: clamp(2.375rem, 10vw, 2.625rem); line-height: 1.02; margin: 0 0 1rem; }
  :root .hero-lede { font-size: 1.0625rem; line-height: 1.6; margin: 0.25rem 0 1.5rem; max-width: none; }
  /* Text Zach and Call Zach side by side (48px, 12px gap); the pre-approval link is its own row underneath, left-aligned,
     with its explanation directly below it, then the HELOC link. */
  .az-home .hero-copy > .btn-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0 0 1rem; }
  :root .hero-v2 .btn-row .btn { min-height: 48px; }
  .az-home .hero-v2 .btn-row .hero-pa { justify-self: start; margin-top: 0.5rem; padding: 0.4rem 0.1rem; font-size: 1rem; }
  .az-home .hero-copy > .hero-pa-note { margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.5; max-width: none; }
  .az-home .hero-copy > .hero-heloc-link { margin: 0 0 1.75rem; font-size: 1rem; }
  /* Identity and review strip: two columns that wrap into readable lines, not one crowded row. */
  .az-home .hero-copy > .trust-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; margin: 0 0 1.25rem; padding: 1.1rem 0 1.1rem; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); max-width: none; }
  .az-home .trust-strip li { display: flex; flex-direction: column; gap: 0.15rem; border: 0; padding: 0; margin: 0; min-width: 0; }
  .az-home .trust-strip li:nth-child(3), .az-home .trust-strip li.wide { grid-column: 1 / -1; }
  .az-home .trust-strip li.wide { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.4rem; padding: 0; border: 0; }
  .az-home .trust-strip .num { font-size: 1.5rem; }
  .az-home .trust-strip .lbl { font-size: 0.875rem; line-height: 1.4; }
  .az-home .trust-strip li.wide .lbl { font-size: 0.875rem; }
  .az-home .trust-strip .lbl a { padding: 0.8rem 0.15rem; margin: -0.8rem 0; } /* the existing inline tap-height technique at the new label size: 2 x 12.8px + the 19.6px line = 45px */
  /* Section rhythm: 56px between sections, 28px H2s, one padding layer per card. */
  .az-home .solutions, .az-home #funded, .az-home #offers, .az-home #answers, .az-home #all { padding-top: 3.5rem; }
  .az-home h2, .az-home .solutions h2, .az-home .proof-band h2 { font-size: clamp(1.7rem, 7.2vw, 1.9rem); line-height: 1.1; margin-bottom: 0.85rem; }
  .az-home section > h2 + .lede { margin-bottom: 1.25rem; }
  .az-home .sol-grid { gap: 0.75rem; margin-top: 1.25rem; }
  .az-home .sol-card { padding: 1.1rem 1.15rem 1rem; }
  :root .sc-band { padding-top: 3.5rem; }
  .az-home .fund-grid { gap: 0.75rem; }
  .az-home .fund-body { padding: 1.1rem 1.15rem 1rem; }
  .az-home .fund-amt { font-size: 1.7rem; }
  .az-home .fund-filter { gap: 0.5rem; margin-top: 1.25rem; }
  :root .proof-band { padding: 3.5rem 0; margin-top: 3.5rem; }
  .az-home .proof-marquee { margin: 1.75rem 0 1.5rem; }
  :root .proof-card { padding: 1.15rem 1.2rem 1.1rem; }
  :root .band-soft { padding: 3.5rem 0; }
  .az-home .steps li { padding: 1.15rem 1.2rem 1.1rem; }
  .az-home .callout-source { padding: 1.15rem 1.2rem; }
  .az-home .offer { padding: 1.1rem 1.15rem 1rem; }
  .az-home .fund-brand { padding: 1rem 1.1rem; }
  :root .lead-form-wrap { padding-top: 3.5rem; }
  :root .lead-form { padding: 1.25rem 1.15rem; }
  :root .home-final { padding: 3.5rem 0; }
  :root .home-final-panel { padding: 1.5rem 1.15rem; }
  :root .why-broker { padding-top: 3.5rem; }
  :root .why-broker-panel { gap: 0.85rem; padding: 1.5rem 1.15rem; border-radius: 20px; }
  :root .why-broker-copy p { font-size: 1rem; line-height: 1.6; }
  .az-home .why-broker-copy .why-broker-ask { font-size: 1.0625rem; margin-top: 1.25rem; }
  .az-home .why-broker-actions { gap: 0.6rem; margin-top: 1rem; }
  .az-home .why-broker-actions .btn-lg { min-height: 48px; }
  .az-home .why-broker-copy .why-broker-link { text-align: center; margin-top: 0.5rem; }
  .az-home .why-broker-link a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Phone cleanup (ship, 2026-10-17; ChatGPT Pro phone review 2026-10-16, Zach: "just ship it how u said"). Phones only, at
   the site's 700px breakpoint; desktop is untouched. The situation cards read as one line each with the arrow at the
   right (the Online / Answer / Situation / Browse tags and the near-duplicate subtitles step aside; home.js marks those
   with .sol-d-near), and the three hero figures sit in one deliberate row above the states line. No copy, markup, links
   or tracking change. No !important, no negative margins, no overflow clipping. */
@media (max-width: 700px) {
  /* Cards: title (and a subtitle only where it adds something) on the left, the arrow centred on the right. */
  .az-home .sol-tag { display: none; }
  .az-home .sol-d.sol-d-near { display: none; }
  .az-home .sol-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; row-gap: 0.2rem; align-items: center; min-height: 0; padding: 1rem 1.1rem; }
  .az-home .sol-card::before { display: none; }
  .az-home .sol-t { grid-column: 1; margin: 0; padding-right: 0; font-size: 1.0625rem; line-height: 1.35; }
  .az-home .sol-d { grid-column: 1; }
  .az-home .sol-go { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; opacity: 0.7; }
  .az-home .sol-grid:not(.sol-grid-more) > li:first-child .sol-card { transform: none; box-shadow: none; border-color: var(--h-line); }
  .az-home .sol-grid { gap: 0.6rem; }
  /* Stats: 10+, 5.0 and 66 in one row (the first two columns fit their figure, the reviews column takes the rest), the
     states line full width beneath. */
  .az-home .hero-copy > .trust-strip { grid-template-columns: auto auto minmax(0, 1fr); gap: 0.75rem 1.1rem; padding: 1rem 0; margin: 0 0 1.25rem; }
  .az-home .trust-strip li:nth-child(3) { grid-column: auto; }
  .az-home .trust-strip li.wide { grid-column: 1 / -1; }
}