/* PenDF vs PenDF PRO comparison. Colours follow the shared --nox-* appearance palette. */
.cmp{--c-bg:var(--nox-bg,#080c16);--c-surface:var(--nox-surface,#151d2a);--c-raised:var(--nox-raised,#1d2738);--c-line:var(--nox-line,#ffffff22);--c-text:var(--nox-text,#f5f5fc);--c-muted:var(--nox-muted,#b6bfd2);--c-accent:var(--nox-action,#c7acf7);--c-on:var(--nox-onaction,#211334)}
.cmp-hero{padding:72px 0 48px;text-align:center}
.cmp-hero .logo{width:128px;height:128px;margin:0 auto 22px;display:block;filter:drop-shadow(0 12px 28px color-mix(in srgb,var(--c-accent) 45%,transparent))}
.cmp-hero h1{margin:14px auto 22px;max-width:820px}
.cmp-hero .lead{margin:0 auto}
.cmp-hero .actions{justify-content:center}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border:1px solid var(--c-line);border-radius:26px;padding:32px;background:var(--c-surface);overflow:hidden}
.plan.pro{border-color:var(--c-accent);background:linear-gradient(160deg,color-mix(in srgb,var(--c-accent) 16%,var(--c-surface)),var(--c-surface) 62%);box-shadow:0 18px 50px -24px var(--c-accent)}
.plan-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.plan-logo{position:relative;width:72px;height:72px;flex-shrink:0}
.plan-logo img{width:100%;height:100%;display:block;border-radius:18px}
.plan-logo b{position:absolute;right:-10px;bottom:-8px;background:var(--c-accent);color:var(--c-on);font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:999px;box-shadow:0 0 0 3px var(--c-surface)}
.plan h2{font-size:28px;margin:0;line-height:1.15}
.plan .price{margin:2px 0 0;font-size:14px;color:var(--c-muted)}
.badge{position:absolute;top:18px;right:18px;font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;background:var(--c-accent);color:var(--c-on);padding:5px 11px;border-radius:999px}
.plan>p{color:var(--c-muted)}
.plan ul{list-style:none;padding:0;margin:8px 0 26px;display:grid;gap:11px}
.plan li{display:flex;gap:11px;align-items:flex-start;color:var(--c-text);font-size:15.5px;line-height:1.45}
.plan li svg,.ck svg{flex-shrink:0;width:20px;height:20px;margin-top:1px}
.plan li.plus{color:var(--c-text);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.chips>span{border:1px solid var(--c-accent);color:var(--c-accent);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:650}
.plan .button{margin-top:auto;width:100%}
.promise{margin:30px 0 0;display:flex;gap:16px;align-items:center;border:1px solid var(--c-line);border-radius:18px;padding:18px 24px;background:var(--c-raised);color:var(--c-muted)}
.promise svg{width:28px;height:28px;flex-shrink:0;color:var(--c-accent)}
.promise strong{color:var(--c-text)}
.cmp-table{position:relative;border:1px solid var(--c-line);border-radius:24px;overflow:auto;background:var(--c-surface)}
.cmp-table table{min-width:640px;width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.cmp-table thead th{position:sticky;top:0;z-index:2;background:var(--c-raised);padding:20px;text-align:center;border-bottom:1px solid var(--c-line);font-size:15px}
.cmp-table thead th:first-child{text-align:left;width:46%}
.cmp-table thead th span.th{display:inline-flex;align-items:center;gap:10px;font-weight:750}
.cmp-table thead img{width:30px;height:30px;border-radius:8px}
.cmp-table thead th.pro{background:color-mix(in srgb,var(--c-accent) 22%,var(--c-raised));color:var(--c-text)}
.cmp-table tbody th,.cmp-table tbody td{padding:15px 20px;border-bottom:1px solid var(--c-line);text-align:center}
.cmp-table tbody th[scope=row]{text-align:left;font-weight:560}
.cmp-table tbody td.pro{background:color-mix(in srgb,var(--c-accent) 9%,transparent)}
.cmp-table tbody tr.grp th{background:transparent;text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);padding-top:26px;border-bottom:1px solid var(--c-accent)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table small{display:block;color:var(--c-muted);font-weight:400;font-size:13px;margin-top:2px}
.ck{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ck.yes{color:var(--ok,#83dca2)}
.ck.no{color:var(--c-muted);opacity:.7}
.ck.pro-yes{color:var(--c-accent)}
.up{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:0;counter-reset:u}
.up li{counter-increment:u;border:1px solid var(--c-line);border-radius:20px;padding:26px;background:var(--c-surface);color:var(--c-muted)}
.up li:before{content:counter(u);display:flex;width:38px;height:38px;border-radius:50%;background:var(--c-accent);color:var(--c-on);align-items:center;justify-content:center;font-weight:800;margin-bottom:14px}
.up li strong{display:block;color:var(--c-text);font-size:17px;margin-bottom:6px}
.cta{text-align:center;border-radius:28px;padding:44px 28px;background:linear-gradient(135deg,color-mix(in srgb,var(--c-accent) 24%,var(--c-surface)),var(--c-surface));border:1px solid var(--c-accent)}
.cta img{width:84px;height:84px;border-radius:22px;margin-bottom:12px}
.cta .actions{justify-content:center;margin-bottom:0}
@media(max-width:850px){.plans,.up{grid-template-columns:1fr}.cmp-hero{padding-top:44px}}
@media(max-width:540px){.plan{padding:24px}.badge{position:static;display:inline-block;margin-bottom:14px}.cmp-table tbody th,.cmp-table tbody td{padding:12px 12px}.promise{flex-direction:column;text-align:center}}