/* Atlas Money: the Housing tab's landing (owner's Atlas-Housing mock, 2026-10-19).
   Markup: src/wizard/HousingHome.tsx into #hzHome (first child of #tab-home).
   The landing is the tab's root (body.hzland). The affordability flow (welcome,
   steps 1-7, Results) is UNCHANGED and parked behind the Buying card: index.html's
   landing script flips body.hzland off to show it and the top-bar chevron
   (#hzBack) flips it back on. Colors: atlas-colors.css tokens only; the mock's
   SELLING kicker #8A6D00 -> sunny-text, its outline -> the house hero outline. */

/* ---- landing <-> flow switch ---- */
#hzHome{display:none}
body.hzland #hzHome{display:block}
body.hzland #wzProg,body.hzland #wzRun,body.hzland .wzstep,body.hzland #wzNav{display:none!important}
/* the same frozen wallpaper as Budget / Net Worth / Goals (index.html paints theirs) */
body.hzland[data-tab="home"],body.hzland[data-under="home"],body.hzland:not([data-tab]){background:#F6FEE4!important}
body.hzland[data-tab="home"]::before,body.hzland[data-under="home"]::before,body.hzland:not([data-tab])::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:#F6FEE4 url("./atlas-bg.jpg") no-repeat center top/100% 100%}
html:has(> body.hzland[data-tab="home"]),html:has(> body.hzland:not([data-tab])){background:#F6FEE4}
/* the top bar's menu button stays (it is the only way to the menu) — ink on the light page */
body.hzland[data-tab="home"] .menubtn,body.hzland:not([data-tab]) .menubtn{color:#1C1C1E}
/* the way back out of the flow: a chevron on the top bar's left, Housing tab only */
#hzBack{display:none}
body[data-tab="home"]:not(.hzland) #hzBack,body:not([data-tab]):not(.hzland) #hzBack{display:grid}

/* ---- the page ---- */
#hzHome{font-family:"Inter Tight",system-ui,sans-serif;color:#1C1C1E;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;padding:0 0 40px} /* owner 2026-10-23: the shared header carries the safe area */
#hzHome .hz-h1{font-family:inherit;font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#1C1C1E;margin:0 0 20px} /* owner 2026-10-23: 36px under the header; the small "Housing" line is gone */

.hz-big{position:relative;display:flex;align-items:stretch;min-height:232px;background:#FFFFFF;border-radius:26px;box-shadow:0 0 0 5px rgba(215,243,171,.55),0 18px 40px rgba(22,88,0,.16);overflow:hidden;margin:0 5px 22px;color:inherit;cursor:pointer;transition:transform .15s}
.hz-big:active{transform:scale(.98)}
.hz-txt{flex:1;padding:20px 12px 20px 20px;display:flex;flex-direction:column;min-width:0}
.hz-kick{font-size:11px;font-weight:800;letter-spacing:.08em;color:#259200}
.hz-big.sell .hz-kick{color:#3D2E00}
.hz-ttl{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-top:6px}
.hz-desc{font-size:13.5px;color:#6E6E73;font-weight:500;line-height:1.35;margin-top:6px}
.hz-prog{margin-top:auto;padding-top:16px}
.hz-pl{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:6px}
.hz-pl b{font-weight:700}
.hz-pl span{color:#6E6E73;font-weight:600}
.hz-bar{height:8px;border-radius:4px;background:#F2F2F7;overflow:hidden}
.hz-bar i{display:block;height:100%;border-radius:4px;background:#33CC00;transition:width .3s ease}
.hz-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:20px;background:#1C1C1E;color:#FFFFFF;font-size:14px;font-weight:700}
.hz-art{width:140px;overflow:hidden;flex-shrink:0;display:flex;align-items:flex-end;justify-content:center}
.hz-art.buy{background:#EBFAE6}
.hz-art.sell{background:#FFF4C7}

.hz-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:2px}
.hz-tile{background:rgba(255,255,255,.72);border-radius:20px;padding:12px 14px}
.hz-tl{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#6E6E73}
.hz-ti{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.hz-tv{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.hz-ts{font-size:12px;color:#6E6E73;font-weight:600;margin-top:2px}

.hz-sec{font-size:13px;font-weight:800;letter-spacing:.06em;color:#1C1C1E;margin:22px 4px 8px}
.hz-list{background:rgba(255,255,255,.72);border-radius:20px;padding:2px 14px}
.hz-li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #F2F2F7;cursor:pointer}
.hz-li:active{opacity:.6}
.hz-li:last-child{border-bottom:none}
.hz-lic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hz-lt{flex:1;font-size:15px;font-weight:700}
.hz-lt span{display:block;font-size:12.5px;color:#6E6E73;font-weight:500;margin-top:1px}