/* ============================================================================
   xreadr.app — small, plain product page (same system as xdsgn.dev)
   Type: Open Runde (self-hosted). Zero JavaScript. No images. One calm column.
   ========================================================================== */

@font-face { font-family:"Open Runde"; font-weight:400; font-display:swap; src:url("/fonts/openrunde-400.woff2") format("woff2"); }
@font-face { font-family:"Open Runde"; font-weight:500; font-display:swap; src:url("/fonts/openrunde-500.woff2") format("woff2"); }
@font-face { font-family:"Open Runde"; font-weight:600; font-display:swap; src:url("/fonts/openrunde-600.woff2") format("woff2"); }
@font-face { font-family:"Open Runde"; font-weight:700; font-display:swap; src:url("/fonts/openrunde-700.woff2") format("woff2"); }

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
ul { list-style:none; padding:0; }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg:#fbfbf9; --ink:#16161c; --muted:#6a6a73; --line:#ebe9e3;
  --accent:#155eef; --accent-ink:#0e44b8;
  --measure:36rem; --pad:clamp(1.4rem,6vw,2.5rem);
  --display:"Open Runde", system-ui, sans-serif;
  --body:"Open Runde", system-ui, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  font-family:var(--body); color:var(--ink); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100svh; display:flex; flex-direction:column;
}
h1, h2 { font-family:var(--display); font-weight:600; line-height:1.1; letter-spacing:-0.02em; }
a { text-decoration:none; }
::selection { background:#dfe7ff; color:var(--accent-ink); }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── Page ──────────────────────────────────────────────────────────────── */
.page {
  flex:1; width:100%; max-width:var(--measure); margin-inline:auto;
  padding:clamp(3.5rem,12vw,6rem) var(--pad) clamp(2rem,6vw,3rem);
  display:flex; flex-direction:column; gap:clamp(2.2rem,6vw,3rem);
}

.brand { font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,6vw,2.4rem); letter-spacing:-0.04em; }
.brand .dot { color:var(--accent); }
.lede { font-size:clamp(1.1rem,2.4vw,1.3rem); color:var(--ink); max-width:32rem; margin-top:1rem; }
.lede a { color:var(--accent); }
.lede a:hover { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }

.label {
  font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); margin-bottom:1.1rem;
}

/* features — plain list, no icons, no images */
.features { display:flex; flex-direction:column; gap:0.8rem; }
.features li { color:var(--muted); line-height:1.55; max-width:34rem; }
.features .fk { color:var(--ink); font-weight:600; }

/* platform + status */
.meta { display:flex; align-items:center; gap:0.6rem; }
.plat { font-size:0.95rem; color:var(--muted); }
.tag {
  display:inline-block; font-size:0.66rem; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; color:#5b5b61; background:#edece8; padding:0.25em 0.7em; border-radius:999px;
}

.mail { color:var(--accent); font-weight:500; }
.mail:hover { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  width:100%; max-width:var(--measure); margin-inline:auto;
  padding:1.6rem var(--pad) 2.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; justify-content:space-between;
  font-size:0.85rem; color:var(--muted);
}
.site-footer a { color:var(--ink); }
.site-footer a:hover { color:var(--accent); }
.site-footer nav { display:flex; gap:1.1rem; }