/* Κοινό για υποδοχή και άρνηση: οι δύο σελίδες είναι η ίδια εμπειρία σε δύο
   στιγμές, και όταν είχαν χωριστό CSS απέκλιναν μέσα σε μία μέρα. */
:root {
  color-scheme: light dark;
  --bg: #f6f7f8; --card: #fff; --fg: #1a1a1a; --muted: #5c6470;
  --line: #e2e5e9; --accent: #0b7285; --ok-bg: #e9f7ef; --ok-line: #b7e4c7;
  --step-bg: #eef2f5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --card: #1c1f24; --fg: #e8eaed; --muted: #9aa4b2;
    --line: #2c3037; --accent: #4dd0c7; --ok-bg: #14312a; --ok-line: #2f6b52;
    --step-bg: #23272e;
  }
}
* { box-sizing: border-box; }
body {
  /* margin:auto στην κάρτα αντί για align-items:center: με κεντράρισμα flex, όταν το
     περιεχόμενο ξεπερνά το ύψος του παραθύρου η κορυφή κόβεται και ΔΕΝ φτάνεις σ' αυτήν
     με scroll. Σε χαμηλή οθόνη ο τίτλος γινόταν απρόσιτος. */
  margin: 0; min-height: 100vh; display: flex;
  padding: 1.5rem; background: var(--bg); color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
.card {
  margin: auto;
  width: 100%; max-width: 34rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 2rem 1.75rem;
}
.brand { font-size: .8125rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; line-height: 1.3; }
h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1.75rem 0 .75rem; font-weight: 600; }
.lede { margin: 0 0 1.5rem; color: var(--muted); }
.status {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--ok-bg); border: 1px solid var(--ok-line);
  border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1.5rem;
}
.status svg { flex: 0 0 auto; margin-top: .15rem; }
.status p { margin: 0; font-size: .9375rem; }
ol, ul { margin: 0 0 1.5rem; padding-inline-start: 1.25rem; }
li { margin-bottom: .5rem; font-size: .9375rem; }
li:last-child { margin-bottom: 0; }
.muted { color: var(--muted); font-size: .875rem; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
a.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.15rem; border-radius: 8px;
  border: 1px solid var(--line); color: var(--fg); text-decoration: none; font-size: .9375rem;
}
a.btn:hover { border-color: var(--accent); color: var(--accent); }
a.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
a.primary:hover { color: #fff; filter: brightness(1.08); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
/* Τι θα βρει μέσα — γενικές κατηγορίες, κανένα εσωτερικό στοιχείο: η σελίδα είναι δημόσια. */
.what { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.what div { background: var(--step-bg); border-radius: 8px; padding: .7rem .9rem; font-size: .9375rem; }
.what strong { display: block; font-size: .875rem; }
.what span { color: var(--muted); font-size: .875rem; }