/* ===== Fairbeez FRIENDLY VISUALS (Nov 13, 2026) =====
   Shared by owners, brokers, lenders, how-estimates-work, pricing, advertise, quote and 404.
   Photo heroes, icon step rows, stat chips and icon lists. Uses each page's own CSS tokens
   (--honey --brand --ink --muted --line --card --soft --bg), so light and dark mode follow the page.
   Photos are general scene imagery (img/people/CREDITS.md): never captioned as customers, testimonials or named people. */

/* photo hero: text left, photo right; stacks on phones */
.fx-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center;margin:0 0 24px}
.fx-hero .lede{margin-bottom:16px}
.fx-hero .fx-cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.fx-photo{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--soft);box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(36,23,10,.10)}
.fx-photo img{display:block;width:100%;height:100%;object-fit:cover}
.fx-hero .fx-photo{aspect-ratio:4/3.4}
.fx-hero .fx-photo.tall{aspect-ratio:4/4.6}
.fx-photo .fx-tagl{position:absolute;left:12px;bottom:12px;background:var(--bg);color:var(--ink);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.15)}
@media (max-width:720px){
  .fx-hero{grid-template-columns:1fr;gap:18px}
  .fx-hero .fx-photo,.fx-hero .fx-photo.tall{aspect-ratio:16/10;order:-1}
}

/* wide photo band (below the fold) */
.fx-band{margin:18px 0;aspect-ratio:21/8}
@media (max-width:560px){.fx-band{aspect-ratio:16/9}}

/* side-by-side: short text + small photo */
.fx-split{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:22px;align-items:center;margin:12px 0}
.fx-split .fx-photo{aspect-ratio:4/3.2}
.fx-split p{margin:0 0 10px}
@media (max-width:620px){.fx-split{grid-template-columns:1fr}.fx-split .fx-photo{aspect-ratio:16/9}}

/* round icon */
.fx-ico{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--soft);color:var(--brand);display:grid;place-items:center;box-shadow:0 0 0 1px var(--line)}
.fx-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-ico.sm{width:34px;height:34px}.fx-ico.sm svg{width:19px;height:19px}

/* 3-or-4-step "how it works" row */
.fx-steps{list-style:none;padding:0!important;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px;counter-reset:fx}
main.page .fx-steps li{margin:0;max-width:none;position:relative;counter-increment:fx;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:16px 16px 14px}
.fx-steps .fx-ico{margin-bottom:10px}
.fx-steps li::after{content:counter(fx);position:absolute;top:12px;right:14px;font:900 13px/22px var(--display);width:22px;height:22px;border-radius:50%;text-align:center;background:var(--honey);color:var(--honey-ink)}
.fx-steps.nonum li::after{display:none}
.fx-steps b{display:block;font-size:15.5px;margin-bottom:3px}
.fx-steps span{display:block;font-size:14px;color:var(--muted);line-height:1.4}

/* cards with an icon on top (replaces plain .card text blocks) */
.fx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin:14px 0}
.fx-cards>*{border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:16px 18px;text-decoration:none;color:inherit;display:block}
a.fx-cardl:hover{box-shadow:0 0 0 2px var(--honey)}
.fx-cards .fx-ico{margin-bottom:10px}
main.page .fx-cards h3{margin:0 0 4px;font-size:16px}
main.page .fx-cards p{margin:0;font-size:14.5px;color:var(--muted)}
.fx-cards .fx-go{display:inline-block;margin-top:8px;font-weight:700;font-size:14px;color:var(--brand)}

/* phones: icon beside the text, so stacked cards and steps stay short */
@media (max-width:560px){
  .fx-cards{gap:10px}
  .fx-cards>*{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:14px}
  .fx-cards .fx-ico{grid-row:span 3;margin:0}
  .fx-steps{gap:10px}
  main.page .fx-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:12px 40px 12px 12px}
  .fx-steps .fx-ico{grid-row:span 2;margin:0}
  .fx-split .fx-photo{aspect-ratio:16/8}
}

/* stat / fact chips: only real figures from the page */
.fx-chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;padding:0!important;list-style:none}
main.page .fx-chips li{margin:0;max-width:none}
.fx-chip{display:flex;align-items:center;gap:10px;border-radius:14px;background:var(--soft);padding:10px 14px 10px 10px;box-shadow:0 0 0 1px var(--line)}
.fx-chip b{display:block;font-family:var(--display);font-weight:900;font-size:20px;line-height:1.1;color:var(--brand)}
.fx-chip small{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.fx-chip .fx-ico{width:36px;height:36px;background:var(--bg)}.fx-chip .fx-ico svg{width:20px;height:20px}

/* icon bullet list */
.fx-list{list-style:none;padding:0!important;margin:12px 0}
main.page .fx-list li{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px}
.fx-list .fx-ico{width:34px;height:34px}.fx-list .fx-ico svg{width:19px;height:19px}
.fx-list li>div{padding-top:5px}
.fx-list.no .fx-ico{color:var(--bad)}

/* photo tiles (404 city links) */
.fx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 0}
.fx-tile{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;text-decoration:none;box-shadow:0 0 0 1px var(--line)}
.fx-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.fx-tile:hover img{transform:scale(1.04)}
.fx-tile span{position:absolute;left:10px;bottom:10px;background:var(--bg);color:var(--ink);border-radius:20px;padding:4px 11px;font-weight:700;font-size:14px}
@media (max-width:560px){.fx-tiles{grid-template-columns:1fr 1fr}.fx-tiles .fx-tile:last-child{grid-column:1/-1;aspect-ratio:16/7}}

/* diagrams */
.fx-fig{margin:16px 0;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:16px 18px}
.fx-fig svg{display:block;width:100%;height:auto}
.fx-fig figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.fx-fig .t{fill:var(--ink);font:700 14px var(--body)}
.fx-fig .s{fill:var(--muted);font:500 12.5px var(--body)}
.fx-fig .bar0{fill:var(--line)}
.fx-fig .bar1{fill:var(--honey)}
.fx-fig .bar2{fill:var(--brand)}
.fx-fig .ln{stroke:var(--ink);stroke-width:2.5}

/* inputs -> result (how-estimates-work "What goes into it") */
.fx-flowto{display:flex;justify-content:center;color:var(--honey);margin:-4px 0 -6px}
.fx-flowto svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
main.page .fx-result{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;max-width:none;margin:8px auto 16px;width:fit-content;max-width:100%;background:var(--honey);color:var(--honey-ink);border-radius:14px;padding:12px 22px;font-size:15px}
.fx-result b{font-family:var(--display);font-weight:900;font-size:20px}
/* old in-page anchors kept so existing links land on the nearest section */
.fx-a{display:block;height:0;scroll-margin-top:84px}

/* range bars (confidence) built from HTML so text wraps on phones */
.fx-range{display:grid;grid-template-columns:110px minmax(0,1fr) 118px;gap:8px 12px;align-items:center;margin:14px 0}
.fx-range .lab{font-weight:700;font-size:14px}
.fx-range .val{font-size:13.5px;color:var(--muted);text-align:right}
.fx-range .trk{position:relative;height:16px;border-radius:9px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.fx-range .rng{position:absolute;top:0;bottom:0;border-radius:9px;background:linear-gradient(90deg,var(--honey),var(--brand))}
.fx-range .rng::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink)}
@media (max-width:420px){.fx-range{grid-template-columns:86px minmax(0,1fr) 64px;gap:8px}}

/* stacked points bar (listing standards) */
.fx-pts{display:flex;height:40px;border-radius:10px;overflow:hidden;margin:12px 0 6px;box-shadow:0 0 0 1px var(--line)}
.fx-pts>span{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--honey-ink);min-width:0;white-space:nowrap;overflow:hidden}
.fx-pts>span:nth-child(odd){background:var(--honey)}
.fx-pts>span:nth-child(even){background:var(--band)}
.fx-ptsk{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--muted);margin:0 0 12px}
.fx-ptsk b{color:var(--ink)}

/* analytics ask (404 / coming soon) */
.fx-ask{max-width:520px;margin:26px auto 0;border-radius:14px;background:var(--soft);box-shadow:0 0 0 1px var(--line);padding:14px 16px;text-align:left;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fx-ask p{margin:0;flex:1 1 220px;font-size:14.5px}

/* report tiers comparison card (fb-tiers.js REPORT_TIERS): Fairbeez Estimate (free) vs Full Fairbeez Report.
   Used in the app (owner estimate, buyer check, report gate) and on pricing / owners / brokers pages. Stacks on phones. */
.fbt{margin:14px 0;font-size:14px;line-height:1.4;color:var(--ink)}
.fbt *{box-sizing:border-box}
.fbt-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fbt-l li.fbt-gh{display:block;margin:10px 0 4px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fbt-l li.fbt-gh:first-child{margin-top:0}
.fbt-earn ul{margin:4px 0 0;padding-left:18px}.fbt-earn li{margin:3px 0}.fbt-earn p{margin:0;max-width:none}
.fbt-c{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:14px;background:var(--card,var(--bg));box-shadow:0 0 0 1px var(--line);padding:14px 14px 12px}
.fbt-c.hl{box-shadow:0 0 0 2px var(--honey),0 6px 18px rgba(36,23,10,.08)}
.fbt-tag{position:absolute;top:-10px;right:12px;background:var(--honey);color:var(--honey-ink);border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:800;letter-spacing:.02em}
.fbt-lab{margin:0 0 8px;max-width:none}
.fbt-lab b{display:block;font:900 16px/1.2 var(--display,inherit);color:var(--brand)}
.fbt-lab .fbt-p{display:block;font-weight:800;font-size:14px;margin-top:3px}
.fbt-lab .fbt-p.sm{font-weight:600;font-size:13px;color:var(--muted);margin-top:1px}
.fbt-lab i{display:none}
.fbt-hd{display:flex;flex-direction:column;margin:0 0 8px}
.fbt-hd .fbt-lab{display:contents}
.fbt-hd .fbt-lab b{order:0}
.fbt-sub{order:1;margin:2px 0 0;font-size:13px;font-weight:800;color:var(--ink);max-width:none}
.fbt-hd .fbt-p{order:2}
.fbt-l li.n{color:var(--muted)}
.fbt-dash{flex:0 0 17px;width:17px;text-align:center;font-weight:800;color:var(--muted)}
.fbt.fold:not(.open) .fbt-l li.more{display:none}
.fbt-more{display:inline-block;margin:8px 0 0;font-weight:700}
.fbt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fbt-note{margin:10px 0 0;font-size:13px;color:var(--muted);max-width:none}
.fbt-l{list-style:none;margin:0 0 10px;padding:0}
.fbt-l li{display:flex;gap:8px;align-items:flex-start;margin:0 0 6px;font-size:13.5px;max-width:none}
.fbt-ck{flex:0 0 17px;width:17px;height:17px;margin-top:1px}
.fbt-ck circle{fill:var(--band)}
.fbt-ck path{fill:none;stroke:var(--ok,#2E7D4F);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fbt-f{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px}
.fbt-f .btn{white-space:normal;text-align:center}
.fbt-now,.fbt-soon{display:inline-block;font-size:13px;font-weight:700;color:var(--muted);padding:6px 0}
.fbt-soon{border-radius:20px;background:var(--soft);box-shadow:0 0 0 1px var(--line);padding:5px 10px}
.fbt-bundle,.fbt-earn{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:13.5px;max-width:none}
.fbt-fine{margin:8px 0 0;font-size:12px;color:var(--muted);max-width:none}
/* phones: stacked cards; each card's tier header (name + price) stays pinned while its checklist scrolls */
@media (max-width:760px){.fbt-g{grid-template-columns:minmax(0,1fr);gap:14px}.fbt-c{padding:0 12px 12px}
  .fbt-hd{position:sticky;top:0;z-index:1;background:var(--card,var(--bg));margin:0 -12px 8px;padding:12px 12px 8px;border-radius:14px 14px 0 0;box-shadow:0 1px 0 var(--line)}
  .fbt-c.hl .fbt-hd{box-shadow:0 1px 0 var(--honey)}}
@media print{.fbt{display:none}}