/*
Theme Name: PluginCompare
Description: Lean, fast theme for the Compare Engine plugin comparison site.
Version: 1.1.0
Author: PluginCompare
Requires PHP: 7.4
Text Domain: plugincompare
*/

:root{
	--paper:#ffffff;--mist:#eef2f6;--mist-2:#e3e9f0;--card:#ffffff;
	--ink:#16202c;--ink-2:#46515f;--ink-3:#6b7684;--rule:#d9e0e8;--rule-2:#c4cdd8;
	--cobalt:#2a44d6;--cobalt-2:#1f36b8;--cobalt-soft:#e8ecfc;--on-cobalt:#ffffff;
	--marker:#ffe45c;--marker-soft:#fff6c2;
	--yes:#18794e;--yes-bg:#e5f3eb;--no:#b54034;--no-bg:#fbebe8;--part:#9a6200;--part-bg:#fff1cf;--third:#4b5868;--third-bg:#eceff3;
	--r-s:4px;--r-m:8px;--r-l:14px;
	--max:1200px;--hh:64px;
	--font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
	--paper:#0f1a2b;--mist:#172438;--mist-2:#1e2d44;--card:#13203a;--ink:#edf1f7;--ink-2:#c2cbd8;--ink-3:#8f9bb0;--rule:#24344e;--rule-2:#30425f;
	--cobalt:#7d91ff;--cobalt-2:#9aabff;--cobalt-soft:#1d2a55;--on-cobalt:#0f1a2b;--marker:#f5d63d;--marker-soft:#3a3412;
	--yes:#5fcf97;--yes-bg:#123326;--no:#f08a7c;--no-bg:#3a1f1c;--part:#f2bd57;--part-bg:#3a2c10;--third:#aab5c4;--third-bg:#1e2a3d;color-scheme:dark}}
:root[data-theme=dark]{
	--paper:#0f1a2b;--mist:#172438;--mist-2:#1e2d44;--card:#13203a;--ink:#edf1f7;--ink-2:#c2cbd8;--ink-3:#8f9bb0;--rule:#24344e;--rule-2:#30425f;
	--cobalt:#7d91ff;--cobalt-2:#9aabff;--cobalt-soft:#1d2a55;--on-cobalt:#0f1a2b;--marker:#f5d63d;--marker-soft:#3a3412;
	--yes:#5fcf97;--yes-bg:#123326;--no:#f08a7c;--no-bg:#3a1f1c;--part:#f2bd57;--part-bg:#3a2c10;--third:#aab5c4;--third-bg:#1e2a3d;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 56px)}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,svg{max-width:100%;height:auto}
a{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,h4{line-height:1.08;margin:0 0 .5em;color:var(--ink);font-weight:800;font-stretch:118%;letter-spacing:-.015em}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.45rem,2.6vw,2rem)}
h3{font-size:1.1rem;font-stretch:105%;letter-spacing:-.005em}
h4{font-size:.95rem;font-stretch:100%;letter-spacing:0}
p{margin:0 0 1em}
button,input,select{font:inherit;color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--cobalt);color:#fff;padding:8px 12px;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.muted{color:var(--ink-3)}
.section{padding:72px 0}
.section-soft{background:var(--mist)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.sec-head h2{margin:0}
.sec-head p{color:var(--ink-3);margin:4px 0 0}
.sec-head>a{font-weight:600;white-space:nowrap}
.eyebrow{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--r-s);border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:650;font-size:.95rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--mist)}
.btn-primary{background:var(--cobalt);border-color:var(--cobalt);color:var(--on-cobalt)}
.btn-primary:hover{background:var(--cobalt-2);border-color:var(--cobalt-2)}
.btn-sm{padding:6px 12px;font-size:.86rem}

/* Header */
.hdr{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr-in{height:var(--hh);display:flex;align-items:center;gap:8px}
.brand{font-weight:800;font-stretch:125%;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;margin-right:20px;white-space:nowrap}
.brand span{color:var(--cobalt);margin:0 .06em;font-stretch:100%;font-weight:400}
.brand-mark{display:none}
.nav{display:flex;align-items:center;gap:2px}
.nav>a,.nav>button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;background:none;color:var(--ink-2);font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent;border-radius:0}
.nav>a:hover,.nav>button:hover,.nav>button[aria-expanded=true]{color:var(--ink);border-bottom-color:var(--ink)}
.nav .chev{font-size:.8em;transition:transform .15s}
.nav button[aria-expanded=true] .chev{transform:rotate(180deg)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.search-btn{display:flex;align-items:center;gap:10px;min-width:250px;padding:8px 10px 8px 12px;border-radius:var(--r-s);border:1.5px solid var(--rule-2);background:var(--paper);color:var(--ink-3);cursor:pointer;font-size:.92rem}
.search-btn:hover{border-color:var(--ink)}
.search-btn kbd{margin-left:auto;font:600 .75rem var(--font);background:var(--mist);border-radius:3px;padding:1px 7px;color:var(--ink-2)}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-s);border:0;background:none;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:var(--mist);color:var(--ink)}
.menu-btn{display:none}

/* Mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2px solid var(--ink);display:none}
.mega.open{display:block}
.mega-in{display:grid;grid-template-columns:1fr 320px;gap:48px;padding:28px 24px 32px}
.mega-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px}
.mega-group h4{color:var(--ink-3);margin:0 0 8px;font-size:.85rem;font-weight:600}
.mega-group ul{list-style:none;margin:0;padding:0}
.mega-link{display:flex;align-items:center;gap:12px;padding:8px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.mega-link:hover b{text-decoration:underline}
.mega-ic{width:34px;height:34px;display:grid;place-items:center;color:var(--cobalt);flex:none;border:1.5px solid var(--rule-2);border-radius:var(--r-s)}
.mega-ic .i{width:18px;height:18px}
.mega-link b{display:block;font-weight:700}
.mega-link small{color:var(--ink-3)}
.mega-side{border-left:1px solid var(--rule);padding-left:28px}
.mega-side h4{color:var(--ink-3);margin:0 0 8px;font-size:.85rem;font-weight:600}
.mega-side a{display:flex;justify-content:space-between;align-items:center;padding:7px 0;color:var(--ink);font-weight:600;font-size:.93rem;text-decoration:none;border-bottom:1px solid var(--rule)}
.mega-side a .i{display:none}
.mega-side a:hover{color:var(--cobalt)}
.mega-all{margin-top:16px;border-bottom:1.5px solid var(--ink)!important}

/* Mobile nav */
.mnav{position:fixed;inset:var(--hh) 0 0;background:var(--paper);z-index:90;overflow:auto;padding:16px 24px 40px;display:none}
.mnav.open{display:block}
.mnav a{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);color:var(--ink);font-weight:600;text-decoration:none}
.mnav h4{margin:22px 0 4px;color:var(--ink-3);font-size:.85rem;font-weight:600}

/* Search palette */
.pal{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;background:rgba(15,26,43,.5)}
.pal.open{display:flex}
.pal-box{width:100%;max-width:640px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-m);overflow:hidden}
.pal-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.pal-in input{flex:1;border:0;background:none;font-size:1.08rem;outline:none}
.pal-in .i{width:20px;height:20px;color:var(--ink-3)}
.pal-in kbd{font:600 .75rem var(--font);background:var(--mist);border-radius:3px;padding:1px 7px;color:var(--ink-2)}
.pal-res{max-height:60vh;overflow:auto;padding:6px}
.pal-grp{color:var(--ink-3);padding:10px 10px 4px;font-weight:600;font-size:.82rem}
.pal-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-s);color:var(--ink);text-decoration:none;cursor:pointer}
.pal-item[aria-selected=true],.pal-item:hover{background:var(--cobalt-soft)}
.pal-item .logo,.pal-item .mono{width:30px;height:30px;--s:30px;font-size:.78rem}
.pal-item b{font-weight:650}
.pal-item small{color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pal-empty{padding:28px;text-align:center;color:var(--ink-3)}
.pal-foot{display:flex;gap:18px;padding:10px 16px;border-top:1px solid var(--rule);font-size:.8rem;color:var(--ink-3)}

/* Logos */
.logo{border-radius:22%;object-fit:cover;background:var(--mist);flex:none;display:block}
.mono{width:var(--s);height:var(--s);display:grid;place-items:center;border-radius:22%;font-weight:800;font-stretch:112%;font-size:calc(var(--s) * .38);color:#fff;background:hsl(var(--h) 45% 38%);flex:none}

/* Hero */
.hero{padding:64px 0 56px;border-bottom:1px solid var(--rule)}
.hero-in{max-width:none}
.hero h1{max-width:13ch;margin-bottom:18px;font-size:clamp(2.6rem,6.4vw,5rem);line-height:.98;letter-spacing:-.025em;font-stretch:122%}
.hero h1 span{color:inherit}
.hero .lead{font-size:1.15rem;color:var(--ink-2);max-width:56ch;margin:0 0 32px}
.hero-pop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:22px;font-size:.93rem}
.hero-pop>span{color:var(--ink-3)}
.hero-pop a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--rule-2);padding:2px 0}
.hero-pop a:hover{border-color:var(--ink)}
.hero-facts{margin:28px 0 0;color:var(--ink-3);font-size:.95rem;max-width:70ch}
.hero-facts b{color:var(--ink);font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-s);background:var(--mist);color:var(--ink-2);font-weight:600;font-size:.85rem;text-decoration:none;border:0}
.chip:hover{background:var(--mist-2);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper)}
.trust{display:none}

/* Compare form: two fields split by a slash */
.cform{position:relative;display:grid;grid-template-columns:1fr 56px 1fr auto;align-items:stretch;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-m);max-width:980px}
.cform-inline{max-width:none}
.cfield{min-width:0}
.combo{position:relative;display:flex;align-items:center;height:100%}
.combo-ic{position:absolute;left:16px;color:var(--ink-3);pointer-events:none;display:flex}
.combo input[type=text]{width:100%;height:64px;padding:0 16px 0 44px;border:0;background:transparent;font-size:1.1rem;font-weight:600;outline:none}
.combo input[type=text]::placeholder{color:var(--ink-3);font-weight:500}
.combo:focus-within{background:var(--marker-soft)}
.cfield:first-child .combo:focus-within{border-radius:6px 0 0 6px}
.combo.has-logo .combo-ic{display:none}
.combo .sel-logo{position:absolute;left:12px;width:28px;height:28px;--s:28px;font-size:.7rem}
.combo-list{position:absolute;top:calc(100% + 10px);left:-2px;right:-2px;z-index:20;list-style:none;margin:0;padding:6px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-m);max-height:340px;overflow:auto;box-shadow:0 18px 40px -20px rgba(15,26,43,.45)}
.combo-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);cursor:pointer}
.combo-list li[aria-selected=true],.combo-list li:hover{background:var(--cobalt-soft)}
.combo-list li .logo,.combo-list li .mono{width:28px;height:28px;--s:28px;font-size:.7rem}
.combo-list li b{font-weight:650}
.combo-list li small{margin-left:auto;color:var(--ink-3);font-size:.8rem;white-space:nowrap}
.combo-list .grp{color:var(--ink-3);padding:8px 10px 4px;cursor:default;font-weight:600;font-size:.82rem}
.combo-list .grp:hover{background:none}
.combo-list .empty{color:var(--ink-3);cursor:default}
.cswap{position:relative;border:0;background:none;cursor:pointer;color:var(--cobalt);display:grid;place-items:center;overflow:hidden}
.cswap::before{content:"";position:absolute;top:-4px;bottom:-4px;left:50%;width:2px;background:var(--ink);transform:skewX(-18deg)}
.cswap .vs{font-size:0}
.cswap .i{position:relative;width:18px;height:18px;padding:3px;box-sizing:content-box;background:var(--paper);border-radius:50%;opacity:0;transition:opacity .15s}
.cswap:hover .i,.cswap:focus-visible .i{opacity:1}
.cgo{border-radius:0 5px 5px 0;margin:-2px -2px -2px 0;padding:0 30px;font-size:1.05rem;border-width:2px}
.cform-msg{grid-column:1/-1;margin:0;padding:8px 16px;font-size:.88rem;color:var(--part);border-top:1px solid var(--rule)}
.cform-msg:empty{display:none}

/* Category list */
.cats{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px}
.cat{position:relative;display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.cat h3{margin:0;font-size:1.3rem}
.cat p{margin:2px 0 0;color:var(--ink-3);font-size:.92rem}
.cat .arrow{margin-left:auto;color:var(--ink-3)}
.cat:hover h3{text-decoration:underline;text-underline-offset:4px}
.cat:hover .arrow{color:var(--cobalt)}

/* Plugin cards */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--card);border:1.5px solid var(--rule);border-radius:var(--r-m)}
.pcard:hover{border-color:var(--ink)}
.pcard-link{position:absolute;inset:0;z-index:1}
.pcard-head{display:flex;gap:12px;align-items:center}
.pcard h3{margin:0;font-size:1.1rem}
.pcard p{margin:0;color:var(--ink-2);font-size:.92rem}
.pcard .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;color:var(--ink-3)}
.pcard .meta span{display:inline-flex;align-items:center;gap:4px}
.pcard .r{color:var(--ink-2)}
.rank{position:absolute;top:14px;right:18px;font-weight:800;font-stretch:125%;font-size:1.6rem;line-height:1;color:var(--mist-2)}
.score{position:relative;height:4px;background:var(--mist);margin-top:auto}
.score span{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.score b{position:absolute;right:0;top:-20px;font-size:.78rem;color:var(--ink-3);font-weight:600}
.badge-ours{position:absolute;top:16px;right:16px;font-size:.75rem;font-weight:700;background:var(--marker);color:#16202c;padding:2px 8px;border-radius:3px}
.pcard.ours .rank{display:none}

/* Comparison list */
.vslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));column-gap:40px}
.vs-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink);font-weight:650;text-decoration:none}
.vs-item .logos{display:flex}
.vs-item .logos>*{width:30px;height:30px;--s:30px;font-size:.72rem;border:2px solid var(--paper)}
.section-soft .vs-item .logos>*{border-color:var(--mist)}
.vs-item .logos>*+*{margin-left:-8px}
.vs-item em{font-style:normal;color:var(--cobalt);font-weight:400;margin:0 .15em}
.vs-item .i{margin-left:auto;color:var(--ink-3)}
.vs-item:hover span:not(.logos){text-decoration:underline;text-underline-offset:3px}

/* Tabs */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--rule)}
.tabs button{border:0;border-bottom:3px solid transparent;background:none;padding:8px 12px;font-weight:650;cursor:pointer;color:var(--ink-3);margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--cobalt)}
.tabpanel[hidden]{display:none}

/* Method columns */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.step{padding-top:16px;border-top:2px solid var(--ink)}
.step p{color:var(--ink-2);margin:0;font-size:.96rem}

/* Newsletter */
.news{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding:32px;border-radius:var(--r-m);background:var(--ink);color:var(--paper)}
.news h2,.news p{color:var(--paper)}
.news form{display:flex;gap:8px}
.news input{flex:1;height:48px;border-radius:var(--r-s);border:0;padding:0 14px;color:#16202c}
.news .btn{height:48px;background:var(--marker);border-color:var(--marker);color:#16202c}

/* Breadcrumbs */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:.88rem;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule-2)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* Status marks */
.st{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;border-radius:3px;font-size:.84rem;font-weight:650;line-height:1.5;white-space:nowrap}
.st .i{width:14px;height:14px;stroke-width:2.6}
.st-yes{background:var(--yes-bg);color:var(--yes)}
.st-pro{background:var(--cobalt-soft);color:var(--cobalt)}
.st-addon{background:transparent;color:var(--cobalt);box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.st-partial{background:var(--part-bg);color:var(--part)}
.st-thirdparty{background:var(--third-bg);color:var(--third)}
.st-no{background:var(--no-bg);color:var(--no)}
.st-unknown{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.tier{font-size:.8rem;color:var(--ink-3);font-weight:600}

/* Page head */
.phead{padding:28px 0 36px;border-bottom:1px solid var(--rule)}
.phead .crumbs{margin-bottom:22px}
.phead h1{font-size:clamp(2rem,4.4vw,3.4rem)}
.p-hero{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.p-hero .logo,.p-hero .mono{width:96px;height:96px;--s:96px}
.p-hero h1{margin:0 0 6px}
.p-hero .short{color:var(--ink-2);margin:0 0 12px;max-width:68ch;font-size:1.05rem}
.p-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.p-cta{display:flex;flex-direction:column;gap:8px;min-width:210px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:28px;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.tile{padding:14px 16px 14px 0}
.tile+.tile{padding-left:16px;border-left:1px solid var(--rule)}
.tile span{display:block;font-size:.85rem;color:var(--ink-3);font-weight:600}
.tile b{font-size:1.45rem;font-weight:800;font-stretch:112%;letter-spacing:-.01em}
.tile small{display:block;color:var(--ink-3);font-size:.8rem}
.stars{position:relative;display:inline-block;font-size:.95rem;letter-spacing:1px;line-height:1}
.stars-bg{color:var(--rule-2)}
.stars-fg{position:absolute;inset:0;width:var(--r);overflow:hidden;color:#e0a100;white-space:nowrap}
.unverified,.verified{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;padding:3px 8px;border-radius:3px;font-weight:600}
.unverified{color:var(--part);background:var(--part-bg)}
.verified{color:var(--yes);background:var(--yes-bg)}
.banner{margin:28px 0 0;border-radius:var(--r-m);overflow:hidden;aspect-ratio:1544/500;background:var(--mist)}
.banner img{width:100%;height:100%;object-fit:cover;display:block}

/* Sub nav */
.subnav{position:sticky;top:var(--hh);z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav a{padding:12px 12px;color:var(--ink-3);font-weight:600;font-size:.92rem;white-space:nowrap;border-bottom:3px solid transparent;text-decoration:none;margin-bottom:-1px}
.subnav a.on,.subnav a:hover{color:var(--ink);border-color:var(--cobalt)}

/* Layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding:44px 0 72px}
.aside{display:flex;flex-direction:column;gap:16px}
.aside .box{position:sticky;top:calc(var(--hh) + 64px)}
.box{background:var(--card);border:1.5px solid var(--rule);border-radius:var(--r-m);padding:20px}
.box h3{font-size:1rem;margin-bottom:12px}
.block{margin-bottom:56px}
.prose{color:var(--ink-2);max-width:72ch}
.prose h2,.prose h3{margin-top:1.4em}
.kv{width:100%;border-collapse:collapse;font-size:.93rem}
.kv th,.kv td{text-align:left;padding:9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.kv th{color:var(--ink-3);font-weight:600;width:45%}
.kv tr:last-child th,.kv tr:last-child td{border:0}

/* Pros / cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pc li{display:flex;gap:8px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.pc .pros .i{color:var(--yes);margin-top:4px}
.pc .cons .i{color:var(--no);margin-top:4px}
.verdict-box{padding:16px 20px;border-left:4px solid var(--marker);background:var(--marker-soft);margin:16px 0}
.verdict-box b{color:var(--ink)}

/* Feature list (plugin page) */
.fgroup{border-top:2px solid var(--ink);margin-bottom:24px}
.fgroup>summary{list-style:none;display:flex;align-items:baseline;justify-content:space-between;padding:12px 0;font-weight:800;font-stretch:112%;font-size:1.08rem;cursor:pointer}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup>summary small{color:var(--ink-3);font-weight:600;font-stretch:100%;font-size:.88rem}
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--rule)}
.frow h4{margin:0;display:flex;align-items:center;gap:8px}
.frow .fdesc{color:var(--ink-3);font-size:.88rem;margin:2px 0 0}
.frow .fnote{color:var(--ink-2);font-size:.92rem;margin:8px 0 0}
.frow .fmeta{display:flex;gap:12px;align-items:center;margin-top:8px;font-size:.8rem;color:var(--ink-3)}
.fshot{display:block;margin-top:10px;width:220px;aspect-ratio:16/9;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--rule);background:var(--mist)}
.fshot img{width:100%;height:100%;object-fit:cover;display:block}
.only-has .frow[data-has="0"]{display:none}
.key-dot{font-size:.72rem;background:var(--marker);color:#16202c;padding:0 6px;border-radius:3px;font-weight:700}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:2px solid var(--ink)}
.plan{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule)}
.plan+.plan{padding-left:16px;border-left:1px solid var(--rule)}
.plan h4{margin:0 0 6px}
.plan b{font-size:1.6rem;font-weight:800;font-stretch:115%}
.plan small{color:var(--ink-3)}
.plan p{font-size:.86rem;color:var(--ink-3);margin:6px 0 0}
.note{font-size:.86rem;color:var(--ink-3)}

/* Spark / health */
.spark{width:100%;height:72px;display:block}
.spark .area{fill:var(--cobalt-soft);stroke:none}
.spark .line{fill:none;stroke:var(--cobalt);stroke-width:2;vector-effect:non-scaling-stroke}
.spark2 .area{fill:var(--mist-2)}
.spark2 .line{stroke:var(--ink)}
.bars{display:grid;gap:6px}
.bar{display:grid;grid-template-columns:40px 1fr 56px;gap:8px;align-items:center;font-size:.84rem;color:var(--ink-3)}
.bar i{display:block;height:8px;background:var(--mist)}
.bar i span{display:block;height:100%;background:var(--ink)}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq summary{font-weight:650;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cobalt);font-size:1.3rem;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:10px 0 0;color:var(--ink-2);max-width:72ch}

/* ===== Comparison page ===== */
.vs-title{margin:4px 0 26px}
.vs-title h1{margin:0 0 6px}
.vs-title p{color:var(--ink-3);margin:0}
.vs-hero{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.vs-card{padding:22px 0;display:flex;flex-direction:column;gap:12px}
.vs-card:last-child{padding-left:4px}
.vs-card .top{display:flex;gap:14px;align-items:center}
.vs-card .logo,.vs-card .mono{width:60px;height:60px;--s:60px}
.vs-card h2{margin:0 0 2px;font-size:1.6rem}
.vs-card h2 a{color:var(--ink);text-decoration:none}
.vs-card h2 a:hover{text-decoration:underline}
.vs-card .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:.84rem;color:var(--ink-3)}
.vs-card .facts b{display:block;color:var(--ink);font-size:1.05rem}
.vs-card .btns{display:flex;gap:8px;margin-top:auto}
.vs-mid{position:relative;display:grid;place-items:center}
.vs-mid::before{content:"";position:absolute;top:12px;bottom:12px;left:50%;width:3px;background:var(--cobalt);transform:skewX(-14deg)}
.vs-mid span{display:none}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px}
.quick h3{display:flex;align-items:center;gap:8px;font-size:1rem}
.quick h3 .logo,.quick h3 .mono{width:22px;height:22px;--s:22px;font-size:.6rem}
.quick ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:.95rem}
.diffline{margin:24px 0 0;padding:14px 18px;border-left:4px solid var(--marker);background:var(--marker-soft);color:var(--ink);font-size:.98rem;max-width:90ch}
.diffline .i{display:none}

.glance{display:grid;gap:14px}
.glance.box{border:0;padding:0;background:none}
.gl-row{display:grid;grid-template-columns:1fr 210px 1fr;gap:18px;align-items:center}
.gl-row .lbl{text-align:center;font-size:.88rem;color:var(--ink-3);font-weight:600}
.gl-bar{height:10px;background:var(--mist);display:flex}
.gl-a .gl-bar{justify-content:flex-end}
.gl-bar span{display:block;height:100%}
.gl-a .gl-bar span{background:var(--cobalt)}
.gl-b .gl-bar span{background:var(--ink)}
.gl-val{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.94rem}
.gl-a .gl-val{flex-direction:row-reverse}
.gl-val .gl-bar{flex:1}
.win{background:var(--marker);color:#16202c;padding:0 4px;border-radius:2px}

.ctable-wrap{position:relative;border-bottom:2px solid var(--ink)}
.chead{position:sticky;top:calc(var(--hh) + 45px);z-index:40;display:grid;grid-template-columns:minmax(0,1.1fr) 1fr 1fr;background:var(--paper);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.chead>div{display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:800;font-stretch:108%}
.chead>div:first-child{padding-left:0;color:var(--ink-3);font-weight:600;font-stretch:100%}
.chead .logo,.chead .mono{width:26px;height:26px;--s:26px;font-size:.62rem}
.ctools{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toggle{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font-size:.92rem;font-weight:600;cursor:pointer;color:var(--ink-2)}
.toggle input{accent-color:var(--cobalt);width:16px;height:16px}
button.toggle{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.cgroup>summary{list-style:none;display:grid;grid-template-columns:minmax(0,1.1fr) 1fr 1fr;padding:12px 0 8px;cursor:pointer;font-weight:800;font-stretch:112%;border-top:1px solid var(--rule-2);background:var(--mist);margin:0 -12px;padding-left:12px;padding-right:12px}
.cgroup>summary::-webkit-details-marker{display:none}
.cgroup>summary span{font-weight:600;font-stretch:100%;color:var(--ink-3);font-size:.88rem;padding-left:16px}
.crow{display:grid;grid-template-columns:minmax(0,1.1fr) 1fr 1fr;border-top:1px solid var(--rule)}
.crow>div{padding:14px 16px;min-width:0}
.crow>div:first-child{padding-left:0}
.crow .fn{font-weight:650}
.crow .fn small{display:block;font-weight:400;color:var(--ink-3);font-size:.85rem;margin-top:2px}
.crow .cell .fnote{margin:6px 0 0;font-size:.88rem;color:var(--ink-2)}
.crow .cell .fshot{width:100%;max-width:240px;margin-top:8px}
.crow.d-a .ca,.crow.d-b .cb{background:linear-gradient(transparent 6%,var(--marker-soft) 6%,var(--marker-soft) 94%,transparent 94%)}
.crow.d-a .ca .st,.crow.d-b .cb .st{box-shadow:0 0 0 2px var(--marker)}
.diff-only .crow:not(.d-a):not(.d-b):not(.d-value){display:none}
.key-only .crow:not([data-key="1"]){display:none}
.crow .mlabel{display:none}

.sumbox{border-top:2px solid var(--ink);padding-top:20px}
.sumbox .tldr{font-size:1.15rem;color:var(--ink);line-height:1.6;max-width:72ch}
.sum-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.85rem;color:var(--ink-3);margin-bottom:12px}
.ai-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--cobalt)}
.diffs{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:18px 0}
.diffs div{padding:12px 0;border-top:1px solid var(--rule)}
.diffs b{display:block;margin-bottom:2px}
.diffs p{margin:0;font-size:.93rem;color:var(--ink-2)}
.sources{font-size:.85rem;color:var(--ink-3)}
.sources ol{padding-left:18px;margin:6px 0 0}

.poll{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}
.poll button{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:14px 16px;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--paper);cursor:pointer;font-weight:700;text-align:left}
.poll button:hover{background:var(--mist)}
.poll button .fill{position:absolute;inset:0 auto 0 0;background:var(--marker-soft);width:0;transition:width .5s ease;z-index:0}
.poll button>*:not(.fill){position:relative;z-index:1}
.poll button .pct{margin-left:auto;font-weight:800;font-stretch:115%}
.poll.voted button{cursor:default}

/* Category page */
.cat-hero{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.cat-hero .mega-ic{width:64px;height:64px;border-width:2px;border-color:var(--ink);color:var(--ink)}
.cat-hero .mega-ic .i{width:30px;height:30px}
.ffilter{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}
.ffilter label{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1.5px solid var(--rule-2);border-radius:var(--r-s);font-size:.88rem;font-weight:600;cursor:pointer;background:var(--paper)}
.ffilter input{accent-color:var(--cobalt)}
.ffilter label:has(input:checked){border-color:var(--ink);background:var(--marker-soft)}
.ranked{display:grid;border-top:2px solid var(--ink)}
.rcard{display:grid;grid-template-columns:52px auto 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.rcard .num{font-weight:800;font-stretch:125%;font-size:1.9rem;color:var(--ink);text-align:left;line-height:1}
.rcard .logo,.rcard .mono{width:56px;height:56px;--s:56px}
.rcard h3{margin:0 0 4px;font-size:1.2rem}
.rcard h3 a{color:var(--ink);text-decoration:none}
.rcard h3 a:hover{text-decoration:underline}
.rcard p{margin:0;color:var(--ink-2);font-size:.94rem}
.rcard .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;color:var(--ink-3);margin-top:6px}
.rcard .rs{text-align:right;display:grid;justify-items:end;gap:2px}
.rcard .rs b{font-size:1.9rem;font-weight:800;font-stretch:120%;line-height:1}
.rcard .rs small{color:var(--ink-3)}
.rcard .rs .btn{margin-top:6px}
.rcard[hidden]{display:none}

.matrix-wrap{overflow:auto;border-top:2px solid var(--ink);max-height:80vh}
.matrix{border-collapse:separate;border-spacing:0;font-size:.88rem;min-width:100%}
.matrix th,.matrix td{padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--paper)}
.matrix thead th{position:sticky;top:0;z-index:2;font-weight:700;text-align:center;border-bottom:1px solid var(--ink)}
.matrix thead th a{color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.matrix thead th .logo,.matrix thead th .mono{width:32px;height:32px;--s:32px;font-size:.7rem}
.matrix th:first-child,.matrix td:first-child{position:sticky;left:0;z-index:1;text-align:left;font-weight:600;padding-left:0}
.matrix thead th:first-child{z-index:3}
.matrix td{text-align:center}
.matrix .g td{background:var(--mist);font-weight:800;font-stretch:112%;color:var(--ink);padding-left:8px}
.mx{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:3px}
.mx .i{width:15px;height:15px;stroke-width:2.6}

/* Footer */
.ftr{border-top:2px solid var(--ink);padding:56px 0 32px;font-size:.93rem}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr h4{color:var(--ink-3);font-size:.88rem;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{color:var(--ink);text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr p{color:var(--ink-3);max-width:36ch}
.ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:40px;padding-top:20px;color:var(--ink-3);font-size:.84rem}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:400;background:rgba(10,16,28,.9);display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb-in{display:flex;gap:16px;max-width:1400px;width:100%;justify-content:center}
.lb figure{margin:0;flex:1;max-width:900px}
.lb img{width:100%;max-height:80vh;object-fit:contain;background:#0a101c}
.lb figcaption{color:#d6dde8;font-size:.9rem;margin-top:8px}
.lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;background:#fff;color:#16202c;cursor:pointer;font-size:1.4rem;border-radius:var(--r-s)}

/* Generic content */
.page-head{padding:48px 0 24px}
.content{max-width:72ch;padding-bottom:72px}
.empty-state{padding:32px;border:1.5px dashed var(--rule-2);color:var(--ink-3)}

/* Responsive */
@media (max-width:1080px){
	.search-btn{min-width:0}.search-btn span,.search-btn kbd{display:none}
	.layout{grid-template-columns:1fr}.aside .box{position:static}
	.mega-in{grid-template-columns:1fr}.mega-side{border:0;padding:0}
}
@media (max-width:860px){
	.nav,.hdr-cta{display:none}.menu-btn{display:grid}
	.cform{grid-template-columns:1fr}
	.cswap{height:22px}.cswap::before{top:10px;bottom:auto;left:0;right:0;width:auto;height:2px;transform:none}
	.cgo{border-radius:0 0 5px 5px;margin:0 -2px -2px;height:56px}
	.cats{grid-template-columns:1fr}
	.steps,.pc,.quick,.diffs,.news,.poll{grid-template-columns:1fr}
	.p-hero{grid-template-columns:auto 1fr}.p-cta{grid-column:1/-1;flex-direction:row}
	.p-hero .logo,.p-hero .mono{width:64px;height:64px;--s:64px}
	.vs-hero{grid-template-columns:1fr}.vs-mid{height:28px}.vs-mid::before{top:13px;bottom:auto;left:0;right:0;width:auto;height:3px;transform:none}
	.vs-card:last-child{padding-left:0}
	.gl-row{grid-template-columns:1fr 1fr}.gl-row .lbl{grid-column:1/-1;order:-1;text-align:left}
	.chead,.crow,.cgroup>summary{grid-template-columns:1fr 1fr}
	.chead>div:first-child,.cgroup>summary>b+span{display:none}
	.cgroup>summary{grid-template-columns:1fr}
	.crow .fn{grid-column:1/-1;padding:10px 0 0}
	.crow>div:nth-child(2){padding-left:0}
	.crow .mlabel{display:block;font-size:.78rem;color:var(--ink-3);font-weight:600;margin-bottom:4px}
	.rcard{grid-template-columns:auto 1fr}.rcard .num{display:none}.rcard .rs{grid-column:1/-1;justify-items:start;display:flex;gap:12px;align-items:baseline}
	.tile+.tile{border-left:0;padding-left:0}.tile{border-bottom:1px solid var(--rule)}
	.plan+.plan{border-left:0;padding-left:0}
	.ftr-grid{grid-template-columns:1fr 1fr}
	.section{padding:52px 0}
	.lb-in{flex-direction:column}
}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr}.tiles{grid-template-columns:1fr 1fr}.hero{padding:40px 0}.wrap{padding:0 18px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}