/* ui.css — shared styles for UpZoned "materials" pages (buyers, lenders, investors, brokers).
   Mirrors the design tokens used on the main site so these pages look native.
   Legal/marketing copy on these pages is starter content — have the appropriate
   professionals (legal, securities, real-estate compliance) review before relying on it. */

:root{
  --teal:#1bbd9e; --teal-dark:#13937b; --teal-tint:#e9f8f4;
  --ink:#111111; --ink-soft:#4a4a4a; --ink-faint:#7a7a7a;
  --line:#e2e2e2; --paper:#ffffff; --wash:#f7f9f8; --indigo:#484890;
  --radius:12px; --maxw:1180px;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--teal-dark)}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,5vw,56px);line-height:1.05}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12}
h3{font-size:20px;line-height:1.25}
em{font-style:italic;color:var(--teal)}
p{margin:0}
.eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark)}

/* ---- logo + header ---- */
.mark{--ring:var(--teal);--fig:var(--indigo);width:32px;height:32px;flex:none}
.mark circle{fill:none;stroke:var(--ring);stroke-width:8}
.mark .fig{fill:var(--fig)}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.logo .word{font-family:var(--sans);font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1;color:var(--ink)}
.logo .word b{color:var(--teal);font-weight:800}
.logo .word .tld{font-style:normal;font-weight:600;color:var(--ink-faint)}
.hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1.5px solid var(--ink)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.hnav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hnav a{font-size:14.5px;font-weight:600;color:var(--ink-soft);text-decoration:none}
.hnav a:hover{color:var(--ink)}
.hnav a.is-current{color:var(--ink);border-bottom:2px solid var(--teal);padding-bottom:2px}
.hnav .btn{margin-left:2px}
@media(max-width:620px){.hnav{gap:14px}.hnav a.hide-sm{display:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:15px;line-height:1;padding:13px 20px;border-radius:999px;border:1.5px solid var(--ink);text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}
.btn--teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--sm{padding:9px 15px;font-size:14px}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}

/* ---- hero ---- */
.phero{background:var(--wash);border-bottom:1.5px solid var(--line)}
.phero__in{max-width:var(--maxw);margin:0 auto;padding:64px 24px 58px}
.phero h1{margin:16px 0 0;max-width:20ch}
.phero .lede{margin:20px 0 0;font-size:clamp(17px,1.6vw,19.5px);color:var(--ink-soft);max-width:60ch}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.crumb{font-size:13.5px;color:var(--ink-faint)}
.crumb a{color:var(--ink-faint);text-decoration:none}
.crumb a:hover{color:var(--ink)}

/* ---- sections ---- */
.section{padding:66px 0}
.section--wash{background:var(--wash)}
.section--tint{background:var(--teal-tint)}
.shead{max-width:680px;margin-bottom:40px}
.shead h2{margin:12px 0 0}
.shead p{margin:16px 0 0;color:var(--ink-soft)}
.lead-narrow{max-width:66ch}

/* ---- cards / grids ---- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:1fr 1fr}
.card{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radius);padding:28px}
.card h3{margin:0 0 8px}
.card p{color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark);display:block;margin-bottom:10px}
.card .stat{font-family:var(--serif);font-size:28px;line-height:1;color:var(--teal-dark);margin:6px 0 12px}

/* ---- numbered steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
.step{border-left:2px solid var(--line);padding-left:18px}
.step .n{font-family:var(--serif);font-size:26px;color:var(--teal);line-height:1}
.step h3{margin:8px 0 6px;font-size:18px}
.step p{color:var(--ink-soft);font-size:15px}

/* ---- example / disclaimer callouts ---- */
.eg{margin-top:14px;padding:14px 16px;background:var(--teal-tint);border-radius:10px;font-size:15px;line-height:1.55;color:#23302c}
.eg b{color:var(--teal-dark)}
.note{margin-top:26px;font-size:13.5px;line-height:1.7;color:var(--ink-faint);max-width:78ch}
.note b{color:var(--ink-soft);font-weight:600}
.ph{color:var(--ink);background:#fff4d6;border-bottom:1px solid #e7cf86;padding:0 3px;border-radius:3px;font-weight:600}

/* ---- CTA band ---- */
.band{background:var(--ink);color:#fff}
.band__in{max-width:var(--maxw);margin:0 auto;padding:56px 24px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.band h2{color:#fff;max-width:22ch}
.band .sub{color:#c9d0cd;margin-top:10px;max-width:52ch;font-size:16px}

/* ---- footer (matches main site) ---- */
.foot{background:var(--ink);color:#cfd5d2;margin-top:0}
.foot__in{max-width:var(--maxw);margin:0 auto;padding:46px 24px 30px}
.foot__top{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.foot__top .logo .word,.foot__top .logo .word b{color:#fff}
.foot__top .logo .word .tld{color:#8a918e}
.foot__top .mark{--fig:#fff}
.foot__nav{display:flex;flex-wrap:wrap;gap:20px}
.foot__nav a{color:#aab2af;text-decoration:none;font-size:14.5px}
.foot__nav a:hover{color:#fff}
.foot__legal{margin-top:26px;padding-top:22px;border-top:1px solid #2b2b2b;font-size:12px;color:#8a918e;line-height:1.7}
.foot__legal b{color:#cfd5d2}

@media (max-width:760px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-left:0;border-top:1.5px solid var(--line);padding-left:0;padding-top:16px}
  .section{padding:52px 0}
  .phero__in{padding:48px 24px 44px}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto;transition:none!important}}