/* LOSURIA landing theme 2026-07 — website-centric elevation, loaded AFTER
   each page's inline styles so the cascade wins. One file restyles every
   landing/sub/legal page coherently and matches the PWA's design language:
   near-black hue-175 canvas, charcoal surfaces, emerald accent, sentence-
   case UI labels, pill buttons. Numbers/addresses stay mono (house style). */

:root {
  --ink: #0a0a0c;
  --ink-1: #101013;
  --card: #151517;
  --card-2: #1c1c1f;
  --t1: rgba(255, 255, 255, 0.93);
  --t2: rgba(255, 255, 255, 0.72);
  --t3: rgba(255, 255, 255, 0.56);
  --t4: rgba(255, 255, 255, 0.38);
  --pos: #34d399;
  --pos2: #5fd9ac;
  --pos-ink: #08120d;
  --pos-soft: rgba(52, 211, 153, 0.08);
  --pos-line: rgba(52, 211, 153, 0.32);
}

html { background: var(--ink); }
body {
  background:
    radial-gradient(120% 70% at 78% -10%, rgba(52, 211, 153, 0.07) 0%, transparent 55%) no-repeat,
    var(--ink);
}

/* ---- chrome ---- */
header.nav {
  background: rgba(10, 10, 12, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.nav-links a {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
}
.nav-collapse { background: transparent; }
@media (max-width: 880px) {
  .nav-collapse { background: var(--ink-1); }
}
.lang { font-family: inherit; font-size: 13px; letter-spacing: 0.02em; }
.open-app {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ---- type ---- */
.eyebrow,
.badge {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 550;
  font-size: 12.5px;
}
.hero h1 { font-weight: 600; letter-spacing: -0.032em; }
h2.sec { font-weight: 600; letter-spacing: -0.025em; }
.sub { font-size: 15.5px; }

/* ---- buttons: pill, sentence case, accent fill with dark ink ---- */
.btn {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: 9999px;
  padding: 14px 26px;
}
.btn-pri { box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 14px 40px -16px rgba(52, 211, 153, 0.45); }

/* ---- surfaces: generous radii, charcoal, hairline ---- */
.moat,
.plan,
.plans,
.table,
.matrix,
.kc,
.gb,
.card,
.warn {
  border-radius: 20px;
}

/* row headers inside content tables read as UI labels, not terminal caps */
.mrow .mh {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* German compounds break the narrow column.
   Nutzungsbedingungen and Datenschutzerklärung are wider than a 320px
   viewport with no break opportunity inside them, so terms.de, privacy.de,
   audit.de, impressum.de and widerruf.de scrolled sideways on a small phone
   while their English twins did not. Legal pages have to be readable on the
   cheapest device someone owns, so text gets a break opportunity and German
   gets real hyphenation. */
p, li, td, th, dd, dt, h1, h2, h3, h4, span, a { overflow-wrap: break-word; }
:lang(de) p, :lang(de) li, :lang(de) td, :lang(de) dd,
:lang(de) h1, :lang(de) h2, :lang(de) h3 { hyphens: auto; }

/* Wide content scrolls inside itself, never the page.
   The architecture deep-dive's verification table is wider than a 320px
   column and had no scroll container of its own, so it pushed the whole
   document 48px sideways — the ASCII diagrams beside it were already
   handled by .essay pre{overflow-x:auto}, the table was not. */
.essay table { display: block; max-width: 100%; overflow-x: auto; }