/* Shared styling for the demo site (ADR-0045).
   No web fonts, no third-party anything: a German page that loads a foreign
   resource needs a consent banner before it loads. Keep it self-contained. */

:root {
  --bg: #fbfaf8; --fg: #16150f; --muted: #55524a;
  --rule: #e3ded4; --accent: #7a3b1d; --accent-fg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f; --fg: #f2efe8; --muted: #a5a094;
    --rule: #2e2b24; --accent: #d0764a; --accent-fg: #14130f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }

/* `end` rather than `right`, so the Hebrew page (dir="rtl") flips it for free. */
.lang { text-align: end; font-size: .85rem; letter-spacing: .06em; margin-bottom: 2rem; }
.lang a { color: var(--muted); text-decoration: none; }
.lang a:hover { color: var(--fg); }
.lang .on { color: var(--fg); font-weight: bold; }

header { border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
.mark { font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; margin: .6rem 0 0; }
.lede { font-size: 1.15rem; color: var(--muted); margin: 1.2rem 0 0; }

ul { list-style: none; padding: 0; margin: 2.5rem 0; }
li { border-top: 1px solid var(--rule); padding: 1.1rem 0; }
li b { display: block; font-weight: normal; font-style: italic; }
li span { color: var(--muted); font-size: .97rem; }

.choose { font-size: 1.25rem; font-weight: normal; font-style: italic; margin: 2.5rem 0 .5rem; }

.cta {
  /* margin-inline-end, not margin-right: the gap follows the text direction. */
  display: inline-block; margin: .5rem 0 .75rem; margin-inline-end: .5rem;
  padding: .85rem 1.6rem;
  background: var(--accent); color: var(--accent-fg);
  text-decoration: none; border-radius: 2px; font-size: 1.05rem;
}
.cta:hover { opacity: .9; }

/* The second path is the more committing one — offered, not pushed. */
.cta.ghost {
  background: transparent; color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.cta.ghost:hover { background: var(--accent); color: var(--accent-fg); opacity: 1; }

.note { color: var(--muted); font-size: .92rem; }

footer {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: .9rem;
}
footer a { color: var(--muted); }

h1.legal { font-size: 1.8rem; }