/* Mero Loan public site. The logo's own colours; system fonts only, so the
   page needs nothing from any other site. */
:root{
  --bg:#f3f7fa; --card:#ffffff; --line:#d6e2eb;
  --fg:#0b2a40; --dim:#4a6175; --mero:#072a47; --loan:#16507d; --teal:#17806c;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0b1f31; --card:#112b42; --line:#284a68;
  --fg:#e6eef6; --dim:#9ab2c6; --mero:#c4e4f7; --loan:#8cc3ef; --teal:#4fd1b0;
  color-scheme:dark } }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  display:flex;flex-direction:column;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
.wrap{flex:1;width:100%;max-width:720px;margin:0 auto;padding:clamp(40px,10vh,110px) 20px 40px}
.brand{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mark{width:96px;height:auto;border-radius:12px;background:#fff;padding:4px}
.word{margin:0;font-size:clamp(34px,7vw,48px);line-height:1.05;letter-spacing:.01em;font-weight:700}
.mero{color:var(--mero)} .loan{color:var(--loan)}
.tagline{margin:6px 0 0;color:var(--dim);font-size:15px}
.lede{font-size:clamp(20px,3.4vw,25px);line-height:1.35;margin:44px 0 18px;max-width:30ch;text-wrap:balance;font-weight:600}
.points{margin:0;padding:0;list-style:none;display:grid;gap:10px;max-width:58ch;color:var(--dim)}
.points li{padding-left:22px;position:relative}
.points li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--teal)}
.soon{display:inline-flex;align-items:center;gap:10px;margin:40px 0 0;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-weight:600;font-size:14px;letter-spacing:.03em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.foot{max-width:720px;width:100%;margin:0 auto;padding:20px;color:var(--dim);font-size:13px;border-top:1px solid var(--line)}