/* Marker / Cobalt overrides for lowdownhomesnow.com (design/design.md section 6.1).
Served by the Worker at /site.css and loaded by one in Webflow's
Site settings > Custom code > Head code, so this file is the source of truth.
The Designer canvas does not load head code, so the Designer shows the
pre-override look; the published site is the truth. Colors and fonts are
also set as Webflow variables and classes; this carries only what the
Designer can't express globally: pills, radii, shadows, weights, the
active-link underline, the footer, and hiding the stock skyline photos.
Hover transitions and transforms are deliberately untouched. A signal
button's hover is Ink with Chalk text, the same pairing the Button
component's own hover state now carries, so canvas and site agree. */
:root{--m-stone:#EDECE6;--m-chalk:#FBFBF8;--m-putty:#E1E0D8;--m-ash:#67665F;--m-graphite:#4B4B47;--m-ink:#171716;--m-cobalt:#1E4BE8;--m-cobalt-deep:#10246B;--m-line:rgba(23,23,22,.16)}
/* His 2026-09-14 review, round 7: Section 8 and Saved Homes still read as
"different" after the process/recent-homes/faq sweep. Root cause on
Saved Homes: its sections sit directly on with no Stone-colored
wrapper div the way Home's page_wrapper provides, and body's own
Webflow default is white, so any gap shows white instead of Stone; a
sitewide body background closes that gap on every page, not just this
one. Saved Homes' own main section (.section-12) was also off-token by
a few RGB points (#edf0ea, not #edece6), close enough to look right in
isolation and wrong next to a page that's actually Stone. Both pages
also share `.new-listings-form` (the "Get New Owner-Financed Homes"
signup band), which is a flat rgba(0,0,0,.7), not a real color: a
leftover darkening scrim for a background photo that's already gone
(confirmed no bg-image left under it), never converted to the flat Ink
the equivalent .section.cta bands got. */
body{background-color:var(--m-stone)}
.section-12{background-color:var(--m-stone)}
.new-listings-form{background-color:var(--m-ink)!important}
h1,h2,h3,h4,h5,h6,.heading_style-h2,.heading_style-h3,.heading-style-h5,.market-card-title{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.01em}
body,p,a,li,input,textarea,select,button,.nav_link,.footer_link{font-family:Archivo,sans-serif}
.text_size-regular.center,.nav_link.w--current{font-family:Archivo,sans-serif}
.anm_stagger_btn_wrap,.anm_stagger_btn_wrap.different,.anm_stagger_btn_wrap.submit,.btn-primary,.w-button{border-radius:999px;background-color:var(--m-cobalt);color:var(--m-chalk);font-weight:600}
.anm_stagger_btn_wrap:hover,.btn-primary:hover,.w-button:hover{background-color:var(--m-ink);color:var(--m-chalk)}
.btn-secondary{border-radius:999px;border:1.5px solid var(--m-ink);color:var(--m-ink);background-color:transparent;font-weight:600}
.btn-secondary:hover{background-color:var(--m-ink);color:var(--m-chalk)}
.btn-secondary.btn-secondary-cta{border-color:var(--m-chalk);color:var(--m-chalk)}
.btn-secondary.btn-secondary-cta:hover{background-color:var(--m-chalk);color:var(--m-ink)}
.market-card,.home-card-inner{border-radius:12px;box-shadow:none;background-color:var(--m-chalk);border:1px solid var(--m-line)}
.navbar{background-color:rgba(251,251,248,.86);box-shadow:none;border:1px solid var(--m-line)}
.nav_link{color:var(--m-graphite)}
.nav_link:hover{color:var(--m-ink)}
.nav_link.w--current{color:var(--m-ink);box-shadow:inset 0 -2px 0 var(--m-cobalt)}
.navbar_brand,.navbar_brand.w--current{max-width:240px}
.logo,.Footer_brand img,.footer_block img{height:52px;width:auto;max-width:none;flex:none;object-fit:contain}
.section.footer .footer_brand,.section.footer .w-nav-brand{width:auto;max-width:none;min-width:180px;float:none;display:block}
/* Footer: the site is light-only (design.md 1.3), so Stone with Marker's 2px strong rule on top, not an Ink block.
Two footers exist in the DOM: the Designer's .section.footer and the older .section-footer / .footer-bottom bar. */
.section.footer,.section-footer{background-color:var(--m-stone);color:var(--m-ink);border-top:2px solid var(--m-ink);border-radius:0;top:0}
.footer_link,.footer_link.w--current,.footer-link,.section.footer a,.section-footer a{color:var(--m-graphite)}
.footer_link:hover,.footer-link:hover,.section.footer a:hover,.section-footer a:hover{color:var(--m-ink);text-decoration:underline}
.footer-bottom,.text-block-21{background-color:var(--m-stone);color:var(--m-ash)}
.section.footer h5,.section.footer .text-block-22,.section.footer [class*="heading"]{font-family:Archivo,sans-serif;font-weight:800;color:var(--m-ink)}
/* Listings pagination (class "button" on Webflow's pagination links) and the form success box were Cobalt with Ink text. */
.button,.w-pagination-previous,.w-pagination-next{color:var(--m-chalk);background-color:var(--m-cobalt);border-radius:999px;font-weight:600}
.button:hover,.w-pagination-previous:hover,.w-pagination-next:hover{background-color:var(--m-ink);color:var(--m-chalk)}
.w-form-done,.form_message-success{color:var(--m-chalk);border-radius:12px}
.w-form-done div,.form_message-success div{color:var(--m-chalk)}
/* Form submit inputs: Webflow's own input.w-button rule outranks a bare .w-button, so match it. */
input.w-button,input.anm_stagger_btn_wrap{color:var(--m-chalk);background-color:var(--m-cobalt);border-radius:999px}
input.w-button:hover,input.anm_stagger_btn_wrap:hover{background-color:var(--m-ink);color:var(--m-chalk)}
.section-hero{background-color:var(--m-stone)}
.market_image{display:none}
/* His 2026-09-14 review: the market card's photo slot still reserved its
full height with the image hidden, leaving a dead band above the cards.
The How It Works process card lost its right-hand column when its photo
came out and never re-centered, leaving a dead band to its right. The
footer's decorative divider sits alone between two far-apart columns
with nothing near it, reading as clutter around empty space rather than
a separator. */
.market_image-wrap{display:none}
.process_wrapper{justify-content:center;margin-left:auto;margin-right:auto}
/* His 2026-09-14 review, round 3: centering a narrow 850px card in a 1320px
container still reads as "blank space on the right", since centering
doesn't change how little of the width the card actually uses. Revamped
per his explicit "revamp it if needed": this was built as an auto-
rotating single-column accordion (Webflow Tabs), each numbered step a
clickable tab whose body paragraph only shows while that tab is active,
which is exactly why the card is narrow, it was never meant to show all
3 steps at once. The tab CONTENT panes (.auto-tabs-pane) turned out to
be empty on the live page, dead markup; the real heading+body text lives
inside each .auto-tabs_tab button itself. Forcing every description
visible and laying the 3 tabs out as a grid turns the same real content
(no new copy) into 3 side-by-side step cards spanning the container,
the same visual language as the "Why Owner-Financing Works" 01-04 grid
right below it on this page. */
.process_wrapper{width:100%!important}
/* Round 4, same day, after his phone screenshots. Three things were still
wrong with this section. (1) On Home, process-inner-wrapper is still a
2-column grid (632px 632px), the old photo column that Session B closed
on How It Works but not here, so the whole card sat in the left half with
the right half blank. (2) The tabs lived inside auto-tab-wrapper's own
gray rounded box, so the 3 new cards rendered as cards inside a card.
(3) repeat(3,1fr) forced 3 columns at every width; a 1fr track can't
shrink below its longest word, so on a phone the grid was ~450px wide
in a ~350px container and the whole page scrolled sideways. Now: the
inner grid is a plain block, the gray box is gone, the heading centers
over the cards like every other section title, tracks are minmax(0,1fr)
so they can never overflow, and phones get one column. */
.process-inner-wrapper{display:block!important;grid-template-columns:none!important}
.process_wrapper .auto-tab-wrapper{width:100%!important;max-width:none!important;background-color:transparent!important;border-radius:0!important;box-shadow:none!important}
.process_wrapper .auto-tab-content{padding:0!important;display:block!important}
.process_wrapper .auto-tab-content .heading_style-h2{text-align:center;margin:0 0 32px}
.process_wrapper .auto-tabs{width:100%}
.process_wrapper .auto-tabs_menu{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;min-width:0}
.process_wrapper .auto-tabs_tab{display:block;min-width:0;background-color:var(--m-chalk);border:1px solid var(--m-line)!important;border-radius:12px;padding:32px 28px;height:auto!important;text-align:left}
.process_wrapper .auto-tabs_tab .heading_style-h3{font-size:22px;line-height:1.25;margin:0 0 12px}
.process_wrapper .auto-tabs_description{display:block!important;max-height:none!important;padding:0!important}
.process_wrapper .auto-tabs_description p{margin:0}
.process_wrapper .auto-tabs_timer-bar,.process_wrapper .auto-tabs_content,.process_wrapper .auto-tabs_pause-btn{display:none!important}
/* Same shrink-to-fit-without-centering bug as process_wrapper, found on a
systematic left/right symmetry pass after his "still not centered in
various places" report: any wrapper narrower than its .container that
has no margin sits flush left instead of centered. recent_home-wrapper
(Home's "Recently Added Homes") and section_wrapper (How It Works' "Why
Owner-Financing Works" 01-04 grid) both had this, 47px and 280px off
center respectively, confirmed by measuring left/right gaps, not by
eyeballing a screenshot. */
.recent_home-wrapper,.section_wrapper{margin-left:auto;margin-right:auto}
.section.footer .divider{display:none}
/* His 2026-09-14 review, part 2. The hero's min-height:100vh is a leftover
from when it held a full-bleed photo (removed in the no-images pass); with
one flex child and justify-content:space-between, any viewport taller than
the content left the rest as blank space below the content, before the Ink
band. Content now sets the height instead. The Ink band's info strip
(hero_bottom_inner-wrap: Phone/Email/No Banks) is a single short grid row
that wasn't stretching to match its sibling (the headline+form column), so
it sat at the top of the column with the rest of the column blank below
it; stacking its 3 items into one column and centering them in the full
stretched height reads as a real second column instead of a dead gap.
It also sat 110px short of the container's right edge with zero gap to
its sibling, its own width was just content-sized with no flex-grow;
flex:1 lets it fill the rest of the row, centered text reads better
once the box is wider than its content. */
.section.hero{min-height:auto}
/* His 2026-09-14 review, round 5: the hero's "Newest Listing" card sat flush
left inside its own half of the container instead of against the
container's right edge. .w-dyn-list (the card's Webflow-generated
wrapper) stretched to ~48% of the container's width while the actual
card inside is only ~370px, leaving a large dead gap between the
visible card and the container's true right edge that read as the
whole hero being shoved left, not a left/right-alignment problem in the
text column itself (measured: the container and both flex children are
correctly centered and sized; the wrapper around the card just doesn't
match its own content's width). Shrinking the wrapper to its content and
pushing the two children to the container's own edges puts the card
flush right, matching design.md's "card on the right" intent exactly.
Scoped to desktop: below 767px the container is already flex-column
with width:100% children (existing mobile block), and justify-content
in column mode would space the two children vertically instead. */
.section.hero .w-dyn-list{width:auto;max-width:372px;flex:0 1 auto}
@media screen and (min-width:768px){
.section.hero .container{justify-content:space-between}
}
/* Same review: several content sections carried stray, non-token near-
white/gray backgrounds left over from before the restyle (Webflow
defaults, never explicitly set) instead of the Stone canvas every other
section uses, reading as inconsistent gray banding down the page. None
of #fafafa, #ffffff, or #e7e7e7 is one of Marker's seven neutrals. */
.section.process,.section.recent-homes,.section.faq{background-color:transparent}
/* Round 4: the Ink band's headline sat in the top-left corner of the black
block, ~20px under its top edge, because the band had no padding of its
own (a leftover min-height:720px was doing the spacing, badly) and the
headline lived inside the left column with the form, so it could never
center on the band. The fix is a grid on the container with the left
column's box dissolved (display:contents), which lets the headline and
lead line span both columns, centered, with the form and the contact
info as two equal columns beneath them. First scoped with
:has(.primary-cta); rewritten to a plain class (ink-band-split, added by
hand to just this one container in the Designer) after he reported the
whole fix still not showing on his real phone, since :has() with a child
combinator is exactly the kind of thing that can silently fail to parse
on an older WebKit and leave a rule dropped with no error, no fallback,
nothing to see in a Chromium-based test. Plain classes can't do that. */
/* Webflow's .w-container clearfix (::before/::after with display:table)
turns into phantom flex/grid items once the container is flex or grid,
picking up gap and grid cells; drop them on the two containers this
file lays out. */
.section.hero .container::before,.section.hero .container::after,.section.cta .container::before,.section.cta .container::after{display:none!important;content:none!important}
.section.cta:has(.ink-band-split),.section.cta:has(.primary-cta){min-height:0!important;padding:80px 0 88px}
.ink-band-split{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;row-gap:0;align-items:stretch;padding:0 20px}
.ink-band-split .primary-cta{display:contents}
.ink-band-split h2{grid-column:1/-1;text-align:center;max-width:820px;margin:0 auto 14px}
.ink-band-split .text-block-24{grid-column:1/-1;text-align:center;max-width:640px;margin:0 auto 44px}
.ink-band-split .div-block-12{grid-column:1;justify-self:center;width:100%;max-width:520px;margin:0}
.hero_bottom_inner-wrap{grid-column:2;align-self:stretch;height:auto!important;grid-template-columns:1fr;align-content:center;row-gap:32px;justify-items:center;text-align:center;flex:1;margin:0}
/* The 3 items' border-right separated adjacent columns in the old 3-across
row; stacked into 1 column each item is now full-width, so that border
renders as a stray vertical tick at the far right with nothing beside it
to separate. */
.hero_bottom-item{border-right:none!important}
/* The market ticker (Session C, 2026-09-14): a static, linked, wrapping strip
of markets between the hero and the Ink band, replacing what was dead
space with real content. Targets Webflow's own .w-dyn-* classes rather
than a custom class on the list wrapper, since the section itself already
carries market-ticker. */
/* Round 4: 14 pills spread edge to edge across a 1600px screen with two
orphans centered on a second line, sitting directly on the Ink band with
zero padding below, read as leftover chips rather than a designed strip.
Now it's a contained block: a mono kicker (the same "// KICKER" used on
every page head) names what the strip is, the list is capped at 900px so
it wraps into balanced rows, and it gets equal breathing room above and
below. Phones get smaller pills and tighter gaps. */
/* His 2026-09-14 review, round 8: a sitewide pass (every page, not just
the two he flagged) turned up four more stray, non-token grays, none
of them section backgrounds this time but card-like surfaces sitting
on top of one: FAQ's currently-open question (#f5f5f5, a Webflow
default), the application and contact forms' outer card (#fff), and
the property page's "Home Overview" card and inquiry-form card (#fff,
with an inner #f5f5f5 sub-panel). Cards get Chalk like market-card and
home-card-inner already do; the recessed sub-panel gets Putty, the
token this system already uses for a recessed surface inside a card. */
.faq_tab-link.w--current{background-color:var(--m-putty)}
.form_field-box,.white-block,.contact_wrapper{background-color:var(--m-chalk)}
.contact_base{background-color:var(--m-putty)}
/* His 2026-09-14 review, round 9: Section 8's four "How It Works for
Investors" cards (.div-block-4) center-align by default, but each
card's heading has its own class overriding back to left, so the
heading reads left and the body paragraph below it, a plain unstyled