/* Yelto site: tokens, top bar, buttons, footer and the long-form (legal, 404) pages, shared by every page.
   The tokens mirror the dashboard's (relay-business/src/styles/tokens.css): same names where they exist, Poppins, pill buttons.
   The home page's own sections are in landing.css. Light and dark follow the system; <html data-theme> overrides. */
@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/Poppins-400.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/Poppins-500.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/Poppins-600.woff2) format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/Poppins-700.woff2) format("woff2"); }
:root {
  --bg:#ffffff; --surface:#ffffff; --panel:#f5f6f8; --canvas:#e4e6ea; --line:#e6e8ec; --edge:#b8bdc6;
  --ink:#1d1f24; --ink-2:#4a505b; --ink-3:#6b7280;
  --acc:#f04444; --acc-text:#c93030; --acc-btn:#d43535; --on-acc:#fff; --acc-soft:#fde9e9;
  --blue:#3566c9; --blue-soft:#e9f0fe; --ok:#17784b; --ok-soft:#e3f5ec; --warn:#8a5600; --warn-soft:#fff1d9;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-app:30px; --r-card:24px; --r-tile:16px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  --lp-max:1280px; --lp-gutter:24px;
  --lp-btn:#1d1f24; --lp-on-btn:#fff; --lp-btn-sweep:#d43535;
  --lp-nav-shadow:0 6px 30px -12px rgba(29,31,36,.25);
  --lp-card-shadow:0 2px 0 rgba(29,31,36,.04),0 14px 30px -16px rgba(29,31,36,.3);
  --lp-block:#c93030; --lp-on-block:#fff; --lp-block-line:rgba(255,255,255,.28);
  color-scheme:light;
}
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) {
  --bg:#0c0d10; --surface:#16181c; --panel:#1f2227; --canvas:#0c0d10; --line:#2a2e35; --edge:#474d57;
  --ink:#eceef2; --ink-2:#b4b9c3; --ink-3:#8b919d;
  --acc:#ff5a5a; --acc-text:#ff7070; --acc-btn:#ff5a5a; --on-acc:#16181c; --acc-soft:#3a1a1a;
  --blue:#7aa5ff; --blue-soft:#1c2740; --ok:#43c58a; --ok-soft:#12301f; --warn:#ffb340; --warn-soft:#33260f;
  --lp-btn:#eceef2; --lp-on-btn:#0c0d10; --lp-btn-sweep:#ff5a5a;
  --lp-nav-shadow:0 6px 30px -12px rgba(0,0,0,.7); --lp-card-shadow:0 14px 30px -16px rgba(0,0,0,.7); --lp-block:#a82424;
  color-scheme:dark; } }
:root[data-theme="dark"] {
  --bg:#0c0d10; --surface:#16181c; --panel:#1f2227; --canvas:#0c0d10; --line:#2a2e35; --edge:#474d57;
  --ink:#eceef2; --ink-2:#b4b9c3; --ink-3:#8b919d;
  --acc:#ff5a5a; --acc-text:#ff7070; --acc-btn:#ff5a5a; --on-acc:#16181c; --acc-soft:#3a1a1a;
  --blue:#7aa5ff; --blue-soft:#1c2740; --ok:#43c58a; --ok-soft:#12301f; --warn:#ffb340; --warn-soft:#33260f;
  --lp-btn:#eceef2; --lp-on-btn:#0c0d10; --lp-btn-sweep:#ff5a5a;
  --lp-nav-shadow:0 6px 30px -12px rgba(0,0,0,.7); --lp-card-shadow:0 14px 30px -16px rgba(0,0,0,.7); --lp-block:#a82424;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[id] { scroll-margin-top:96px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; }
body > main { flex:1; width:100%; }
img, svg { max-width:100%; }
a { color:var(--acc-text); }
button { font:inherit; color:inherit; }
.wrap { max-width:var(--lp-max); margin-inline:auto; padding-inline:var(--lp-gutter); }
svg.i { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* buttons: pills, flat, a fill sweeps in on hover */
.btn { position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:var(--r-pill); font:600 16px var(--font); padding:16px 28px; border:0; cursor:pointer; white-space:nowrap; text-decoration:none;
  background:var(--lp-btn); color:var(--lp-on-btn); transition:color .2s, transform .5s cubic-bezier(.38,1.21,.22,1); }
.btn::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--lp-btn-sweep); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.34,.8,.34,1); }
.btn:hover { color:#fff; } .btn:hover::before { transform:scaleX(1); }
.btn:active { transform:scale(.97); }
.btn.sm { padding:11px 20px; font-size:14.5px; }
.btn.tonal { background:var(--acc-soft); color:var(--acc-text); } .btn.tonal::before { background:var(--lp-btn); } .btn.tonal:hover { color:var(--lp-on-btn); }
.btn.white { background:#fff; color:#1d1f24; } .btn.white::before { background:#1d1f24; } .btn.white:hover { color:#fff; }

/* top bar: floating, lifts once you scroll */
.nav-wrap { position:sticky; top:0; z-index:30; padding:14px var(--lp-gutter) 0; }
.nav { max-width:calc(var(--lp-max) - 2*var(--lp-gutter)); margin-inline:auto; display:flex; align-items:center; gap:32px;
  padding:10px 10px 10px 18px; border-radius:var(--r-tile); background:var(--surface); transition:box-shadow .3s; }
.scrolled .nav { box-shadow:var(--lp-nav-shadow); }
.word { font-weight:700; font-size:19px; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.word .wm { height:34px; width:auto; flex:none; display:block; }
.wm-w { fill:var(--ink); } .wm-k { fill:var(--edge); } #wmg-n .g1 { stop-color:#ff6a52; } #wmg-n .g2 { stop-color:#e5283f; } #wmg-f .g1, #wmg-f .g2 { stop-color:#fff; }
.nav .links { display:flex; gap:4px; font-size:15px; font-weight:500; }
.nav .links a { color:var(--ink-2); text-decoration:none; padding:10px 14px; border-radius:var(--r-pill); }
.nav .links a:hover, .nav .links a[aria-current] { color:var(--ink); background:var(--panel); }
.nav .right { margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.theme, .burger { width:40px; height:40px; border-radius:var(--r-pill); border:0; background:var(--panel); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; }
.theme svg, .burger svg { width:18px; height:18px; }
.burger { display:none; color:var(--ink); }
.mnav { display:none; max-width:calc(var(--lp-max) - 2*var(--lp-gutter)); margin:8px auto 0; background:var(--surface); border-radius:var(--r-tile); box-shadow:var(--lp-nav-shadow); padding:8px 8px 16px; max-height:calc(100dvh - 100px); overflow:auto; }
.mnav.open { display:block; }
.mi { display:grid; grid-template-columns:40px 1fr; gap:14px; padding:8px 12px; border-radius:var(--r-tile); align-items:center; color:var(--ink); text-decoration:none; }
.mi:hover, .mi:focus-visible { background:var(--panel); outline:none; }
.mi i { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tile,var(--acc-soft)); color:var(--tile-ink,var(--acc-text)); }
.mi b { font-size:15px; font-weight:600; }
.mnav .btn { width:calc(100% - 16px); margin:12px 8px 0; }
.t-blue { --tile:var(--blue-soft); --tile-ink:var(--blue); } .t-ok { --tile:var(--ok-soft); --tile-ink:var(--ok); }

/* long-form pages: privacy, terms, 404 */
.doc { max-width:808px; margin:0 auto; padding:64px 24px 24px; }
h1, h2, h3 { text-wrap:balance; line-height:1.2; }
p { text-wrap:pretty; }
.doc h1 { font-size:clamp(32px,4.2vw,46px); font-weight:700; letter-spacing:-.03em; margin:8px 0 16px; }
.doc h2 { font-size:clamp(22px,2.1vw,26px); font-weight:700; letter-spacing:-.02em; margin:48px 0 12px; }
.doc h3 { font-size:18px; font-weight:600; letter-spacing:-.01em; margin:28px 0 8px; }
.doc p, .doc li { font-size:16px; line-height:1.75; color:var(--ink-2); }
.doc strong, .doc b { color:var(--ink); font-weight:600; }
.doc ul, .doc ol { padding-inline-start:22px; }
.doc li { margin-bottom:8px; }
.doc .fine { font-size:13px; color:var(--ink-3); }
.doc .eyebrow { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.doc .table { overflow-x:auto; margin:18px 0 26px; }
.doc table { border-collapse:collapse; width:100%; font-size:14.5px; }
.doc th, .doc td { border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.doc th { background:var(--panel); color:var(--ink); font-weight:600; }
.doc td { color:var(--ink-2); }
.doc .note { background:var(--panel); border-radius:var(--r-tile); padding:18px 22px; margin:24px 0; }
.doc .note p { margin:6px 0; }
.doc .toc { background:var(--panel); border-radius:var(--r-tile); padding:18px 24px 6px; margin:28px 0; }
.doc .toc ol { margin:0 0 12px; columns:2; column-gap:32px; }
.doc .toc li { font-size:14.5px; margin-bottom:4px; break-inside:avoid; }
.doc .toc a { color:var(--ink-2); text-decoration:none; } .doc .toc a:hover { color:var(--ink); text-decoration:underline; }
.doc .back { display:inline-block; margin-top:36px; font-weight:600; }
/* blog (posts are built by engine/build.mjs from sites/yelto/site.mjs) */
.doc .lead { font-size:18px; line-height:1.6; color:var(--ink-2); margin:0 0 8px; }
.doc .box { background:var(--panel); border-radius:var(--r-card); padding:26px 28px; margin:28px 0; }
.doc .box h2 { margin-top:0; }
.doc .box.cta { text-align:center; padding:40px 28px; margin-top:56px; }
.doc .box.cta p { margin:10px auto; max-width:52ch; }
.doc article img { width:auto; max-width:100%; max-height:640px; height:auto; border-radius:var(--r-tile); margin:24px auto; display:block; }
.doc article .hero-img { margin:8px 0 32px; width:100%; }
.doc .posts { list-style:none; padding:0; margin:40px 0 0; display:grid; gap:44px; }
.doc .posts li { margin:0; }
.doc .posts a { text-decoration:none; color:var(--ink); }
.doc .posts a:hover strong { color:var(--acc-text); }
.doc .posts strong { display:block; font-size:24px; font-weight:700; letter-spacing:-.025em; line-height:1.25; }
.doc .posts .thumb { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-tile); margin-bottom:18px; background:var(--panel); }
.doc .posts .fine { display:block; margin:6px 0 4px; }

/* footer: red, rounded top */
.foot { margin-top:96px; background:var(--lp-block); color:var(--lp-on-block); border-start-start-radius:40px; border-start-end-radius:40px; padding:56px 0 40px; }
.foot .cols { padding-top:0; }
.cols { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; }
.cols .word { color:#fff; }
.cols .word .wm-w { fill:#fff; } .cols .word .wm-k { fill:rgba(255,255,255,.35); }
.cols h4 { margin:0 0 16px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; font-weight:600; }
.cols a:not(.word) { display:block; padding:6px 0; font-size:15px; color:inherit; text-decoration:none; opacity:.92; } .cols a:not(.word):hover { opacity:1; text-decoration:underline; }
.cols .about { margin:16px 0 0; font-size:14.5px; line-height:1.6; opacity:.85; max-width:32ch; }
.legal { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:48px; padding-top:28px; border-top:1px solid var(--lp-block-line); font-size:13.5px; opacity:.85; }
.legal a { color:inherit; text-underline-offset:3px; }

@media (max-width:980px) {
  .nav .links { display:none; } .nav { gap:12px; padding-inline-start:14px; }
  .burger { display:grid; } .mnav { margin-inline:0; }
  .cols { grid-template-columns:1fr 1fr; }
  .doc { padding-top:40px; } .doc .toc ol { columns:1; }
}
@media (max-width:560px) {
  :root { --lp-gutter:16px; }
  .doc { padding-inline:16px; }
  .cols > div:first-child { grid-column:1/-1; }
  .nav .right .btn { display:none; }
}