/* ===== comparison ===== */
.cmp .h2 em{font-style:normal;color:var(--green-deep)}
.cmp-score{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:56px 0 28px}
.cs{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;gap:8px}
.cs span{font-weight:700;font-size:15.5px;color:var(--muted);text-align:start}
.cs b{font-size:26px;font-weight:900;line-height:1.2;color:var(--ink)}.cs b small{font-size:14px;font-weight:600;color:var(--muted)}
.cs-bar{height:8px;border-radius:8px;background:var(--mist);overflow:hidden}
.cs-bar i{display:block;height:100%;border-radius:8px;background:#B8C4BE;transform-origin:right center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.cs-ako{border-color:var(--green);box-shadow:0 16px 36px rgba(0,138,82,.12)}.cs-ako span{color:var(--green-deep)}.cs-ako .cs-bar i{background:var(--green)}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:24px;border:1px solid var(--line);background:#fff}
.cmp-scroll:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.cmp-table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:15px}
.cmp-table th,.cmp-table td{padding:16px 14px;text-align:center;vertical-align:middle;border-bottom:1px solid #EEF2F0}
.cmp-table thead th{font-size:16px;font-weight:800;color:var(--ink);padding-top:26px;background:#fff;position:relative}
.cmp-table .cf{text-align:start;width:30%;position:sticky;right:0;background:#fff;z-index:1}
.cmp-table tbody .cf b{display:block;font-weight:700;color:var(--ink)}
.cmp-table tbody .cf small{display:block;font-size:13.5px;font-weight:400;color:var(--muted);line-height:1.6;margin-top:2px}
.cmp-table tr.grp th{background:var(--mist);text-align:start;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--green-deep);padding:9px 14px}
.cmp-table tr.grp th{position:sticky;right:0}
.cmp-table .ako{background:#F1FBF6}
.cmp-table thead .ako{background:#F1FBF6;color:var(--green-deep);border-top:4px solid var(--green)}
.cmp-pick{position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);background:var(--green);color:#fff;font-size:11.5px;font-weight:800;padding:2px 10px;border-radius:20px;white-space:nowrap}
.cmp-logo{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-inline-end:6px;color:var(--green)}
.cmp-logo svg{width:100%;height:100%}
.cmp-table tbody tr:last-child td,.cmp-table tbody tr:last-child th{border-bottom:0}
.mk{display:block;width:28px;height:28px;margin:0 auto}
.mk svg{width:100%;height:100%;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.st-yes .mk circle{fill:var(--green);stroke:none}.st-yes .mk path{stroke:#fff}
.st-part .mk circle{fill:#FDF1DC;stroke:none}.st-part .mk path{stroke:var(--amber)}
.st-no .mk circle{fill:#F1F3F2;stroke:none}.st-no .mk path{stroke:#A9B4AF}
.cmp-table td small{display:block;font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:6px}
.cmp-table td.ako small{color:var(--green-deep);font-weight:700}
.cmp-note{font-size:13.5px;color:var(--muted);margin-top:16px;text-align:center}
/* entrance animation (only when JS armed it) */
.cmp.armed .cs-bar i{transform:scaleX(0)}
.cmp.armed .mk{transform:scale(.4);opacity:0}
.cmp.armed.in .cs-bar i{transform:scaleX(1)}
.cmp.armed.in .mk{transform:none;opacity:1;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.cmp.armed.in .st-yes .mk path{stroke-dasharray:20;stroke-dashoffset:20;animation:cmpDraw .5s .35s forwards}
.cmp.armed.in tbody tr:nth-child(2n) .mk{transition-delay:.08s}.cmp.armed.in tbody tr:nth-child(3n) .mk{transition-delay:.16s}
.cmp.armed.in tbody tr:nth-child(4n) .mk{transition-delay:.24s}.cmp.armed.in tbody tr:nth-child(5n) .mk{transition-delay:.32s}
@keyframes cmpDraw{to{stroke-dashoffset:0}}
@media(max-width:860px){.cmp-score{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}}
@media(max-width:560px){.cmp-table{min-width:640px;font-size:14px}.cmp-table .cf{width:38%}.cs{padding:12px 14px}.cs b{font-size:22px}}
@media(prefers-reduced-motion:reduce){.cs-bar i,.mk{transition:none!important;animation:none!important}}
.cmp-pick{position:static;transform:none;display:table;margin:0 auto 6px}
.cmp-table thead th{padding-top:18px}
.cmp .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cmp:not(.mist) .cmp-score{margin-top:0}
.cmp-hint{display:none;font-size:13px;color:var(--muted);margin:0 0 8px;text-align:start}
@media(max-width:800px){.cmp-hint{display:block}}