/*
 * SyllogosHub — marketing site.
 *
 * ΠΑΛΕΤΑ ΤΟΥ SITE: μπορντό / μαύρο σε αχνό ουδέτερο φόντο (15/09) — ΔΕΝ είναι η προεπιλογή της εφαρμογής.
 * - ΜΠΟΡΝΤΟ ΜΟΝΟ ΣΕ ΕΝΕΡΓΕΙΕΣ: κουμπιά, σύνδεσμοι, γραμμή κορυφής των έξι βασικών καρτών, markers
 *   λιστών. Φόντα, chips, ετικέτες, αριθμοί βημάτων, διαχωριστικά και εστίαση: ουδέτερα.
 * - έντεκα tokens, όλα με σταθερές τιμές — καμία μίξη χρωμάτων στο :root.
 *   Αλλαγή του --brand-primary ΔΕΝ παρασύρει πια τα υπόλοιπα.
 * - χωρίς χρώματα τμημάτων: χωρίς περιεχόμενο δίπλα τους δεν σημαίνουν τίποτα. Το inline --c
 *   στις κάρτες του index.html μένει ανενεργό — κανένας κανόνας εδώ δεν το διαβάζει.
 * - σκιές, γραμματοσειρές, ακτίνες: από το κλειδωμένο design της εφαρμογής
 *   (docs/design/attendance-1a.html, docs/design/calendar-colors-4.html).
 *
 * ΜΗΔΕΝ εξωτερικές γραμματοσειρές: αν ο υπολογιστής έχει Literata/Commissioner τις χρησιμοποιεί,
 * αλλιώς πέφτει στις γραμματοσειρές του συστήματος.
 *
 * Μόνο φωτεινό θέμα, ρητά: το κλειδωμένο design δεν ορίζει σκοτεινές τιμές, και η εφεύρεσή τους
 * θα έκανε τη σελίδα να μη μοιάζει με το προϊόν.
 */

:root {
  color-scheme: light;

  /* Αντιστοίχιση με την παλέτα της απόφασης (όνομα απόφασης → όνομα εδώ):
     brand-primary → --brand-primary · brand-dark → --brand-strong · brand-tint → --brand-tint ·
     ink → --ink · ink-2 → --ink-muted · bg → --surface · surface → --surface-raised · line → --line */
  --brand-primary: #6B1F2E;
  --brand-strong: #4A1421;
  /* Τα τρία brand-* παρακάτω είναι ΟΥΔΕΤΕΡΑ από τις 15/09 — τα ονόματα κρατήθηκαν για να μην
     αλλάξει κανένας κανόνας που τα διαβάζει. Δεν σημαίνουν «απόχρωση του brand». */
  --brand-soft: #E9E7E5;
  --brand-tint: #EDECEA;
  --brand-line: #D9D6D3;
  --on-brand: #ffffff;

  --surface: #F3F2F1;
  --surface-raised: #FFFFFF;
  --ink: #16110F;
  --ink-muted: #56514E;
  --line: #E2E0DD;
  /* Περίγραμμα πεδίου φόρμας: ≥3:1 πάνω στο λευκό (WCAG 1.4.11) — η --line δεν φτάνει.
     Σταθερή τιμή, ΟΧΙ μίξη με λευκό: το Chrome έβγαζε τη μίξη με απόχρωση «none», αποδοσμένη ως
     0° — ροζ γκρι #7D797A (μετρημένο 15/09). #7D7977 = απόχρωση 49°, 4.31:1 σε λευκό. */
  --field-line: #7D7977;

  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui: 'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --shadow-1: 0 1px 2px rgba(32, 28, 26, 0.06), 0 2px 8px rgba(32, 28, 26, 0.05);
  --shadow-2: 0 4px 12px rgba(32, 28, 26, 0.09), 0 12px 32px rgba(32, 28, 26, 0.08);
  --shadow-3: 0 8px 20px rgba(32, 28, 26, 0.12), 0 20px 44px rgba(32, 28, 26, 0.12);

  --container: 72rem;
  --gutter: 1rem;
  --header-offset: 7rem;
}


@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
}
@media (min-width: 960px) {
  :root { --header-offset: 5rem; }
}

/* ─────────── Βάση ─────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* scrollbar-gutter: stable — όταν ανοίγει η μεγέθυνση και κλειδώνει η κύλιση, η θέση της μπάρας
   μένει δεσμευμένη, ώστε η σελίδα από πίσω να μη μετακινείται οριζόντια. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
html.lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

[id] {
  scroll-margin-top: var(--header-offset);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  color: inherit;
  text-wrap: balance;
}
/* Hero: ανώτατο 2.875rem (46px), πυκνό διάστιχο — ο τίτλος διαβάζεται ως πρόταση, όχι ως αφίσα. */
h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.875rem); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem); }
h3 { font-size: 1.15rem; }

p { margin: 0; }

a { color: var(--brand-primary); text-underline-offset: 0.18em; }
a:hover { color: var(--brand-strong); }

/* Εστίαση σε --ink, όχι μπορντό: το μπορντό μένει μόνο στις ίδιες τις ενέργειες. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select {
  font: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-s);
  background: var(--ink);
  color: #ffffff;
  font-weight: 600;
}
.skip:focus {
  top: 0.5rem;
  color: #ffffff;
}

/* ─────────── Κουμπιά ─────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--brand-primary);
  color: var(--on-brand);
}
.btn-primary:hover {
  background: var(--brand-strong);
  color: var(--on-brand);
}
/* Περίγραμμα σε --brand-primary, όχι --brand-line: το όριο του κουμπιού θέλει ≥3:1 (WCAG 1.4.11) —
   η --brand-line είναι διακοσμητική γραμμή και δεν το φτάνει. */
.btn-ghost {
  background: var(--surface-raised);
  border-color: var(--brand-primary);
  color: var(--brand-strong);
}
.btn-ghost:hover {
  background: var(--brand-tint);
  color: var(--brand-strong);
}
.btn-sm {
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

/* ─────────── Κεφαλίδα ─────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--surface-raised) 94%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
@supports not (color: color-mix(in oklch, red, blue)) {
  .site-header { background: var(--surface-raised); }
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand cta"
    "nav nav";
  align-items: center;
  column-gap: 1rem;
  padding-top: 0.6rem;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.header-cta { grid-area: cta; }

.site-nav {
  grid-area: nav;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav ul {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0.4rem 0 0.5rem;
  list-style: none;
  white-space: nowrap;
}
.site-nav a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover {
  background: var(--brand-tint);
  color: var(--brand-strong);
}

@media (max-width: 959px) {
  /* Κινητό: η κολλημένη κεφαλίδα τρώει ύψος σε κάθε οθόνη — πιο σφιχτή, ίδια δομή. */
  .header-inner { padding-top: 0.5rem; }
  .brand-logo { width: 2rem; height: 2rem; }
  .site-nav ul { padding: 0.3rem 0 0.4rem; }
  .site-nav a { padding: 0.4rem 0.65rem; }
}

@media (min-width: 960px) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav cta";
    padding-block: 0.6rem;
  }
  .site-nav { justify-self: center; }
  .site-nav ul { padding: 0; }
}

/* ─────────── Είσοδος συλλόγου ─────────── */

/*
 * SITE_ENTRY_PLAN.md ΕΙ-1. Το #eisodos είναι παιδί του body: το backdrop-filter της .site-header θα έκανε
 * την κεφαλίδα πλαίσιο αναφοράς για το position: fixed. z-index 150: πάνω από την κεφαλίδα (50) και το skip
 * (100), κάτω από τη μεγέθυνση (200) — δεν ανοίγουν ποτέ μαζί.
 * Κάτω από 960px: φύλλο από κάτω, με σκοτεινό φόντο και κλείδωμα κύλισης (html.eisodos-open).
 * Από 960px: κουτί κάτω από το κουμπί, χωρίς σκοτεινό φόντο· τη θέση (top/right) τη γράφει το script.js.
 * Μπορντό μόνο στις ενέργειες (κουμπί «Συνέχεια», σύνδεσμος)· εστίαση σε --ink, όπως σε όλη τη σελίδα.
 */
.header-cta-arrow {
  flex: none;
  transition: transform 0.15s;
}
.header-cta[aria-expanded="true"] .header-cta-arrow { transform: rotate(180deg); }

html.eisodos-open { overflow: hidden; }

.eisodos {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  background: rgba(22, 17, 15, 0.55);
}
.eisodos[hidden] { display: none; }

.eisodos-panel {
  position: relative;
  width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
  animation: eisodos-sheet 0.2s ease-out;
}
@keyframes eisodos-sheet {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.eisodos-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.eisodos-close:hover { background: var(--brand-tint); }

.eisodos-title {
  padding-right: 3rem;
  font-size: 1.3rem;
}
.eisodos-sub {
  margin-top: 0.35rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.eisodos-form {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.eisodos-form label {
  font-size: 0.92rem;
  font-weight: 600;
}
/* Πεδίο και κατάληξη σε ένα πλαίσιο· η εστίαση φαίνεται στο πλαίσιο, όχι μόνο στο πεδίο. */
.eisodos-field {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
}
.eisodos-field:focus-within {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* 1rem: κάτω από 16px το iOS μεγεθύνει τη σελίδα όταν εστιάζει το πεδίο. */
.eisodos-field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.6rem 0 0.6rem 0.8rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
}
.eisodos-field input:focus-visible { outline: none; }
.eisodos-suffix {
  flex: none;
  padding: 0 0.8rem 0 0.1rem;
  color: var(--ink-muted);
  font-size: 1rem;
}
.eisodos-help {
  color: var(--ink-muted);
  font-size: 0.85rem;
}
.eisodos-submit {
  width: 100%;
  margin-top: 0.5rem;
}
.eisodos-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}
.eisodos-status {
  color: var(--ink);
  font-size: 0.92rem;
}
.eisodos-status:empty { display: none; }

.eisodos-sep {
  margin: 1.25rem 0 0.75rem;
  border: 0;
  border-top: 1px solid var(--line);
}
.eisodos-signup { font-size: 0.95rem; }
/* Στόχος ≥44px σε ύψος για το δάχτυλο. */
.eisodos-signup a {
  display: inline-block;
  padding-block: 0.7rem;
  font-weight: 600;
}
.eisodos-trial {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

/* Η σειρά μετράει: τα @media μετά από τους βασικούς κανόνες της ενότητας, αλλιώς τα ακυρώνουν. */
@media (min-width: 960px) {
  .eisodos {
    display: block;
    background: transparent;
  }
  .eisodos-panel {
    position: absolute;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    max-height: none;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    animation: eisodos-pop 0.15s ease-out;
  }
  .eisodos-close { display: none; }
  .eisodos-title { padding-right: 0; }
}
@keyframes eisodos-pop {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eisodos-panel { animation: none; }
  .header-cta-arrow { transition: none; }
}

/* ─────────── Ενότητες ─────────── */

.section {
  padding-block: 3.5rem;
}
@media (min-width: 960px) {
  .section { padding-block: 5rem; }
}

.section-alt {
  background: var(--surface-raised);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 46rem;
  margin-bottom: 2rem;
}
.section-head p {
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: 1.05rem;
}

/* ─────────── 1. Hero ─────────── */

/* Περισσότερος αέρας πάνω από τον τίτλο: πριν κολλούσε στην κεφαλίδα. */
.hero {
  padding-block: 3.5rem 3rem;
  background: linear-gradient(180deg, var(--brand-tint), var(--surface));
}
.hero-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 960px) {
  .hero { padding-block: 6.5rem 4.5rem; }
  .hero-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 3.5rem;
  }
}

/* Ετικέτα, όχι κουμπί: χωρίς κάψουλα και περίγραμμα, μικρή, αραιά γράμματα, ουδέτερο χρώμα.
   Χωρίς μετατροπή σε κεφαλαία: θα άλλαζε την όψη των λέξεων και θα έριχνε τους τόνους. */
/*
 * Ο τίτλος σπάει ΠΑΝΤΑ σε τρεις γραμμές, με το έντονο κομμάτι να κλείνει την πρώτη:
 *   «Ο σύλλογός σας,» / «από το μητρώο» / «ως το γλέντι.»
 * Όριο σε ch, όχι σε px: το ch κλιμακώνεται με τη γραμματοσειρά, άρα το σπάσιμο δεν εξαρτάται από το
 * πλάτος του παραθύρου — ΚΑΝΕΝΑ media query ανά πλάτος.
 * Μετρημένο 16/09 στα 400, 1280, 1600, 1920px, ΜΕ font-weight 400 (βλ. τον κανόνα από κάτω: το ίδιο το
 * weight αλλάζει το πλάτος του «0», άρα αλλάζει και το ch — με 600 το εύρος ήταν ΑΛΛΟ):
 * ο στόχος βγαίνει για 13–16.25ch, ΙΔΙΟ και στα τέσσερα πλάτη.
 * Κάτω από 13ch: τέσσερις γραμμές. Πάνω από 16.25ch: δύο.
 * 14.5ch = πρακτικά η μέση του εύρους (ακριβής μέση 14.625), επιλεγμένη ΑΚΡΙΒΩΣ για να υπάρχει
 * περιθώριο: -1.5ch ως τις τέσσερις γραμμές, +1.75ch ως τις δύο. Το προηγούμενο 13ch καθόταν ΠΑΝΩ
 * στο κάτω όριο, με ΜΗΔΕΝ περιθώριο προς τα κάτω.
 * ΣΥΜΜΕΤΕΧΕΙ ΚΑΙ Ο ΚΑΘΟΛΙΚΟΣ ΚΑΝΟΝΑΣ text-wrap ΤΩΝ h1/h2/h3 (τιμή balance, ορισμένος μία φορά πιο πάνω):
 *   χωρίς αυτόν το σπάσιμο γίνεται «Ο σύλλογός σας,» / «από το μητρώο ως» / «το γλέντι.» — μετρημένο και
 *   στα τέσσερα πλάτη. Το εύρος 13–16.25ch ισχύει ΜΕ αυτόν ενεργό.
 * ΠΡΟΣΟΧΗ: μετρημένο με τη γραμματοσειρά που αποδίδει αυτό το μηχάνημα. Άλλη οικογένεια (π.χ. χωρίς
 * Georgia) έχει άλλες αναλογίες γλυφών προς «0» και μπορεί να μετακινήσει το εύρος.
 */
/* 400 ΜΟΝΟ εδώ — ο καθολικός h1/h2/h3 μένει 600, αλλιώς παρασύρονται τα h2/h3 όλης της σελίδας.
   Η Georgia έχει ΜΟΝΟ 400 και 700: με 600 το strong δεν είχε πού να πάει (600 και 800 αποδίδονταν
   ταυτόσημα, μετρημένο 16/09). Το ζεύγος 400/700 είναι το μόνο με πραγματική αντίθεση. */
.hero h1 { max-width: 14.5ch; font-weight: 400; }
/* Το «Ο σύλλογός σας» βαραίνει, δεν βάφεται: το μπορντό μένει στις ενέργειες (απόφαση 15/09). */
.hero h1 strong { font-weight: 700; }

.eyebrow {
  margin-bottom: 1.1rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.lead {
  max-width: 38rem;
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 1.125rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ─────────── Θέσεις στιγμιότυπων ───────────
 * ΣΚΟΠΙΜΑ ΟΧΙ mockup: διακεκομμένο πλαίσιο με ετικέτα, ώστε να μη μοιάζει ποτέ με πραγματική
 * οθόνη. Όταν μπει εικόνα, αντικαθιστά το .shot-frame· οι αναλογίες μένουν ίδιες.
 * ΗΣΥΧΟ όσο είναι κενό: χωρίς γέμισμα, λεπτή γραμμή, ετικέτα χωρίς κάψουλα — επτά γεμάτα
 * χρωματιστά κουτιά τραβούσαν το μάτι περισσότερο από το κείμενο δίπλα τους. Τα στυλ της
 * εικόνας (.shot img) δεν επηρεάζονται.
 */

.shot { margin: 0; }

.shot-frame {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  border: 1px dashed var(--brand-line);
  border-radius: var(--radius-l);
  background: transparent;
  text-align: center;
}
.shot-label {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.shot {
  transition: transform 0.2s ease;
}
.shot img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-9x16 { aspect-ratio: 9 / 16; }
.ratio-a4 { aspect-ratio: 210 / 297; }

.shot--portrait {
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
}
/* Όρθιο στιγμιότυπο μέσα σε στήλη: μικρότερο, ώστε να μην ορίζει μόνο του το ύψος της σειράς. */
.shot--narrow { max-width: 11rem; }
@media (max-width: 959px) {
  .shot--narrow { max-width: 12rem; }
}

/* Λεζάντα πάντα ορατή: <b>όνομα οθόνης</b> — πρόταση. Η σημείωση για τα πλασματικά στοιχεία ζει
   ΜΟΝΟ στη μεγέθυνση και μία φορά στο υποσέλιδο — όχι σε κάθε λεζάντα. */
.shot figcaption {
  margin-top: 0.6rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: color 0.2s ease;
}
.shot figcaption b {
  color: inherit;
  font-weight: 700;
}
/* Η κλάση js-lightbox μπαίνει από το script.js: χωρίς JavaScript δεν υπάρχει μεγέθυνση, άρα ούτε zoom-in. */
.js-lightbox .shot img { cursor: zoom-in; }

/*
 * Hover και εστίαση: ΜΟΝΟ σήμα — καμία πληροφορία δεν ζει εδώ, καμία υπέρθεση πάνω στην εικόνα.
 * Ανασήκωμα με transform (ΟΧΙ margin), περίγραμμα με ίδιο πάχος: η σελίδα δεν μετακινείται.
 * Η σκιά μπαίνει στην εικόνα, όχι στο <figure>: το figure δεν έχει φόντο, και σκιά πάνω του θα
 * σχεδίαζε ορθογώνιο και γύρω από τη λεζάντα.
 * Το :focus-within ενεργοποιείται όταν το script.js κάνει την εικόνα εστιάσιμη (μεγέθυνση). Χωρίς
 * JavaScript δεν υπάρχει εστιάσιμο στοιχείο μέσα στο figure και ο κανόνας μένει ανενεργός.
 */
@media (hover: hover) {
  .shot:hover { transform: translateY(-3px); }
  .shot:hover img { border-color: var(--brand-line); box-shadow: var(--shadow-3); }
  .shot:hover figcaption { color: var(--ink); }
}
.shot:focus-within { transform: translateY(-3px); }
.shot:focus-within img { border-color: var(--brand-line); box-shadow: var(--shadow-3); }
.shot:focus-within figcaption { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .shot,
  .shot img,
  .shot figcaption { transition: none; }
  .shot:hover,
  .shot:focus-within { transform: none; }
}

/* ─────────── Μεγέθυνση εικόνας (overlay) ───────────
 * Το markup φτιάχνεται από το script.js. Σκούρο ημιδιαφανές φόντο από το --ink· κείμενο λευκό και
 * ουδέτερο γκρι (--brand-line). Το μέγεθος της εικόνας το υπολογίζει το script: το μέγιστο που χωρά
 * χωρίς κόψιμο, αφού αφαιρεθούν τα περιθώρια και η λεζάντα.
 * Κάτω περιθώριο = η ζώνη των «‹» «›», ΕΞΩ από την εικόνα: πάνω σε λευκό στιγμιότυπο το λευκό σύμβολο
 * των κουμπιών δεν θα φαινόταν. Το script αφαιρεί το περιθώριο από το διαθέσιμο ύψος, άρα η εικόνα δεν τα καλύπτει.
 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 3.75rem;
  background: rgba(22, 17, 15, 0.92);
}
.lightbox[hidden] { display: none; }
.lightbox:focus { outline: none; }
.lightbox :focus-visible { outline-color: #ffffff; }
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  margin: 0;
}
.lightbox-img {
  max-width: 100%;
  border-radius: var(--radius-m);
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.lightbox-caption {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
}
.lightbox-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.lightbox-note {
  display: block;
  margin-top: 0.2rem;
  color: var(--brand-line);
  font-size: 0.85rem;
}
/* «×», «‹», «›»: ίδιο στιλ σε ΕΝΑΝ κανόνα — οι τιμές χρώματος γράφονται μία φορά. Στόχος αφής 2.75rem. */
.lightbox-close,
.lightbox-nav {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close { top: 0.5rem; right: 0.75rem; }
.lightbox-nav { bottom: 0.5rem; }
.lightbox-prev { right: calc(50% + 0.375rem); }
.lightbox-next { left: calc(50% + 0.375rem); }
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.12); }

/*
 * Ίσο ύψος στα στιγμιότυπα της ίδιας σειράς: οι στήλες είναι ανάλογες του πλάτους/ύψους κάθε
 * αναλογίας (9:16 = 0.5625 · 16:10 = 1.6 · A4 = 0.7071, επί 16).
 * Στενή οθόνη: οι δύο όρθιες θέσεις δίπλα-δίπλα και το Ημερολόγιο από κάτω. Μία-μία σε όλο το
 * πλάτος έπιαναν ~1400px κενών πλαισίων πριν από την πρώτη κάρτα (μετρημένο στα 400px).
 * Οι τρεις θέσεις επιλέγονται με τη μορφή τους, όχι με σειρά: όρθια πρώτη, οριζόντια, όρθια τελευταία.
 */
.showcase {
  display: grid;
  grid-template-columns: 9fr 11.31fr;
  grid-template-areas:
    "att sum"
    "cal cal";
  gap: 1.5rem 1rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
.showcase > .shot--portrait:first-child { grid-area: att; }
.showcase > .shot:not(.shot--portrait) { grid-area: cal; }
.showcase > .shot--portrait:last-child { grid-area: sum; }
.showcase .shot--portrait { max-width: none; }
@media (min-width: 900px) {
  .showcase {
    grid-template-columns: 9fr 25.6fr 11.31fr;
    grid-template-areas: "att cal sum";
    gap: 1.5rem;
  }
}

/* ─────────── 2. Πρόβλημα ─────────── */

/*
 * ΡΥΘΜΟΣ ΤΗΣ ΣΕΛΙΔΑΣ: αραιές ενότητες (χωρίς κουτιά, με γραμμή στο πλάι ή από πάνω) εναλλάσσονται
 * με πυκνές (κάρτες). Αραιές: Πρόβλημα, Ελληνικός σύλλογος, Ρόλοι. Πυκνές: Τι κάνει, Βήματα, Ερωτήσεις.
 * Το Πρόβλημα παίρνει το ίδιο μοτίβο με τα .fact των Ρόλων.
 */
.problem-grid {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 800px) {
  .problem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}
.problem {
  padding-left: 1rem;
  border-left: 3px solid var(--brand-line);
}
.problem h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.problem p { color: var(--ink-muted); }

/* ─────────── 3. Κάρτες ενοτήτων ─────────── */

.cards {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Χωρίς χρώμα ανά κάρτα: το inline --c του index.html δεν διαβάζεται πουθενά (βλ. αρχή αρχείου).
 * Ιεραρχία μέσα στην κάρτα: τίτλος → πρόταση αξίας (σκούρα, μεγαλύτερη) → λεπτομέρειες (γκρι,
 * μικρότερες). Πριν ήταν ανάποδα: η αξία γκρι και οι λεπτομέρειες σκούρες. */
.card {
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: inset 0 3px 0 var(--brand-primary), var(--shadow-1);
}
.card h3 {
  font-size: 1.25rem;
}
.card-value {
  margin-top: 0.5rem;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.5;
}
.card ul {
  display: grid;
  align-content: start; /* στο subgrid η λίστα τεντώνεται ως τη μεγαλύτερη της σειράς· τα σημεία μένουν μαζεμένα */
  gap: 0.6rem;
  margin: 1rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.card li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.card li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.6em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 2px;
  background: var(--brand-primary);
}

/*
 * Δύο βαθμίδες: οι έξι πρώτες κάρτες είναι οι βασικές ενότητες (τρία σημεία η καθεμία)· οι τρεις
 * τελευταίες (Ανακοινώσεις, Χορηγοί, Ιστορικό αλλαγών — δύο σημεία) είναι συμπληρωματικές και
 * αποδίδονται πιο ήσυχα: χωρίς γέμισμα και σκιά, με κορυφή σε --line αντί για μπορντό.
 * ΠΡΟΣΟΧΗ: η βαθμίδα δένεται με τη ΣΕΙΡΑ των καρτών στο index.html. Αλλαγή σειράς = αλλαγή βαθμίδας.
 */
.card:nth-child(n + 7) {
  padding-block: 1.1rem;
  background: transparent;
  box-shadow: inset 0 3px 0 var(--line);
}
.card:nth-child(n + 7) h3 { font-size: 1.05rem; }
.card:nth-child(n + 7) .card-value { font-size: 0.95rem; }

/* Στοίχιση στη σειρά: τίτλος, πρόταση αξίας και λίστα ξεκινούν στο ίδιο ύψος σε όλες τις κάρτες
   της σειράς, ακόμα κι όταν ένας τίτλος πιάνει δύο γραμμές. Χωρίς subgrid μένει η απλή στοίβα. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .card {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

/* ─────────── 4. Επιφάνειες ─────────── */

.surfaces {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 960px) {
  .surfaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.surface {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
}
.surface-kicker {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.surface h3 { font-size: 1.35rem; }
.surface > p:not(.surface-kicker) { color: var(--ink-muted); }
.surface .shot { margin-top: auto; padding-top: 0.5rem; }
/* Τρεις στήλες: ετικέτα, τίτλος, περιγραφή, λίστα και στιγμιότυπο στοιχίζονται ανά γραμμή, ώστε
   τα πλαίσια να ξεκινούν στο ίδιο ύψος αντί να σπρώχνονται στο κάτω μέρος με κενό από πάνω. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .surface {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0.9rem;
    }
    .surface .shot { margin-top: 0; }
  }
}

.checklist {
  display: grid;
  align-content: start; /* ίδιος λόγος με το .card ul: στο subgrid τα σημεία μένουν μαζεμένα */
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.35em;
  width: 0.45rem;
  height: 0.8rem;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(45deg);
}

/* ─────────── 5. Ελληνικός σύλλογος — η δυνατή ενότητα ───────────
 * Φόντο --ink (μαύρο) με λευκό κείμενο: 18.73:1. ΟΧΙ μπορντό φόντο — θα συγκρουόταν με τα κουμπιά.
 * Διαχωριστικά σε ημιδιαφανές λευκό (ουδέτερο): το μπορντό μένει μόνο στις ενέργειες (15/09).
 * Αριθμοί ΛΕΥΚΟΙ: μπορντό σε μαύρο = 1.66:1, κάτω από το 3:1 του μεγάλου κειμένου (μετρημένο 15/09).
 * Εστίαση: λευκό περίγραμμα μέσα στην ενότητα — το --ink της βάσης δεν φαίνεται πάνω στο μαύρο.
 * ΑΡΑΙΗ ενότητα: τα έξι σημεία χωρίς κουτιά, με γραμμή από πάνω και μεγάλο αριθμό — διαβάζονται
 * ως αριθμημένη σειρά θέσεων, όχι ως άλλο ένα πλέγμα καρτών μετά τις εννιά του «Τι κάνει».
 */

.section-strong {
  background: var(--ink);
  color: #ffffff;
}
.section-strong :focus-visible {
  outline-color: #ffffff;
}
.section-strong h2 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem);
}
.section-strong .section-head {
  margin-bottom: 2.75rem;
}
.section-strong .section-head p {
  color: #ffffff;
  font-size: 1.15rem;
}
@media (min-width: 960px) {
  .section.section-strong { padding-block: 6rem; }
}

.greek-list {
  display: grid;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: greek;
}
@media (min-width: 800px) {
  .greek-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2.5rem;
  }
}
@media (min-width: 1100px) {
  .greek-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.greek-item {
  counter-increment: greek;
  display: flex;
  flex-direction: column;
}
/* Η γραμμή και το κενό από πάνω ζουν στον αριθμό (::before). */
.greek-item::before {
  content: counter(greek);
  display: block;
  padding-top: 1.25rem;
  border-top: 2px solid rgba(255, 255, 255, 0.55);
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
}
.greek-item h3 { font-size: 1.35rem; }
/* Στοίχιση στη σειρά (πολλές στήλες): τίτλος, περιγραφή και «Γιατί μετράει» στο ίδιο ύψος σε όλα
   τα σημεία της σειράς.
   Ο αριθμός βγαίνει ΕΞΩ από τη ροή (absolute) και το ύψος του κρατιέται ως padding: όταν ο ::before
   ήταν τέταρτη γραμμή του subgrid, η γραμμή του τίτλου φούσκωνε 23px σε σειρά με τίτλους μίας
   γραμμής (μετρημένο στα 1280 και στα 900· δεν το έλυνε ούτε αφαίρεση padding/border/margin
   ούτε text-wrap — μόνο η έξοδος του αριθμού από το πλέγμα).
   padding-top = padding αριθμού 1.25rem + γραμμή 2px + ύψος αριθμού 2.75rem (line-height 1) + 0.75rem. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 800px) {
    .greek-item {
      position: relative;
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
      padding-top: calc(1.25rem + 2px + 2.75rem + 0.75rem);
    }
    .greek-item::before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
    }
    .greek-item .why-matters { margin-top: 0; }
  }
}
/* Το κάτω περιθώριο της περιγραφής είναι το ελάχιστο κενό· το margin-top:auto της .why-matters
   σπρώχνει τη γραμμή «Γιατί μετράει» στο κάτω μέρος, στοιχισμένη στις κάρτες της ίδιας σειράς. */
.greek-item > p:not(.why-matters) { margin-block: 0.55rem 1rem; }

/* Περίγραμμα, ΟΧΙ γέμισμα: λευκό γέμισμα 16% έριχνε το λευκό κείμενο στο 4.3:1 (μετρημένο). */
.typed {
  padding: 0 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
}

.why-matters {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.95rem;
}
.why-matters strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* ─────────── 5α. Δεύτερο CTA ───────────
 * Ίδιο φόντο με την ενότητα 5 που προηγείται, άρα χωρίς γραμμή θα ήταν ένα συνεχές μπλοκ: η
 * γραμμή πάνω είναι ημιδιαφανές λευκό, όπως τα διαχωριστικά της ενότητας.
 * Κουμπί .btn-ghost (λευκό γέμισμα): μπορντό κουμπί πάνω σε μαύρο δίνει όριο 1.66:1, κάτω από
 * το 3:1 (μετρημένο 15/09)· το λευκό δίνει 18.73:1.
 */
.cta-strip {
  padding-block: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.cta-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.cta-strip-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ─────────── 6. Ρόλοι ─────────── */

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.role-note {
  max-width: 46rem;
  margin-bottom: 2rem;
  color: var(--ink-muted);
}
.role-chip {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 600;
}

.facts {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fact {
  padding-left: 1rem;
  border-left: 3px solid var(--brand-line);
}
.fact p {
  margin-top: 0.45rem;
  color: var(--ink-muted);
}

/* ─────────── 7. Βήματα ─────────── */

.steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.step {
  counter-increment: step;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-weight: 700;
}
.step p {
  margin-top: 0.5rem;
  color: var(--ink-muted);
}

/* ─────────── 8. Συχνές ερωτήσεις ─────────── */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 50rem;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
}
.faq summary {
  position: relative;
  min-height: 2.75rem;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s;
}
.faq details[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.faq summary:focus-visible {
  border-radius: var(--radius-m);
}
.answer {
  padding: 0 1.25rem 1.15rem;
  color: var(--ink-muted);
}
.answer-no {
  color: var(--ink);
  font-weight: 700;
}

/* ─────────── 9. Επικοινωνία ─────────── */

.contact-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3rem;
    align-items: start;
  }
  .contact-aside { margin-top: 7.5rem; }
}

.form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
@media (min-width: 640px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}

.form-note {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.field input,
.field select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  color: var(--ink);
}
.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--ink);
  border-radius: var(--radius-m);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.25rem;
}
.form-status {
  color: var(--ink);
  font-size: 0.92rem;
}
.form-status:empty { display: none; }

.contact-aside h3 { margin-bottom: 1rem; }
.contact-aside dl { margin: 0; }
.contact-aside dt {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.contact-aside dd {
  margin: 0.15rem 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}
/* Εικονίδια email / σταθερού / κινητού: διακοσμητικά, κρυμμένα από τον αναγνώστη οθόνης.
   Κανένα δικό τους χρώμα — η γραμμή τους παίρνει το χρώμα του κειμένου του συνδέσμου.
   Μέγεθος σε em, ώστε να ακολουθεί το μέγεθος γραμματοσειράς του dd. */
.contact-icon {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45em;
  vertical-align: -0.2em;
}

/* ─────────── 10. Footer ─────────── */

.site-footer {
  padding-block: 2rem;
  background: var(--ink);
  color: #ffffff;
  font-size: 0.92rem;
}
.site-footer a { color: #ffffff; }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
}
.footer-brand {
  margin-right: auto;
}
.footer-brand img {
  width: auto;
  height: 34px;
}
.footer-note {
  flex-basis: 100%;
  color: var(--brand-line);
  font-size: 0.82rem;
}

/* ─────────── 11. Φόρμες αιτημάτων, σελίδα αίτησης, πολιτική απορρήτου (SITE_ENTRY_PLAN.md ΕΙ-6…ΕΙ-9) ─────────── */

/* Το .form έχει display: grid, που νικά το [hidden] του browser· μετά την αποστολή η φόρμα κρύβεται. */
.form[hidden] { display: none; }

.field textarea {
  display: block;
  width: 100%;
  min-height: 8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.field textarea:focus-visible {
  border-color: var(--ink);
  border-radius: var(--radius-m);
}

/* Διεύθυνση με κατάληξη: ίδια όψη με το πεδίο της «Εισόδου συλλόγου». */
.field-suffix {
  display: flex;
  align-items: center;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
}
.field-suffix:focus-within {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.field .field-suffix input {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
  border: 0;
  background: transparent;
}
.field .field-suffix input:focus-visible { outline: none; }
.field-suffix span {
  flex: none;
  padding: 0 0.8rem 0 0.1rem;
  color: var(--ink-muted);
}
.field-help {
  margin-top: 0.35rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

/* Συναίνεση: κουτάκι αριστερά, κείμενο δίπλα. */
.field.field-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.field.field-consent input {
  flex: none;
  width: 1.15rem;
  min-height: 0;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  padding: 0;
  accent-color: var(--brand-primary);
}
.field.field-consent label {
  margin: 0;
  font-weight: 400;
}

/* Πεδίο-παγίδα: έξω από την οθόνη, όχι display: none (κάποια bots παραλείπουν τα κρυμμένα πεδία). */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Μήνυμα επιτυχίας στη θέση της φόρμας. */
.form-done {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font-weight: 600;
}

/* «Τι γίνεται μετά» στη σελίδα αίτησης: δική της κλάση, όχι το .steps της αρχικής (grid τριών στηλών από 900px,
   χωρίς αριθμούς). Μία στήλη σε κάθε πλάτος, με τον αριθμό της λίστας ορατό. */
.contact-aside h2 {
  margin-bottom: 1rem;
  font-size: 1.15rem;
}
.next-steps {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--ink-muted);
  list-style: decimal;
}
.next-steps li + li { margin-top: 0.75rem; }

/* Κείμενο της πολιτικής απορρήτου. */
.prose {
  max-width: 46rem;
}
.prose h2 {
  margin: 2rem 0 0.6rem;
  font-size: 1.3rem;
}
.prose p + p { margin-top: 0.75rem; }
.prose-meta {
  margin-top: 0.75rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
}