/*
 * Το δημόσιο site (Φάση 22) — εικαστικό «Split», φόντο πάνελ «Abyss».
 * Πάντα φωτεινό δεξί ρεύμα — όπως η δημόσια σελίδα του survey (pinAppearance).
 *
 * Τα χρώματα της μάρκας είναι ΑΝΤΙΓΡΑΦΟ, όχι δεύτερη αλήθεια — πηγή:
 *   clientapp/src/components/brand/marks.ts  (κουκκίδες, wordmark)
 *   clientapp/src/styles/tokens.css          (κείμενο, φόντο)
 * Το Abyss (--p1/--p2/--pglow) είναι ΣΥΝΕΙΔΗΤΗ απόκλιση του site από το navy
 * του προϊόντος — spec 26 §0.1.7.
 *
 * Αλλάζεις αυτό το αρχείο (ή οποιοδήποτε CSS/JS του site); Άλλαξε και το ?v= σε ΟΛΕΣ τις σελίδες:
 * το nginx δίνει στα assets cache μίας ώρας. Το κρατά ίδιο παντού το PublicSiteTests.
 */

:root{
  --paper:#f8fafb; --card:#ffffff; --ink:#102230; --muted:#54687a;
  --p1:#111436; --p2:#080a20; --pglow:#232a66;
  --teal:#0c8599; --cyan:#22d3ee; --cyan2:#4fc5de;
  /* Το teal ως ΚΕΙΜΕΝΟ: το #0c8599 δίνει 4,15:1 στο --paper και 3,88:1 στο --wash (κάτω από
     το AA). Το --teal μένει για πλαίσια, γραμμές και φόντα· ό,τι διαβάζεται παίρνει αυτό. */
  --teal-ink:#0a6f80;
  --line:#dfe7ec; --wash:#e9f4f6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Source Sans 3','Source Sans 3 Fallback',-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.68}
h1,h2,h3{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-weight:800;line-height:1.12;margin:0;
  text-wrap:balance;letter-spacing:-.01em}
a{color:var(--teal-ink)}
img{max-width:100%}

/* ---------- το δίπτυχο ---------- */
/* 36/64 από 4/10/2026 (ήταν 42/58): το πάνελ είναι το κέλυφος, το ρεύμα είναι το περιεχόμενο. */
.wrap{display:grid;grid-template-columns:36fr 64fr;min-height:100vh;min-height:100dvh}

.pane{background:
    radial-gradient(700px 480px at 75% -12%, var(--pglow), transparent 58%),
    radial-gradient(560px 380px at 20% 108%, rgba(34,211,238,.14), transparent 60%),
    linear-gradient(165deg, var(--p1), var(--p2));
  color:#eef6f8;position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  padding:34px 44px 30px}
#dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pane > *{position:relative}
.pane .mid{min-height:0;max-width:44ch}
.logo{display:inline-block}
.logo svg{height:38px;width:auto;display:block}
.kick{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan2);font-weight:600;margin-bottom:20px}
.kick::before{content:"";width:26px;height:2px;background:var(--cyan2)}
.pane h1{font-size:clamp(30px,3.2vw,46px)}
/* Λευκό accent με cyan υπογράμμιση — απόφαση χρήστη 23/9: η υπογράμμιση κρατά τον
   δεσμό με τις κουκκίδες, το λευκό κρατά την ένταση του τίτλου ενιαία. */
.pane h1 .accent{font-style:normal;color:#ffffff;
  text-decoration:underline;text-decoration-color:rgba(34,211,238,.5);
  text-decoration-thickness:5px;text-underline-offset:7px}
.pane p.lead{color:#a6b0d8;font-size:17.5px;margin:20px 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;border-radius:10px;padding:13px 26px;font-weight:700;
  text-decoration:none;font-size:15.5px;font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif}
/* Το κύριο CTA είναι λευκό πάνω στο Abyss — απόφαση χρήστη 23/9 (δοκιμή 5 εκδοχών). */
.btn-c{background:#eef6f8;color:#10123a}
.btn-c:hover{background:#ffffff}
.btn-o{border:1px solid rgba(238,246,248,.35);color:#eef6f8}
.btn-o:hover{border-color:var(--cyan2);color:var(--cyan2)}

/* glass mini-dashboard */
.panelmini{background:rgba(20,24,58,.6);backdrop-filter:blur(14px);
  border:1px solid rgba(238,246,248,.12);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.5);font-size:12px}
.panelmini .head{display:flex;align-items:center;gap:7px;padding:9px 13px;
  border-bottom:1px solid rgba(238,246,248,.09);color:#8b93bd;font-size:11.5px}
.panelmini .head i{width:8px;height:8px;border-radius:50%;background:rgba(238,246,248,.18)}
.pcols{display:grid;grid-template-columns:1fr 1fr 1fr}
.pcol{padding:11px 12px;border-right:1px solid rgba(238,246,248,.09)}
.pcol:last-child{border-right:0}
.pcol h4{margin:0 0 9px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.pcol.ask h4{color:var(--cyan2)} .pcol.pain h4{color:#f0a35e} .pcol.praise h4{color:#63d8a5}
.ptheme{margin-bottom:9px}
.ptheme span{display:block;font-size:11px;margin-bottom:4px;color:#eef6f8}
.ptrack{height:5px;border-radius:3px;background:rgba(238,246,248,.09);overflow:hidden}
.pfill{height:100%;border-radius:3px;animation:grow 1.1s ease both}
.ask .pfill{background:var(--cyan2)} .pain .pfill{background:#f0a35e} .praise .pfill{background:#63d8a5}
@keyframes grow{from{width:0}}
.pspark{padding:9px 13px 12px;border-top:1px solid rgba(238,246,248,.09)}
.pspark svg{display:block;width:100%;height:34px}
.pane nav{display:flex;gap:16px;font-size:13.5px;flex-wrap:wrap;margin-top:18px}
.pane nav a{color:#a6b0d8;text-decoration:none}
.pane nav a:hover,.pane nav a[aria-current="page"]{color:var(--cyan2)}

/* ---------- δεξί ρεύμα ---------- */
.stream{padding:0 clamp(24px,5vw,72px);min-width:0}
.stream section{padding:60px 0;border-bottom:1px solid var(--line)}
.stream section:last-of-type{border-bottom:0}
.eyebrow{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-ink);
  font-weight:600;display:block;margin-bottom:14px}
.stream h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:12px}
.sub{color:var(--muted);max-width:58ch;margin:0 0 34px}

/* Αρχική: κάθε section παίρνει δικό του φόντο, από άκρη σε άκρη του ρεύματος, γι' αυτό το
   οριζόντιο padding μετακομίζει από το .stream στα sections. Τα φόντα εναλλάσσονται ώστε η σελίδα
   να διαβάζεται ως ενότητες χωρίς γραμμές ανάμεσα· το Abyss επαναλαμβάνει το πάνελ μία φορά.
   Το κείμενο πάνω τους μένει ≥ 4,5:1 (--muted: 5,1:1 στο --wash, 5,3:1 στο mist). */
.stream.alt{padding:0}
.stream.alt > section{padding:64px clamp(24px,5vw,72px);border-bottom:0}
.stream.alt > footer{padding:24px clamp(24px,5vw,72px) 34px}
.bg-wash{background:var(--wash)}
.bg-white{background:var(--card)}
.bg-mist{background:#eef0f8}
.bg-abyss{background:linear-gradient(165deg,var(--p1),var(--p2));color:#eef6f8}
.bg-abyss .eyebrow,.bg-abyss a{color:var(--cyan2)}
.bg-abyss .sub,.bg-abyss .step p{color:#b3bbdf}
.bg-abyss .step::before{background:var(--p1);border-color:var(--cyan2)}
.intro h2{font-size:clamp(30px,3.4vw,44px);max-width:18ch;margin-bottom:34px}
.privacy + .final{margin-top:44px}

/* πηγές — marquee (το στοιχείο της Flow που κρατήθηκε στη σύνθεση) */
.sources{padding:34px 0 0;text-align:center}
.sources p{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 18px;font-weight:600}
.marq{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq .track{display:flex;gap:14px;width:max-content;animation:slide 26s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.src{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:9px 22px;font-weight:600;font-size:14.5px;color:var(--muted);white-space:nowrap}

/* βήματα */
.steps{display:grid;gap:0;position:relative;padding-left:34px}
.steps::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--teal))}
.step{position:relative;padding:0 0 28px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-30px;top:7px;width:14px;height:14px;
  border-radius:50%;background:var(--card);border:3px solid var(--teal)}
.step h3{font-size:19px;margin-bottom:5px}
.step p{margin:0;color:var(--muted);font-size:15.5px;max-width:52ch}

/* quote */
.quotecard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px;box-shadow:0 16px 44px rgba(8,10,32,.09);position:relative;max-width:560px}
.quotecard::before{content:"\201C";font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-size:78px;font-weight:800;
  line-height:0;position:absolute;top:42px;left:18px;color:var(--cyan);opacity:.5}
.quotecard blockquote{margin:0 0 16px 36px;font-size:18.5px;line-height:1.5;font-weight:600}
.quotecard .meta{margin-left:36px;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chip{background:var(--wash);color:var(--teal-ink);border-radius:999px;padding:3px 12px;font-weight:700;font-size:12px}

/* κάρτες */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;
  transition:transform .16s ease, box-shadow .16s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(8,10,32,.1)}
.card .d{width:11px;height:11px;border-radius:50%;background:var(--cyan);margin-bottom:14px;
  box-shadow:0 0 0 5px rgba(34,211,238,.14)}
.card h3{font-size:18px;margin-bottom:6px}
.card p{margin:0;color:var(--muted);font-size:15px}
.card.dark{background:linear-gradient(150deg,var(--p1),#171b4a);border-color:transparent;color:#eef6f8}
.card.dark p{color:#a6b0d8}
.card.dark .d{background:var(--cyan2);box-shadow:0 0 0 5px rgba(79,197,222,.2)}

/* λειτουργίες — εναλλασσόμενα μπλοκ */
.feature-block{display:grid;grid-template-columns:1fr;gap:10px;max-width:64ch}
.feature-block ul{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:15.5px}
.feature-block li{margin-bottom:7px}
.feature-block li b{color:var(--ink)}

/* πλάνα */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:26px 24px}
.plan.highlight{border-color:var(--teal);box-shadow:0 8px 30px rgba(12,133,153,.14)}
.plan h3{font-size:20px;margin-bottom:2px}
.plan .tag{color:var(--teal-ink);font-weight:700;font-size:13.5px;margin:0 0 14px}
.plan ul{margin:0 0 22px;padding-left:20px;color:var(--muted);font-size:15px;flex:1}
.plan li{margin-bottom:7px}
.plan .btn{text-align:center;background:var(--p1);color:#eef6f8;border-radius:10px}
.plan .btn:hover{background:#171b4a}
.plan.free .btn{background:#eef6f8;color:#10123a;border:1px solid var(--line)}
.plan.free .btn:hover{background:#ffffff}

/* privacy + CTA */
.privacy{background:var(--wash);border:1px solid #cfe9ef;border-radius:16px;padding:24px 26px;color:var(--muted)}
.privacy strong{color:var(--ink)}
.final{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.final .btn-p{background:var(--p1);color:#eef6f8;border-radius:10px}
.final .btn-p:hover{background:#171b4a}

/* νομικές */
.notice{border-left:4px solid var(--teal);background:var(--card);
  border-radius:0 14px 14px 0;padding:18px 20px;color:var(--muted);max-width:64ch}

.stream footer{padding:24px 0 34px;color:var(--muted);font-size:14px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line)}
.stream footer nav{display:flex;gap:18px;flex-wrap:wrap}
.stream footer a{color:var(--muted);text-decoration:none}
.stream footer a:hover{color:var(--teal-ink)}
.stream footer .legal-id{flex-basis:100%;margin:0;font-size:12.5px;line-height:1.6}

/* ---------- responsive (όπως εγκρίθηκε στο mockup) ---------- */
@media (max-width:1024px){
  .wrap{grid-template-columns:1fr}
  .pane{position:static;height:auto;gap:30px;padding:26px 24px 32px}
}
@media (max-width:640px){
  .grid,.plans{grid-template-columns:1fr}
}
@media (min-width:1025px) and (max-height:860px){
  .pane{padding:24px 36px 22px}
  .pane h1{font-size:clamp(26px,2.8vw,38px)}
  .pane p.lead{font-size:16px;margin:16px 0 24px}
  .kick{margin-bottom:14px}
  .btn{padding:11px 22px;font-size:14.5px}
  .pspark{display:none}
}
@media (min-width:1025px) and (max-height:700px){
  .panelmini{display:none}
}
@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .pfill{animation:none}
  .marq .track{animation:none}
}


/* ════════════════════════════════════════════════════════════════════════════
   Σελίδα Λειτουργιών — ομαδοποιημένο ευρετήριο, ενότητες με οπτικά
   ════════════════════════════════════════════════════════════════════════════ */

.fwrap{display:grid;grid-template-columns:166px minmax(0,1fr);gap:30px;align-items:start;padding-top:28px}

/* κάθετο ευρετήριο, ομαδοποιημένο· ακολουθεί το scroll (assets/features.js) */
.rail{position:sticky;top:26px}
.rail > em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:800;margin-bottom:14px}
.rg{margin-bottom:16px}
.rg > b{display:flex;gap:7px;align-items:baseline;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:5px;padding-left:11px}
.rg > b i{font-style:normal;color:#5f7384}
.rg.on > b{color:var(--teal-ink)}
.rg.on > b i{color:var(--teal-ink)}
.rail a{display:block;padding:4px 0 4px 11px;font-size:12.5px;color:var(--muted);
  text-decoration:none;border-left:2px solid var(--line);line-height:1.35}
.rail a.on{color:var(--ink);font-weight:700;border-left-color:var(--cyan)}
.rail a:hover{color:var(--teal-ink)}

/* κεφαλίδα ομάδας μέσα στη ροή */
.ghead{padding:44px 0 6px}
.ghead:first-child{padding-top:0}
.ghead .gno{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-ink);display:block;margin-bottom:9px}
.ghead h2{font-size:clamp(24px,2.7vw,34px);margin-bottom:0}
.ghead .rule{height:2px;background:linear-gradient(90deg,var(--cyan),var(--teal),transparent);
  margin-top:18px;border-radius:2px}

/* Ο διαχωριστής των ενοτήτων είναι η ΟΥΡΑ ΤΟΥ ΣΗΜΑΤΟΣ, όχι γραμμή: πέντε κουκκίδες
   που μικραίνουν και σκουραίνουν — η γεωμετρία του λογοτύπου (marks.ts). */
.stream section.fs{padding:26px 0 40px;border-bottom:0;position:relative}
.stream section.fs::after{content:"";position:absolute;left:0;bottom:14px;width:70px;height:9px;
  background:
    radial-gradient(circle 3.5px at 5px 4.5px,#4fc5de 99%,transparent 100%),
    radial-gradient(circle 3px at 20px 4.5px,#2ab6cf 99%,transparent 100%),
    radial-gradient(circle 2.5px at 34px 4.5px,#189bb8 99%,transparent 100%),
    radial-gradient(circle 2px at 46px 4.5px,#20808f 99%,transparent 100%),
    radial-gradient(circle 1.5px at 56px 4.5px,#1f6478 99%,transparent 100%);
  background-repeat:no-repeat}
.stream section.fs.last::after{display:none}
.fs h3{font-size:20px;margin:0 0 7px}
.fs .sub{margin-bottom:14px;font-size:16px}
.fs ul{margin:0 0 18px;padding-left:19px;color:var(--muted);font-size:14.5px}
.fs li{margin-bottom:6px}
.fs li b{color:var(--ink)}

/* Λειτουργίες, «ρυθμός» (4/10/2026): κάθε ομάδα σε δικό της φόντο από άκρη σε άκρη της στήλης
   περιεχομένου, και αέρας χωρίς να κοπεί λέξη — μεγαλύτερα κενά, μεγαλύτερο διάστιχο, και μία
   λεπτή γραμμή ανάμεσα στα sections αντί για την ουρά κουκκίδων, που χανόταν στα χρωματιστά φόντα. */
.stream.feat{padding:0}
.feat .fwrap{grid-template-columns:190px minmax(0,1fr);gap:0;padding-top:0}
.feat .rail{top:0;padding:72px 16px 24px clamp(20px,2.4vw,32px)}
.feat .grp{padding:72px clamp(24px,4vw,60px) 80px}
.feat .ghead,.feat .ghead:first-child{padding:0 0 48px}
.feat .ghead h2{font-size:clamp(28px,2.8vw,36px);max-width:22ch}
.feat .ghead .rule{display:none}
.feat section.fs{padding:0}
.feat section.fs::after{display:none}
.feat section.fs + section.fs{margin-top:64px;padding-top:64px;border-top:1px solid var(--line)}
.feat .fs h3{font-size:24px;margin-bottom:10px}
.feat .fs .sub{font-size:18px;line-height:1.6;max-width:58ch;margin-bottom:22px}
.feat .fs ul{font-size:16.5px;max-width:64ch;margin-bottom:0}
.feat .fs li{margin-bottom:11px}
.feat .fs .fx{margin-top:32px;max-width:620px}
.feat > section{padding:64px clamp(24px,4vw,60px);border-bottom:0;background:var(--card)}
.feat > footer{padding:24px clamp(24px,4vw,60px) 34px}

/* Περιπτώσεις, «το εύρημα πρώτα» (4/10/2026): κάθε περίπτωση ανοίγει με το εύρημά της σε μεγάλα
   γράμματα, και τα τρία βήματα γίνονται λίστα με ταμπέλα αριστερά. Το εύρημα είναι <p>, όχι
   <blockquote>: είναι δική μας περιγραφή αποτελέσματος, όχι λόγια πελάτη. */
.stream.uc{padding:0}
.uc > section{padding:72px clamp(24px,4vw,60px) 80px;border-bottom:0}
.uc > footer{padding:24px clamp(24px,4vw,60px) 34px}
.uc h2{font-size:clamp(28px,2.8vw,36px)}
.uc .sub{font-size:18px;line-height:1.6}
.uc .jump{display:flex;flex-wrap:wrap;gap:10px}
.uc .jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid #c9d5de;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px}
.uc .jump a:hover{border-color:var(--teal);color:var(--teal-ink)}
.uc .find{margin-bottom:28px}
.uc .find-text{margin:0 0 12px;font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-weight:800;
  font-size:clamp(22px,2.4vw,30px);line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.uc .find .meta{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.uc section[id] > .sub{margin-bottom:0}
.uc dl.ucsteps{margin:28px 0 0;border-top:1px solid var(--line);display:grid;
  grid-template-columns:190px minmax(0,1fr);column-gap:28px}
.uc dl.ucsteps dt,.uc dl.ucsteps dd{padding:18px 0;border-top:1px solid var(--line)}
.uc dl.ucsteps dt:first-of-type,.uc dl.ucsteps dd:first-of-type{border-top:0}
.uc dl.ucsteps dt span{display:inline-block;background:var(--wash);color:var(--teal-ink);font-weight:700;
  font-size:14.5px;padding:5px 14px;border-radius:999px;white-space:nowrap}
.uc .bg-mist dl.ucsteps dt span{background:#dcedf1}
.uc dl.ucsteps dd{margin:0;font-size:16.5px;line-height:1.6;color:#3f5263}
.uc .bg-abyss .find .meta{color:#b3bbdf}
.uc .bg-abyss .chip,.uc .bg-abyss dl.ucsteps dt span{background:rgba(79,197,222,.16);color:#7fd6ea}
.uc .bg-abyss dl.ucsteps,.uc .bg-abyss dl.ucsteps dt,.uc .bg-abyss dl.ucsteps dd{border-color:rgba(238,246,248,.14)}
.uc .bg-abyss dl.ucsteps dd{color:#d3d9ef}
@media (max-width:900px){
  .uc dl.ucsteps{grid-template-columns:1fr}
  .uc dl.ucsteps dd{border-top:0;padding-top:8px}
}

@media (max-width:1200px){
  .fwrap{grid-template-columns:1fr;gap:0;padding-top:0}
  .rail{top:0;z-index:5;background:var(--paper);padding:12px 0 10px;
    border-bottom:1px solid var(--line);margin-bottom:20px;
    display:flex;gap:16px;overflow-x:auto;align-items:center}
  .rail > em{display:none}
  .rg{margin-bottom:0;display:flex;gap:6px;align-items:center;flex:none}
  .rg > b{margin-bottom:0;padding-left:0;white-space:nowrap}
  .rg > b i{display:none}
  .rail a{border-left:0;border:1px solid var(--line);border-radius:999px;padding:4px 12px;
    background:var(--card);flex:none;white-space:nowrap}
  .rail a.on{background:var(--p1);border-color:var(--p1);color:#eef6f8}
  .feat .fwrap{grid-template-columns:1fr}
  .feat .rail{padding:12px clamp(24px,4vw,60px) 10px;margin-bottom:0}
  .feat .grp{padding-top:56px;padding-bottom:64px}
}

/* ---------- τα οπτικά των λειτουργιών ---------- */
.fx{border:1px solid var(--line);background:var(--card);border-radius:14px;
  box-shadow:0 12px 34px rgba(8,10,32,.07);overflow:hidden}
.fx-head{display:flex;align-items:center;gap:7px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:#f4f8fa;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.fx-head i{width:7px;height:7px;border-radius:50%;background:#cfdae2;flex:none}
.fx-body{padding:14px}

.fxcols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.fxcol{padding:12px}
.fxcol{border-right:1px solid var(--line)}
.fxcol:last-child{border-right:0}
.fxcol .fx-h{margin:0 0 10px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  font-family:'Source Sans 3','Source Sans 3 Fallback',sans-serif}
.fxcol.ask .fx-h{color:var(--teal-ink)} .fxcol.pain .fx-h{color:#a8601a} .fxcol.praise .fx-h{color:#23805d}
.fxr{margin-bottom:10px}
.fxr span{display:block;font-size:11.5px;color:var(--ink);margin-bottom:4px;line-height:1.3}
.trk{height:5px;border-radius:3px;background:#edf2f5;overflow:hidden}
.trk i{display:block;height:100%;border-radius:3px}
.ask .trk i{background:#2ab6cf} .pain .trk i{background:#e8a05a} .praise .trk i{background:#63c9a4}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.st{border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.st-rev{background:#eef1f5;color:#5a6b7e}
.st-watch{background:#fdf1e3;color:#955a15}
.st-park{background:#f1eef8;color:#6a5aa0}
/* #23704f και όχι #2a7f5f: το δεύτερο έδινε 4,34:1 στο #e6f5ee (κάτω από το AA). */
.st-work{background:#e6f5ee;color:#23704f}

.tlist{display:grid;gap:0}
.tline{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.tline:last-child{border-bottom:0}
.tline b{font-weight:600;color:var(--ink)}
.tline .dot-new{width:7px;height:7px;border-radius:50%;background:var(--cyan);display:inline-block;margin-right:7px}

.flow{display:flex;align-items:stretch;flex-wrap:wrap}
.fstep{flex:1;min-width:104px;padding:12px 10px;text-align:center;position:relative}
.fstep + .fstep::before{content:"";position:absolute;left:-6px;top:50%;width:12px;height:12px;
  border-right:2px solid #c6d7e0;border-bottom:2px solid #c6d7e0;transform:translateY(-50%) rotate(-45deg)}
.fstep em{display:block;font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:6px}
.fstep b{font-size:13px;font-weight:600}
.ba{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:12px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.ba .big{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-weight:800;font-size:22px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ba .drop{color:#2a7f5f;font-weight:700}

.cust{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;padding:14px}
.cust .fx-h{margin:0 0 6px;font-size:15px;font-weight:700}
.cust .meta{display:flex;gap:6px;flex-wrap:wrap}
.arr{background:#eef1f5;color:#3d4d5c;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
.risk{background:#fdecec;color:#a33;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
.cust svg{display:block}

.tl{padding:6px 14px 14px}
.tl svg{display:block;width:100%;height:88px}
.evt{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);padding:0 14px 12px}
.evt b{color:var(--ink);font-weight:600}
.evtag{background:#efeafc;color:#5b4bab;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700}

.q{padding:14px}
.q p{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink)}
.scale{display:flex;gap:4px;flex-wrap:wrap}
.scale span{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--muted)}
.scale span.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}
.branch{margin-top:12px;padding-left:16px;border-left:2px solid #cfe4ea;font-size:12.5px;color:var(--muted)}
.branch b{color:var(--ink)}

.axes{padding:14px}
.ax{margin-bottom:11px}
.ax:last-child{margin-bottom:0}
.ax span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.seg{display:flex;height:9px;border-radius:5px;overflow:hidden;background:#edf2f5}
.seg i{display:block;height:100%}

.doc{padding:16px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.paper{width:104px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:9px 8px;
  box-shadow:0 6px 18px rgba(8,10,32,.1)}
.paper .l{height:4px;border-radius:2px;background:#e6edf2;margin-bottom:5px}
.paper .l.t{background:#0b6e80;width:62%;height:6px}
.paper .mini{display:flex;gap:2px;align-items:flex-end;height:26px;margin:8px 0 6px}
.paper .mini i{flex:1;background:#bfe6ee;border-radius:1px}
.doc .why{font-size:12.5px;color:var(--muted)}
.doc .why b{color:var(--ink)}

.chan{display:grid;grid-template-columns:1fr 1fr;gap:0}
.chan > div{padding:12px 14px;border-right:1px solid var(--line)}
.chan > div:last-child{border-right:0}
.chan em{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;display:block;margin-bottom:7px}
.chan p{margin:0;font-size:12.5px;color:var(--ink);line-height:1.45}
.chan .num{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-weight:800;color:var(--teal-ink)}

.rule-card{padding:14px;font-size:13px}
.cond{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.cond code{background:#eef4f7;border-radius:6px;padding:3px 9px;font-size:12px;
  font-family:'Source Sans 3','Source Sans 3 Fallback',sans-serif;font-weight:600;color:var(--ink)}
.and{font-size:10.5px;font-weight:800;color:var(--teal-ink);letter-spacing:.08em}
.win{margin-top:10px;font-size:12px;color:var(--muted)}

.pii{padding:14px;font-size:13.5px;line-height:1.75;color:var(--ink)}
.mask{background:#10223015;border:1px dashed #b6c6d2;border-radius:6px;padding:1px 7px;
  font-size:12px;color:var(--muted);font-weight:600}
.pii .after{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--muted);font-size:12.5px}

/* ── Η φόρμα επικοινωνίας ────────────────────────────────────────────────────
   Δεν αντικαθιστά το mailto: κάθεται δίπλα του. Χωρίς JavaScript η φόρμα δεν
   στέλνει, και τότε ο σύνδεσμος από πάνω της είναι ο δρόμος που δούλευε πάντα. */
.form{display:grid;gap:14px;max-width:560px;margin-top:20px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--ink)}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;
  box-sizing:border-box}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus{
  outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(12,133,153,.16)}
.field .err{font-size:12.5px;color:#b3261e;min-height:0}
.field.bad input,.field.bad textarea{border-color:#b3261e}
/* Η παγίδα: κρυφή από τα μάτια ΚΑΙ από τους αναγνώστες οθόνης, ποτέ display:none —
   αρκετά bots παραλείπουν ό,τι είναι display:none, και τότε η παγίδα δεν πιάνει. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.form .note{font-size:12.5px;color:var(--muted);max-width:52ch}
.formmsg{border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.5;display:none}
.formmsg.ok{display:block;background:var(--wash);border:1px solid #bcdfe6;color:#0b4f5c}
.formmsg.no{display:block;background:#fdecec;border:1px solid #f0c5c5;color:#8c2f2f}
.btn[disabled]{opacity:.6;pointer-events:none}

/* ── Πηγές και κανάλια: το διάγραμμα της Αρχικής, οι δύο λωρίδες των Λειτουργιών ──
   Η λωρίδα που υπήρχε πριν ανακάτευε έξι πηγές και τρία κανάλια σε μία σειρά: το Slack
   διαβαζόταν ως πηγή, ενώ ο τίτλος από πάνω υποσχόταν διάκριση. Εδώ η διάκριση **είναι**
   η εικόνα — και το webhook μπήκε στα κανάλια, όπου ανήκε από τη Φάση 8. */

/* Οπτικά κρυφό, ακουστά παρόν. Το marquee είναι aria-hidden γιατί διπλασιάζει τα chips
   για να κυλήσει· χωρίς αυτή τη γραμμή, τα κανάλια δεν υπάρχουν για αναγνώστη οθόνης. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Το διάγραμμα (Αρχική) ---------- */
.flowmap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;max-width:960px;margin:0 auto;padding-top:26px;text-align:left}
.fside > em{font-style:normal;display:inline-block;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);font-weight:800;padding-bottom:7px;margin-bottom:14px;
  border-bottom:2px solid var(--cyan)}
.fside.out{text-align:right}
.fside.out > em{border-bottom-color:var(--teal)}
.frow{display:grid;align-items:stretch}
.fside.in .frow{grid-template-columns:minmax(0,1fr) 96px}
.fside.out .frow{grid-template-columns:96px minmax(0,1fr)}
.fstack{display:grid;gap:8px}
/* Το ύψος είναι **καρφωμένο**, και είναι ο λόγος που τα καλώδια ακουμπούν στο κέντρο κάθε
   chip: τα ποσοστά του viewBox βγαίνουν από ύψος και κενό. Άλλαξε το ένα, άλλαξε το άλλο. */
.fstack .pill{height:38px;display:flex;align-items:center;box-sizing:border-box;
  border:1px solid var(--line);background:var(--card);border-radius:999px;padding:0 16px;
  font-size:14px;font-weight:600;color:var(--ink)}
.fside.in .fstack .pill{justify-content:flex-end}
.wire{width:100%;height:100%;display:block;overflow:visible}
/* Χωρίς `non-scaling-stroke` το τέντωμα του viewBox κάνει τις γραμμές παχιές κάθετα και
   λεπτές οριζόντια — καμπύλες που αλλάζουν πάχος στη μέση τους. */
.wbase{fill:none;stroke:var(--line);stroke-width:2;vector-effect:non-scaling-stroke}
.whead{fill:var(--line);stroke:none}
/* `pathLength="100"` στο markup: ο παλμός είναι το ίδιο μήκος σε κάθε καλώδιο, ανεξάρτητα
   από το πραγματικό — αλλιώς το μακρύτερο θα είχε μικρότερη κουκκίδα. */
.wpulse{fill:none;stroke:var(--cyan);stroke-width:2.4;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-dasharray:7 93;stroke-dashoffset:100;opacity:0}
.fhub{display:grid;justify-items:center;gap:6px;padding:0 4px}
.fhub b{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-size:19px;color:var(--ink)}
.fhub > span:last-child{font-size:12px;color:var(--muted);text-align:center;max-width:15ch;
  line-height:1.4}
.fmark{position:relative;display:grid;place-items:center}
.fmark .ring{position:absolute;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--cyan);opacity:0;pointer-events:none}

/* Ένας κύκλος 6s, που διαβάζεται ως μία διαδρομή: οι πηγές ανάβουν με τη σειρά, ο παλμός
   τρέχει στο καλώδιο, ο κόμβος απαντά, μετά ανάβουν τα κανάλια. Το 88% του χρόνου η
   εικόνα είναι ήσυχη — κάθεται πάνω από το κείμενο του hero. */
.flowmap .wpulse{opacity:1;animation:wire 6s linear infinite;animation-delay:var(--d)}
@keyframes wire{0%{stroke-dashoffset:100}22%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.flowmap .fstack .pill{animation:chip-on 6s linear infinite;animation-delay:var(--d)}
@keyframes chip-on{
  0%,100%{background:var(--card);border-color:var(--line);color:var(--ink)}
  3%{background:var(--wash);border-color:var(--cyan);color:#0b4f5c}
  11%{background:var(--card);border-color:var(--line);color:var(--ink)}
}
.flowmap .fmark .ring{animation:ring 6s linear infinite;animation-delay:2.2s}
@keyframes ring{
  0%{transform:scale(.72);opacity:.75}
  14%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* ---------- Οι δύο λωρίδες (Λειτουργίες) ---------- */
.duo{display:grid;gap:12px;padding-top:22px}
.lane{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.lane > b{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  font-weight:800;white-space:nowrap;display:flex;align-items:center;gap:6px}
.lane > b i{font-style:normal;color:var(--teal-ink);font-size:13px}
/* Αντίθετη φορά ανά λωρίδα: η κίνηση παύει να είναι διακόσμηση και γίνεται η διάκριση. */
.lane .marq .track{animation:slide-rev 30s linear infinite}
.lane.out .marq .track{animation:slide 24s linear infinite}
@keyframes slide-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.src.ch{background:var(--wash);border-color:#bcdfe6;color:#0b4f5c}

@media (max-width:900px){
  .flowmap{grid-template-columns:1fr;gap:18px;text-align:center}
  .fside.out{text-align:center}
  .fside.in .frow,.fside.out .frow{grid-template-columns:1fr}
  /* Δέκα καμπύλες σε πλάτος 360px είναι μπερδεμένο σχοινί, όχι διάγραμμα. */
  .wire{display:none}
  .fstack{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .fstack .pill,.fside.in .fstack .pill{justify-content:center}
}
@media (max-width:700px){
  .lane{grid-template-columns:1fr;gap:6px}
  .lane > b{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .flowmap .wpulse{animation:none;opacity:0}
  .flowmap .fstack .pill,.flowmap .fmark .ring,.lane .marq .track{animation:none}
}

/* ---------- νομικά κείμενα (docs/legal/render.py) ---------- */
.legal{max-width:72ch}
.legal h3{font-size:21px;margin:34px 0 10px}
.legal p,.legal li{line-height:1.65}
.legal ul,.legal ol{padding-left:1.3em;margin:0 0 14px}
.legal li{margin:4px 0}
.legal hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.legal-table{overflow-x:auto;margin:14px 0 22px}
.legal-table table{border-collapse:collapse;font-size:14.5px;min-width:560px}
.legal-table th,.legal-table td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.legal-table th{font-weight:600;color:var(--ink)}

/* Ομαλή μετάβαση ανάμεσα στις σελίδες (cross-document View Transitions): ο browser κρατά την
   παλιά σελίδα ως εικόνα και τη σβήνει πάνω στη νέα, αντί για λευκό καρέ. Μαζί με τα
   Speculation Rules (η επόμενη σελίδα είναι ήδη έτοιμη) η πλοήγηση μοιάζει με εφαρμογή. Το
   λογότυπο έχει δικό του όνομα, ώστε να μένει ακίνητο αντί να σβήνει κι αυτό. Browser που δεν το
   ξέρει κάνει απλή πλοήγηση· και όποιος έχει ζητήσει λιγότερη κίνηση δεν το βλέπει καθόλου. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .pane .logo{view-transition-name:logo}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
}


/* ════════════════════════════════════════════════════════════════════════════
   Σελίδα Πακέτων — η προσφορά πρώτα (mockup «Πακέτα · Β», 4/10/2026)
   Τιμές δεν δείχνουμε, οπότε το δυνατό χαρτί είναι το δωρεάν audit ολόκληρο: ανοίγει
   τη σελίδα, με μικρογραφία του δείγματος. Οι αριθμοί της μικρογραφίας είναι αυτούσιοι
   από το /sample-audit/ — αλλάζει εκείνο, αλλάζει κι αυτή.
   ════════════════════════════════════════════════════════════════════════════ */
.stream.pk{padding:0}
.pk > section{padding:72px clamp(24px,4vw,60px) 80px;border-bottom:0}
.pk > footer{padding:24px clamp(24px,4vw,60px) 34px}
.pk h2{font-size:clamp(28px,2.8vw,36px)}
.pk .sub{font-size:18px;line-height:1.6;max-width:60ch}

/* προσφορά */
/* Δίπλα-δίπλα μόνο όταν η στήλη χωρά και τα δύο· αλλιώς η κάρτα πάει από κάτω. */
.pk .offer{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.pk .pkdoc{max-width:440px}
.pk .offer > *{min-width:0}
.pk .offer h2{font-size:clamp(32px,3.3vw,44px);color:#eef6f8;max-width:16ch}
.pk .offer .sub{margin-bottom:0}
.pk .tagline{display:inline-block;background:rgba(79,197,222,.16);color:#7fd6ea;border-radius:999px;
  padding:5px 14px;font-weight:700;font-size:13.5px;margin-bottom:18px}
.pk .ticks{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.pk .ticks li,.pk .row li{position:relative;padding-left:24px;line-height:1.45}
.pk .ticks li{color:#d3d9ef;font-size:16px}
.pk .ticks li::before,.pk .row li::before,.pk .cmp .y{content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;
  border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}
.pk .ticks li::before{border-color:var(--cyan2)}
.pk .noes{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.pk .noes li{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px;border-radius:999px;
  background:rgba(238,246,248,.06);border:1px solid rgba(238,246,248,.22);font-weight:700;font-size:15px}
.pk .noes li::before{content:"";width:9px;height:5px;margin:-3px 2px 0;border-left:2px solid var(--cyan2);
  border-bottom:2px solid var(--cyan2);transform:rotate(-45deg)}
.pk .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.pk .bg-abyss .btn-c{color:#10123a}
.pk .bg-abyss .btn-o{color:#eef6f8}

/* μικρογραφία του δείγματος — η γραφή του ίδιου του εγγράφου, όχι του site */
.pk .pkdoc{background:#fff;color:#1f2933;border-radius:14px;padding:22px 24px;box-shadow:0 24px 60px rgba(4,6,24,.35);
  font-family:system-ui,'Segoe UI',Arial,sans-serif;font-size:13.5px;line-height:1.45}
.pk .pkdoc .chip{display:inline-block;background:#fff4d6;color:#7a5a12;margin-bottom:12px}
.pk .pkdoc-t{font-weight:700;font-size:17px}
.pk .pkdoc-s{color:#616e7c;font-size:12.5px;margin:2px 0 14px}
.pk .pkdoc-k{display:flex;flex-wrap:wrap;gap:4px 18px;padding-bottom:12px;border-bottom:1px solid #e4e7eb;margin-bottom:6px;color:#616e7c;font-size:12.5px}
.pk .pkdoc-k b{color:#1f2933;font-size:19px;margin-right:3px}
.pk .pkdoc-h{font-weight:700;color:#334e68;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:12px 0 4px}
.pk .pkdoc-r{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px}
.pk .pkdoc-r em{font-style:normal;color:#616e7c;white-space:nowrap}
.pk .pkdoc-r.risk{margin:8px -8px 0;padding:5px 8px;border-radius:8px;font-size:13.5px}
.pk .pkdoc-r.risk span,.pk .pkdoc-r.risk em{color:#a3361c;font-weight:700}
.pk .pkdoc-q{margin:6px 0 0;padding-left:10px;border-left:3px solid #d2d6dc;color:#52606d}

/* τα πληρωμένα πακέτα, ως γραμμές */
.pk .rows{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.pk .row{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.pk .row h3{font-size:24px}
.pk .row .tag{color:var(--teal-ink);font-weight:700;font-size:13.5px;margin:2px 0 0}
.pk .row .promise{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-weight:700;font-size:18px;margin:0 0 8px}
.pk .row ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.pk .row li{font-size:15px;color:#3f5263;padding-left:20px}
.pk .row li::before{left:1px;width:10px;height:5px}
.pk .row .btn{display:block;margin-top:18px;padding:13px 16px;text-align:center;background:var(--p1);color:#eef6f8}
.pk .row .btn:hover{background:#171b4a}
.pk .row.full{border:2px solid var(--teal);box-shadow:0 10px 34px rgba(12,133,153,.16)}
.pk .row .badge{position:absolute;top:-13px;left:24px;background:var(--teal-ink);color:#fff;font-weight:700;
  font-size:12.5px;border-radius:999px;padding:4px 12px}
.pk .row.ent .btn{background:var(--card);color:var(--ink);border:1px solid #c9d5de}
.pk .row.ent .btn:hover{border-color:var(--teal);color:var(--teal-ink)}

/* σύγκριση */
.pk .cmp-wrap{margin-top:28px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.pk .cmp-wrap:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.pk .cmp{width:100%;border-collapse:collapse;font-size:15.5px}
.pk .cmp th,.pk .cmp td{padding:13px 16px;border-top:1px solid #eef2f5;text-align:center}
.pk .cmp thead th{border-top:0;font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-size:17px;background:var(--paper)}
.pk .cmp thead th:first-child,.pk .cmp th[scope=row]{text-align:left}
.pk .cmp thead th.full{background:var(--wash);color:var(--teal-ink)}
.pk .cmp th[scope=row]{font-weight:600}
.pk .cmp td.full{background:#f4fafb}
.pk .cmp td{position:relative;min-width:84px}
.pk .cmp .y{left:50%;top:50%;margin:-5px 0 0 -6px}
.pk .cmp .x{color:#5f7384}

/* σε κάθε πακέτο */
.pk .always{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 28px;margin-top:32px}
.pk .always h3{font-size:18px;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.pk .always h3::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan2)}
.pk .always p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}

/* ερωτήσεις και κλείσιμο */
.pk .qa{margin-top:28px;border-top:1px solid var(--line)}
.pk .qa > div{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px}
.pk .qa h3{font-size:19px}
.pk .qa p{margin:0;color:#3f5263;font-size:16.5px;line-height:1.6}
.pk .more{margin:18px 0 0;font-weight:600}
.pk .pk-final{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;
  background:linear-gradient(150deg,var(--p1),#171b4a);color:#eef6f8;border-radius:18px;padding:30px 34px}
.pk .pk-final h2{color:#eef6f8;font-size:28px;margin:0}
.pk .pk-final p{margin:6px 0 0;color:#b3bbdf}

@media (min-width:1700px){
  .pk .offer{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px}
  .pk .ticks{grid-template-columns:1fr}
}
@media (max-width:1100px){.pk .always{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .pk .row{grid-template-columns:1fr;gap:14px}
  .pk .qa > div{grid-template-columns:1fr;gap:6px}
}
@media (max-width:640px){
  .pk > section{padding:56px 20px 60px}
  .pk .ticks,.pk .row ul,.pk .always{grid-template-columns:1fr}
  /* Τέσσερις στήλες ελέγχου και η περιγραφή χωρούν σε 390px· ο πίνακας κυλά μόνος του μόνο πιο στενά. */
  .pk .cmp{font-size:13.5px}
  .pk .cmp th,.pk .cmp td{padding:10px 6px}
  .pk .cmp th[scope=row],.pk .cmp thead th:first-child{padding-left:10px;min-width:100px}
  .pk .cmp thead th{font-size:12.5px;line-height:1.2;letter-spacing:-.01em}
  .pk .cmp td{min-width:40px}
}


/* ════════════════════════════════════════════════════════════════════════════
   Σελίδα Ασφάλειας — το ερωτηματολόγιο, απαντημένο (mockup «Ασφάλεια · Β», 4/10/2026)
   Οι ερωτήσεις είναι νέες· οι απαντήσεις είναι τα κείμενα της σελίδας, αυτούσια.
   Τα σύμβολα του παραδείγματος είναι τα PiiTokens του κώδικα — αλλάζει εκείνο, αλλάζει αυτό.
   ════════════════════════════════════════════════════════════════════════════ */
.stream.sq{padding:0}
.sq > section{padding:72px clamp(24px,4vw,60px) 80px;border-bottom:0}
.sq > footer{padding:24px clamp(24px,4vw,60px) 34px}
.sq h2{font-size:clamp(28px,2.8vw,36px);max-width:26ch}
.sq .sub{font-size:18px;line-height:1.6;max-width:62ch}
.sq .bg-abyss h2{color:#eef6f8}
.sq .bg-abyss .sub b{color:#eef6f8}

.sq .toc,.sq .docs{display:flex;flex-wrap:wrap;gap:10px}
.sq .toc{margin-bottom:12px}
.sq .toc a,.sq .docs a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border:1px solid #c9d5de;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px}
.sq .toc a{border-radius:999px}
.sq .toc a b{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;color:var(--teal-ink)}
.sq .docs a{border-radius:10px;font-size:15px}
.sq .docs a::before{content:"";width:11px;height:14px;border:2px solid var(--teal-ink);border-radius:2px}
.sq .toc a:hover,.sq .docs a:hover{border-color:var(--teal);color:var(--teal-ink)}

/* ερωτήσεις */
.sq .qa{margin-top:30px;border-top:1px solid var(--line)}
.sq .qa > div{display:grid;grid-template-columns:280px minmax(0,1fr);gap:8px 28px;padding:22px 0;border-bottom:1px solid var(--line)}
.sq .qa h3{font-size:19px;line-height:1.3}
.sq .qa p{margin:0;font-size:16.5px;line-height:1.65;color:#3f5263}
.sq .qa p b{color:var(--ink)}
.sq .qa p + p{margin-top:10px}
.sq .qa .ans{min-width:0}
.sq .bg-abyss .qa,.sq .bg-abyss .qa > div{border-color:rgba(238,246,248,.14)}
.sq .bg-abyss .qa h3{color:#eef6f8}
.sq .bg-abyss .qa p{color:#d3d9ef}
.sq .bg-abyss .qa p b{color:#fff}

/* το παράδειγμα του καθαρισμού */
.sq .rx{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:0 14px;margin-top:10px}
.sq .rx-col{background:var(--card);color:var(--ink);border-radius:14px;padding:18px 20px}
.sq .rx-col.out{background:#f4f6fc}
.sq .rx-h{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px;
  font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#334e68}
.sq .rx-h span{text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted)}
.sq .bg-abyss .qa .rx-col p{margin:0;color:var(--ink);font-size:16px;line-height:1.75}
.sq .rx mark,.sq .rx code{white-space:nowrap}
.sq .rx mark{background:#fdecec;color:#8a2b17;border-radius:4px;padding:1px 4px}
.sq .rx mark.keep{background:#fff4d6;color:#6b4f0f}
.sq .rx code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:13.5px;background:var(--wash);color:var(--teal-ink);border-radius:4px;padding:2px 5px}
.sq .rx-arrow{position:relative;display:grid;place-items:center}
.sq .rx-arrow::before{content:"";position:absolute;left:0;right:6px;top:50%;height:2px;background:linear-gradient(90deg,var(--cyan2),#2ab6cf)}
.sq .rx-arrow::after{content:"";position:absolute;right:0;top:calc(50% - 6px);border:6px solid transparent;border-left-color:#2ab6cf;border-right:0}
.sq .rx-arrow span{position:relative;transform:translateY(-18px);font-size:12px;font-weight:700;color:#7fd6ea}
.sq .bg-abyss .qa p.rx-note{grid-column:1/-1;margin:14px 0 0;font-size:14px;color:#b3bbdf;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sq .rx-note .chip{background:rgba(79,197,222,.16);color:#7fd6ea}

/* πιστοποιήσεις και κλείσιμο */
.sq .honest{margin-top:22px;background:var(--card);border:1px solid var(--line);border-left:4px solid #f0a35e;
  border-radius:14px;padding:22px 24px;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:72ch}
.sq .honest strong{display:block;color:var(--ink);font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;font-size:21px;margin-bottom:4px}
.sq .sq-final{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;
  background:linear-gradient(150deg,var(--p1),#171b4a);color:#eef6f8;border-radius:18px;padding:30px 34px}
.sq .sq-final h2{color:#eef6f8;font-size:28px;margin:0}
.sq .sq-final p{margin:6px 0 0;color:#b3bbdf}
.sq .sq-final .ctas{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1100px){
  .sq .rx{grid-template-columns:minmax(0,1fr)}
  .sq .rx-arrow{height:44px}
  .sq .rx-arrow::before{left:50%;right:auto;top:0;bottom:8px;width:2px;height:auto}
  .sq .rx-arrow::after{left:calc(50% - 5px);right:auto;top:auto;bottom:0;border:6px solid transparent;border-top-color:#2ab6cf;border-bottom:0}
  .sq .rx-arrow span{transform:translateX(48px)}
}
@media (max-width:1000px){.sq .qa > div{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.sq > section{padding:56px 20px 60px}}


/* ════════════════════════════════════════════════════════════════════════════
   Σελίδα Συχνών ερωτήσεων — ανοιχτές, σε τέσσερις ομάδες (mockup «Συχνές · Α», 4/10/2026)
   Η μορφή της Ασφάλειας (ερώτηση αριστερά, απάντηση δεξιά), ώστε οι δύο σελίδες να δένουν.
   Το PublicSiteTests διαβάζει τις ερωτήσεις από τα h3.fq-q / div.fq-a (το .q υπάρχει ήδη, Λειτουργίες) — αλλάζει το markup, αλλάζει κι εκείνο.
   ════════════════════════════════════════════════════════════════════════════ */
.stream.fqa{padding:0}
.fqa > section{padding:72px clamp(24px,4vw,60px) 80px;border-bottom:0}
.fqa > footer{padding:24px clamp(24px,4vw,60px) 34px}
.fqa h2{font-size:clamp(28px,2.8vw,36px);max-width:26ch}
.fqa .sub{font-size:18px;line-height:1.6;max-width:62ch}
.fqa .toc{display:flex;flex-wrap:wrap;gap:10px}
.fqa .toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid #c9d5de;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px}
.fqa .toc a b{font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif;color:var(--teal-ink)}
.fqa .toc a:hover{border-color:var(--teal);color:var(--teal-ink)}
.fqa .qa{margin-top:26px;border-top:1px solid var(--line)}
.fqa .qa > div{display:grid;grid-template-columns:300px minmax(0,1fr);gap:8px 32px;padding:24px 0;border-bottom:1px solid var(--line)}
.fqa .qa h3{font-size:20px;line-height:1.3}
.fqa .qa .fq-a p{margin:0;font-size:17px;line-height:1.65;color:#3f5263}
.fqa .more{display:inline-block;margin-top:10px;font-weight:600;font-size:15px;text-decoration:none}
.fqa .more:hover{text-decoration:underline}
.fqa .ask{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:28px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.fqa .ask p{margin:0;color:var(--muted);font-size:16.5px}
.fqa .ask strong{color:var(--ink)}
.fqa .ask .btn{border:1px solid #c9d5de;color:var(--ink);background:var(--card)}
.fqa .ask .btn:hover{border-color:var(--teal);color:var(--teal-ink)}
.fqa .fqa-final{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(150deg,var(--p1),#171b4a);color:#eef6f8;border-radius:18px;padding:30px 34px}
.fqa .fqa-final h2{color:#eef6f8;font-size:28px;margin:0}
.fqa .fqa-final p{margin:6px 0 0;color:#b3bbdf}
@media (max-width:1000px){.fqa .qa > div{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.fqa > section{padding:56px 20px 60px}}


/* ════════════════════════════════════════════════════════════════════════════
   Σελίδα Επικοινωνίας — η φόρμα, και οι συμβουλές δίπλα (mockup «Επικοινωνία · Α», 4/10/2026)
   Η φόρμα είναι το ίδιο markup (ids, data-*, .field/.err/.trap): το contact.js κρέμεται από αυτό.
   Κάθε νέα κλάση έχει πρόθεμα ct-: τα .st, .doc και .q υπήρχαν ήδη και χάλασαν τρεις σελίδες.
   ════════════════════════════════════════════════════════════════════════════ */
.stream.ct{padding:0}
.ct > section{padding:72px clamp(24px,4vw,60px) 80px;border-bottom:0}
.ct > footer{padding:24px clamp(24px,4vw,60px) 34px}
.ct h2{font-size:clamp(28px,2.8vw,36px);max-width:24ch}
.ct .sub{font-size:18px;line-height:1.6;max-width:60ch}

.ct-reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ct-reasons > div{background:var(--card);border:1px solid #cfe1e7;border-radius:14px;padding:18px 20px}
.ct-reasons h3{font-size:18px;margin-bottom:4px}
.ct-reasons p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.ct-reasons > div.ct-lead{background:linear-gradient(150deg,var(--p1),#171b4a);border-color:transparent}
.ct-reasons > div.ct-lead h3{color:#eef6f8}
.ct-reasons > div.ct-lead p{color:#b3bbdf}

.ct-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
.ct-formcard{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px}
.ct-formcard .formmsg.ok,.ct-formcard .formmsg.no{margin-bottom:18px}
.ct .form{max-width:none;margin-top:0}
.ct .field label{font-size:13.5px}
.ct .field input,.ct .field textarea{font-size:15.5px;padding:12px 14px;border-color:#c9d5de}
.ct .field textarea{min-height:150px}
.ct-tips{position:sticky;top:24px;border-left:3px solid #2ab6cf;padding:4px 0 4px 22px}
.ct-tips h3{font-size:20px;margin-bottom:4px}
.ct-tips > p{margin:0 0 18px;font-size:15px;color:var(--muted)}
.ct-tips ol{margin:0;padding:0;list-style:none;counter-reset:ct}
.ct-tips li{counter-increment:ct;position:relative;padding:0 0 18px 40px}
.ct-tips li::before{content:counter(ct);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--wash);color:var(--teal-ink);font-weight:800;display:grid;place-items:center;
  font-family:'Alegreya Sans','Alegreya Sans Fallback',sans-serif}
.ct-tips li b{display:block;font-size:16px}
.ct-tips li span{font-size:15px;color:var(--muted);line-height:1.5}

.ct .privacy{background:var(--card)}
.ct-final{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px;
  background:linear-gradient(150deg,var(--p1),#171b4a);color:#eef6f8;border-radius:18px;padding:30px 34px}
.ct-final h2{color:#eef6f8;font-size:28px;margin:0}
.ct-final p{margin:6px 0 0;color:#b3bbdf}

@media (max-width:1180px){.ct-split{grid-template-columns:minmax(0,1fr)}.ct-tips{position:static}}
@media (max-width:760px){.ct-reasons{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.ct > section{padding:56px 20px 60px}.ct-formcard{padding:20px}}
/* Το κουμπί της φόρμας: το .btn-p είχε κανόνα μόνο μέσα σε .final, οπότε η «Αποστολή»
   έβγαινε με το γκρι του browser — και πριν από αυτή την αλλαγή. */
.ct .form .btn-p{background:var(--p1);color:#eef6f8;border:0;cursor:pointer}
.ct .form .btn-p:hover{background:#171b4a}
.ct .form .btn-p:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Η ένδειξη κάθε οπτικού των Λειτουργιών (4/10/2026): «δείγμα» όπου αριθμοί και αναλογίες είναι του
   δείγματος audit (σύνδεσμος εκεί), «εικονογράφηση» όπου δείχνεται μόνο σχήμα. Κανένα επινοημένο
   στατιστικό: ό,τι δεν είχε αντίκρισμα στο δείγμα έχασε τον αριθμό του. */
.fx-head .fx-tag{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:2px 9px;background:#fff4d6;color:#6b4f0f;text-decoration:none;white-space:nowrap}
.fx-head a.fx-tag:hover{text-decoration:underline}
.fx-head .fx-tag.fx-ill{background:#eef2f5;color:var(--muted)}
.ba .ba-rule{font-size:12px;color:var(--muted);text-align:center;line-height:1.4}