/* pricemonitoring.gr: paper + ink, green = profit, red = loss. System fonts only (no external requests). */
:root{--paper:#fff;--ink:#1a2433;--muted:#566173;--mist:#f2f1ee;--rule:#dcdad5;--ok:#157f55;--bad:#b42318;--bad-bg:#fdecea}
@media (prefers-color-scheme:dark){:root{--paper:#121821;--ink:#e6ebf2;--muted:#9aa6b6;--mist:#1c1f24;--rule:#30343b;--ok:#4cc492;--bad:#ff8a7a;--bad-bg:#3a1c19}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--ok);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

.top{border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:baseline;gap:10px;padding:18px 16px}
.brand{font-weight:800;font-size:1.2rem;letter-spacing:-.01em;text-decoration:none}
.brand span{color:var(--ok)}
.by{color:var(--muted);font-size:.875rem}

section{padding:64px 0}
.alt{background:var(--mist)}
h1{font-size:clamp(2.25rem,5.5vw,3.6rem);line-height:1.05;letter-spacing:-.025em;font-weight:800;margin-bottom:20px}
h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;letter-spacing:-.015em;margin-bottom:28px}
h3{font-size:1.06rem;line-height:1.35;margin-bottom:6px}
.lead{font-size:1.15rem;color:var(--muted)}

.hero{padding:72px 0 80px}

/* The one bold element: a channel-by-channel price check */
.check{border:1px solid var(--rule);border-radius:6px;background:var(--paper);box-shadow:0 1px 0 var(--rule),0 18px 40px -24px rgba(26,36,51,.35)}
.check table{width:100%;border-collapse:collapse}
.check th,.check td{padding:12px 18px;border-bottom:1px solid var(--rule);text-align:left;font-weight:400}
.check th{font-weight:600}
.note{padding:14px 18px;font-size:.9rem;color:var(--muted)}

.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-block;padding:13px 22px;border-radius:4px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.btn:hover{background:var(--ok)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);border-radius:0;padding:13px 4px}
.btn.ghost:hover{box-shadow:inset 0 -2px 0 var(--ok);color:var(--ok)}

.losses{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.losses{gap:32px}
.losses>div{border-left:3px solid var(--bad);padding:4px 0 4px 20px}
.losses p,.steps p,.two p{color:var(--muted)}
@media (max-width:820px){.losses{grid-template-columns:1fr;gap:28px}}

.checks{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 40px}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}

.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.steps li{counter-increment:s;border-top:1px solid var(--ink);padding-top:16px}
.steps li::before{content:counter(s);display:block;font-size:2.4rem;font-weight:800;line-height:1;color:var(--ok);margin-bottom:12px}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px}

.contact h2{margin-bottom:12px}
.contact .cta{align-items:center;gap:24px}

footer{border-top:1px solid var(--rule);padding:36px 0;color:var(--muted);font-size:.9rem}
footer p+p{margin-top:8px}
.legal-links a+a{margin-left:20px}

.legal h1{font-size:2.2rem;max-width:none}
.legal h2{font-size:1.2rem;margin:32px 0 8px}
.legal p,.legal li{color:var(--muted);margin-bottom:8px}
.legal ul{padding-left:20px}
.check thead th,.check thead td{font-size:.8rem;color:var(--muted);font-weight:600;padding-top:10px;padding-bottom:10px}
.ask{list-style:none;margin:8px 0 16px}
.ask li{padding-left:22px;position:relative;margin-bottom:6px}
.ask li::before{content:"";position:absolute;left:4px;top:.7em;width:8px;height:2px;background:var(--ok)}
.contact p+p{margin-top:0}
/* profit table (hero, full width) */
.hero-stack .check{margin-top:48px}
.scroll{overflow-x:auto}
.check table{min-width:640px}
.check thead td small,.check thead th small{display:block;font-weight:400;font-size:.78rem}
.check thead .ch{color:var(--ink);font-size:.9rem}
.check tbody th{font-weight:600}
.check td.num{text-align:right;color:var(--muted)}
.check td.p{text-align:right}
.check td.p b{display:block;font-size:1rem}
.check td.p small{color:var(--muted);font-size:.8rem}
.check td.p:not(.bad):not(.low) b{color:var(--ok)}
.check td.p.low b{color:var(--muted)}
.check td.p.bad{background:var(--bad-bg)}
.check td.p.bad b,.check td.p.bad small{color:var(--bad)}
.check thead td{text-align:right}
.premium{margin-top:12px;padding-left:14px;border-left:3px solid var(--ok)}
.check td{white-space:nowrap}
.check td.num{font-weight:400}
@media (max-width:420px){.check th,.check td{padding:10px 12px}.check tbody th{min-width:150px}}
@media (max-width:820px){.checks{grid-template-columns:1fr}}
.check td.num small{display:block;font-size:.75rem}
.check table{min-width:800px}
.check thead th{text-align:right;font-weight:600;color:var(--muted);font-size:.8rem}.check thead th:first-child{text-align:left}.check thead th.ch{color:var(--ink);font-size:.9rem}