/* GameDev AI Tools: dark design system. Tokens -> base -> layout -> components (card, badge, chip) -> page sections. */
:root{--bg:#0b0d14;--bg2:#10131c;--panel:#141824;--panel2:#1a1f2e;--text:#eef0f6;--muted:#9aa3b8;--dim:#8089a0;--line:#232a3b;--line2:#2f3850;--accent:#8b5cf6;--accent2:#22d3ee;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444;--unk:#64748b;--r:14px;--sh:0 10px 30px -12px rgba(0,0,0,.6);--hdr:62px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;background-image:radial-gradient(900px 500px at 85% -10%,rgba(139,92,246,.14),transparent 60%),radial-gradient(700px 400px at -10% 10%,rgba(34,211,238,.08),transparent 60%);background-repeat:no-repeat}
a{color:#b9a5ff;text-underline-offset:3px}
a:hover{color:#d6cbff}
img{max-width:100%}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
[hidden]{display:none!important}
.nsv{color:var(--muted);font-style:italic}
.note{color:var(--dim);font-size:.85rem}
/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(11,13,20,.85);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--hdr);flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--text);text-decoration:none;font-size:1.02rem;letter-spacing:-.01em}
.logo b{font-weight:800;background:linear-gradient(90deg,#c4b5fd,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-header nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.site-header nav a{color:var(--muted);text-decoration:none;font-size:.92rem;padding:7px 11px;border-radius:9px;transition:color .15s,background .15s}
.site-header nav a:hover{color:var(--text);background:var(--panel)}
.site-header nav a.nav-cta{color:#fff;background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:inset 0 1px 0 rgba(255,255,255,.15);margin-left:6px}
.site-header nav a.nav-cta:hover{filter:brightness(1.12)}
main.wrap{padding-bottom:20px}
/* sponsor strip (only rendered when a paid sponsor is active) */
.sponsor-strip{border-bottom:1px solid var(--line);background:rgba(16,19,28,.6);font-size:.82rem;color:var(--dim)}
.sponsor-strip .wrap{display:flex;align-items:center;gap:10px;min-height:32px;flex-wrap:wrap}
.sponsor-strip a{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.sponsor-strip a:hover{color:var(--text)}
.sponsor-strip img{border-radius:4px}
.sp-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line2);border-radius:999px;padding:1px 8px;color:var(--dim)}
/* sponsor card (shared card component; empty slot or active paid sponsor) */
.tlogo.sp-ph{display:inline-grid;place-items:center;width:44px;height:44px;border:1px dashed rgba(139,92,246,.6);background:rgba(139,92,246,.1);color:#a78bfa;font-size:1.35rem;font-weight:600;line-height:1}
.sp-tag{text-transform:uppercase;letter-spacing:.07em;font-size:.68rem;font-weight:600;color:var(--dim)}

/* ===== Components ===== */
/* Badge: small status label. Tones: ok (green), warn (amber), bad (red), unk (grey), info (cyan), accent (purple), neutral */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:500;line-height:1.5;border-radius:999px;padding:2px 10px;background:#232a3b;color:var(--text);border:1px solid transparent;white-space:nowrap}
.badge.b-ok{background:rgba(16,185,129,.14);color:#6ee7b7;border-color:rgba(16,185,129,.3)}
.badge.b-warn{background:rgba(245,158,11,.14);color:#fcd34d;border-color:rgba(245,158,11,.3)}
.badge.b-bad{background:rgba(239,68,68,.14);color:#fca5a5;border-color:rgba(239,68,68,.3)}
.badge.b-unk{background:rgba(100,116,139,.18);color:#cbd5e1;border-color:rgba(100,116,139,.35)}
.badge.b-info{background:rgba(34,211,238,.12);color:#67e8f9;border-color:rgba(34,211,238,.3)}
.badge.b-accent{background:rgba(139,92,246,.16);color:#c4b5fd;border-color:rgba(139,92,246,.4);font-weight:600}
.badge.b-neutral{background:rgba(255,255,255,.06);color:#cbd5e1;border-color:var(--line2)}
.badge.b-lg{font-size:.85rem;padding:4px 12px}
.badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Chip: pill-shaped tag, link or filter button, optional logo */
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:.78rem;line-height:1.4;color:#cfd5e3;text-decoration:none;border:1px solid var(--line2);background:rgba(255,255,255,.03);padding:3px 10px;border-radius:999px;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.chip .tlogo{border-radius:5px;border:0}
.chip.has-logo{padding-left:4px}
a.chip:hover,button.chip:hover{border-color:var(--accent);color:#fff;background:rgba(139,92,246,.15)}
button.chip{cursor:pointer;font-size:.85rem;padding:5px 13px}
.chip[aria-pressed=true],.chip.is-active{border-color:var(--accent);background:rgba(139,92,246,.22);color:#fff}
.chip.c-muted{color:var(--muted)}
/* Card: panel with hover lift. .card-link makes the whole card clickable; nested links/chips sit above it. */
.card{position:relative;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card.is-link{transition:transform .18s,border-color .18s,box-shadow .18s}
.card.is-link:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.55);box-shadow:0 16px 36px -16px rgba(139,92,246,.4)}
.card h3{margin:0;font-size:1.08rem;line-height:1.3}
.card h3 a,.card-link{color:var(--text);text-decoration:none}
.card-link:after{content:"";position:absolute;inset:0;border-radius:var(--r);z-index:1}
.card .above{position:relative;z-index:2}
.card-media{margin:-18px -18px 2px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:16/7;background:var(--bg2)}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card.is-link:hover .card-media img{transform:scale(1.04)}
.kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#a78bfa;font-weight:600}
.card-desc{margin:0;color:var(--muted);font-size:.9rem}
.card-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.card-top{display:flex;align-items:center;gap:12px}
.card-title{flex:1;min-width:0}
.card-sub{display:block;font-size:.8rem;color:var(--muted)}
.arrow{color:var(--dim);transition:transform .18s,color .18s}
.card.is-link:hover .arrow{color:var(--accent2);transform:translateX(3px)}
.summary{margin:0;color:var(--muted);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.compact .summary{-webkit-line-clamp:2}
.verdict{margin:0;color:#dfe3ee;font-size:.88rem;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);border-radius:10px;padding:8px 10px}
.verdict strong{color:#c4b5fd;font-weight:600}
.card-note{margin:0;font-size:.85rem;color:#dfe3ee;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.card-note time{color:var(--muted)}
.note-title{margin:-4px 0 0;font-size:.88rem;font-weight:600;color:#dfe3ee}
.news-meta{margin:0;font-size:.8rem;color:var(--muted)}
.tlogo{flex:0 0 auto;border-radius:11px;background:#fff1;object-fit:contain;border:1px solid var(--line2)}
.tlogo.mono{display:inline-grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 70% 45%),hsl(calc(var(--h) + 50) 70% 35%))}
.chip .tlogo.mono{font-size:.55rem}
/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;margin:18px 0 28px}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.card[hidden]{display:none}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.95rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 20px -10px rgba(124,58,237,.8);transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.12);color:#fff;transform:translateY(-1px)}

/* ===== Sections ===== */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:44px 0 14px;flex-wrap:wrap}
.sec-head h2{margin:0;font-size:1.5rem}
.sec-head a{font-size:.9rem;text-decoration:none}
.sec-head p{margin:0;color:var(--muted);font-size:.92rem}
.sub-h{font-size:1.25rem;margin:30px 0 0}
.crumbs{color:var(--dim);font-size:.85rem;margin:22px 0 14px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--text)}
.page-h{font-size:clamp(1.8rem,4vw,2.5rem);margin:30px 0 6px}
.page-sub{color:var(--muted);margin:0;max-width:820px}
main.wrap>h1{font-size:clamp(1.8rem,4vw,2.4rem);margin:30px 0 12px}
main.wrap>p,main.wrap>ul{color:#c9cfdd;max-width:760px}
/* hero (home) */
.hero{position:relative;margin:22px 0 6px;border-radius:22px;border:1px solid var(--line2);background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(34,211,238,.04) 60%,rgba(11,13,20,0)),#0d0f18;box-shadow:var(--sh);padding:40px 44px 34px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:.8rem;color:#c9cfdd;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:4px 12px;border-radius:999px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.hero h1{font-size:clamp(1.9rem,4.4vw,3.1rem);margin:0 0 12px;font-weight:800;letter-spacing:-.035em;max-width:900px}
.grad{background:linear-gradient(92deg,#c4b5fd 0%,#a78bfa 35%,#67e8f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:#b8c0d2;font-size:1.08rem;max-width:700px;margin:0 0 20px}
.searchbar{display:flex;align-items:center;gap:10px;max-width:600px;background:rgba(20,24,36,.9);border:1px solid var(--line2);border-radius:14px;padding:4px 6px 4px 16px;color:var(--dim);transition:border-color .15s,box-shadow .15s}
.searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.2)}
.searchbar input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:1.02rem;padding:11px 4px}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 0;font-size:.85rem;color:var(--dim)}
/* category tiles: 12 categories -> 4 per row desktop, 3 tablet, 2 mobile (no orphan row) */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);text-decoration:none;color:var(--text);background:var(--panel);isolation:isolate;transition:transform .2s,border-color .2s,box-shadow .2s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.tile:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,13,20,0) 30%,rgba(11,13,20,.92) 100%)}
.tile-body{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column}
.tile-body strong{font-size:1rem;letter-spacing:-.01em}
.tile-body span{font-size:.8rem;color:#b8c0d2}
.tile:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.6);box-shadow:0 14px 34px -14px rgba(139,92,246,.45);color:#fff}
.tile:hover img{transform:scale(1.06)}
.tiles.big{margin:20px 0 40px}
.tiles.big .tile{aspect-ratio:4/3}
/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:10px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.filters select,.filters button{appearance:none;-webkit-appearance:none;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--text);border:1px solid var(--line2);border-radius:10px;padding:9px 32px 9px 12px;font:inherit;font-size:.9rem;cursor:pointer;flex:1 1 170px;transition:border-color .15s}
.filters select:hover,.filters button:hover{border-color:var(--accent)}
.filters button{flex:0 0 auto;background-image:none;padding:9px 16px;color:var(--muted)}
.hint{color:var(--dim);font-size:.82rem;margin:10px 2px 0}
.chip-filters{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px}
.chip-filters .chips{gap:8px}
.chip-filters .cf-label{font-size:.8rem;color:var(--dim);min-width:56px}
/* how */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.how-grid p{margin:0;color:var(--muted);font-size:.92rem}
/* newsletter */
.newsletter{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(34,211,238,.08));border:1px solid var(--line2);border-radius:18px;padding:28px;margin:40px 0}
.newsletter h2{margin:0 0 6px;font-size:1.35rem}
.newsletter p{color:var(--muted);margin:0 0 16px;max-width:640px}
.newsletter form{display:flex;gap:8px;flex-wrap:wrap;max-width:520px}
.newsletter input{flex:1 1 220px;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:rgba(11,13,20,.7);color:var(--dim);font:inherit}
.newsletter button{padding:11px 18px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);color:var(--dim);font:inherit}
.newsletter input:not([disabled]){color:var(--text)}
/* tool page */
.tool{margin-bottom:10px}
.tool-head{display:flex;gap:20px;align-items:flex-start;padding:24px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:18px}
.tool-head .tlogo{border-radius:16px}
.tool-head h1{margin:0 0 8px;font-size:clamp(1.8rem,4vw,2.4rem)}
.tool .lead{font-size:1.06rem;color:#b8c0d2;margin:0 0 16px;max-width:760px}
.tool-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.aff-note{display:block;flex-basis:100%;color:var(--dim);font-size:.8rem}
.qa{margin:16px 0;border-color:var(--line2);border-left:3px solid var(--accent2);gap:8px}
.qa h2{margin:0;font-size:1.15rem}
.qa-a{margin:0;font-size:1.02rem;color:#eef0f6;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qa-terms{margin:0;font-size:.88rem;color:var(--muted)}
.verdict.big{font-size:1rem;margin:16px 0;padding:14px 16px;border-left:3px solid var(--accent)}
.facts{display:grid;grid-template-columns:170px 1fr;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:16px 0}
.facts dt,.facts dd{padding:14px 18px;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-weight:600;font-size:.9rem}
.facts dd{margin:0;word-break:break-word;color:#dfe3ee}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
.facts small{color:var(--dim)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:12px 0}
.media-grid figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.media-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.media-grid figcaption{padding:8px 12px;font-size:.82rem;color:var(--muted)}
.cmp-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-10px 0 20px;font-size:.85rem;color:var(--muted)}
/* category page */
.cat-hero{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center;padding:16px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:18px}
.cat-hero img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
.cat-hero h1{margin:0 0 8px;font-size:clamp(1.6rem,3.6vw,2.3rem)}
.cat-hero p{margin:0;color:var(--muted)}
.table-wrap{overflow-x:auto;margin:22px 0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.cmp{width:100%;border-collapse:collapse;font-size:.92rem}
.cmp th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;background:var(--bg2)}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:11px 16px;text-align:left}
.cmp tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:rgba(139,92,246,.06)}
.cmp-tool{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:600}
.cmp-tool .tlogo{border-radius:6px;font-size:.6rem}
/* guides */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0;padding:0;overflow:hidden;margin:22px 0 8px}
.feature .card-media{margin:0;border-radius:0;aspect-ratio:auto;min-height:100%}
.feature-body{padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.feature-body h2{margin:0;font-size:1.5rem}
.outcome{margin:0;color:#c9cfdd}
.outcome b{color:var(--muted);font-weight:600}
.guide{max-width:860px}
.guide .lead{font-size:1.06rem;color:#b8c0d2}
.g-summary{margin:20px 0;gap:14px;border-color:var(--line2)}
.g-summary h2{margin:0;font-size:1.1rem}
.g-summary dl{display:grid;grid-template-columns:170px 1fr;gap:10px 16px;margin:0}
.g-summary dt{color:var(--muted);font-weight:600;font-size:.9rem}
.g-summary dd{margin:0;color:#dfe3ee}
.cost-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.cost-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.9rem}
.cost-list .tname{font-weight:600;color:var(--text);text-decoration:none}
.steps{counter-reset:st;list-style:none;padding:0;margin:24px 0;position:relative}
.steps:before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:linear-gradient(180deg,#7c3aed,#0891b2);opacity:.6;border-radius:2px}
.step{counter-increment:st;position:relative;padding-left:56px;margin:0 0 14px}
.step:before{content:counter(st);position:absolute;left:0;top:14px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#fff;background:linear-gradient(135deg,#7c3aed,#0891b2);box-shadow:0 0 0 5px var(--bg)}
.step .card{gap:8px}
.step h2{font-size:1.08rem;margin:0}
.step ul,.disc ul{margin:0;padding-left:18px;color:#c9cfdd}
.step li li,.step ul li,.disc li{margin:6px 0}
.step-k{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:600}
.disc{margin:14px 0}
.disc h2{font-size:1.15rem;margin:0}
.src{font-size:.78rem;color:var(--muted);margin-left:2px;white-space:nowrap}
.src:before{content:"↗ "}
/* compare */
.vs-logos{display:flex;align-items:center;gap:14px}
.vs-logos em{color:var(--dim);font-style:normal;font-size:.85rem;font-weight:600}
.card.vs h3{font-size:1.05rem}
.cmp-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.cmp-groups .sec-head{margin:30px 0 12px}.cmp-groups .sec-head h2{font-size:1.2rem}
.cmp-groups .grid{margin:0 0 8px}
.bottom-line{margin:18px 0;border-left:3px solid var(--accent2);gap:8px}
.bottom-line h2{margin:0;font-size:1.15rem}
.bottom-line ul{margin:0;padding-left:18px;color:#dfe3ee}
.bottom-line li{margin:6px 0}
.vs-grid{margin:20px 0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.vs-row{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.vs-row:last-child{border-bottom:0}
.vs-row>*{padding:12px 16px;min-width:0;overflow-wrap:anywhere;font-size:.92rem}
.vs-row>[role=cell]+[role=cell]{border-left:1px solid var(--line)}
.vs-label{color:var(--muted);font-weight:600;font-size:.85rem!important;background:var(--bg2)}
.vs-head{position:sticky;top:var(--hdr);z-index:5;background:rgba(20,24,36,.97);backdrop-filter:blur(8px);border-radius:var(--r) var(--r) 0 0;border-bottom:1px solid var(--line2)}
.vs-head .vs-label{background:transparent}
.vs-tool{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.vs-tool .cmp-tool{font-size:1.02rem}
.vs-row .badge,.facts .badge{white-space:normal}
/* new */
.week-h{font-size:1.2rem;margin:34px 0 12px;display:flex;align-items:baseline;gap:10px}
.week-h small{font-size:.82rem;color:var(--dim);font-weight:400}
.news-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);padding:0;overflow:hidden;margin-bottom:16px}
.news-top .card-media{margin:0;border-radius:0;aspect-ratio:auto;min-height:100%}
.news-top .feature-body h3{font-size:1.4rem}
.news-text{margin:0;color:#c9cfdd;font-size:.95rem}
.why{margin:0;font-size:.88rem;color:#dfe3ee}
.why b{color:#67e8f9;font-weight:600}
.news-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
/* forms */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
form.submit{display:grid;gap:14px;max-width:660px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:24px;margin:20px 0 30px}
form.submit label{display:grid;gap:6px;color:#c9cfdd;font-size:.92rem;font-weight:500}
form.submit input,form.submit select,form.submit textarea{background:var(--bg);color:var(--text);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;font:inherit;font-weight:400;transition:border-color .15s,box-shadow .15s}
form.submit input:focus,form.submit select:focus,form.submit textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.2)}
form.submit small{font-size:.8rem;color:var(--dim);font-weight:400}
form.submit button,.newsletter button:not([disabled]){background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border:0;border-radius:10px;padding:12px 18px;font:inherit;font-weight:600;cursor:pointer;justify-self:start}
form.submit button:hover,.newsletter button:not([disabled]):hover{filter:brightness(1.12)}
/* misc pages */
.offer{font-size:1.15rem;max-width:640px;margin:0}
.empty-state{padding:20px;border:1px dashed var(--line2);border-radius:var(--r);color:var(--muted)}
.deals code,.snippet{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sheet td:nth-child(4){min-width:280px;font-size:.88rem;color:var(--muted)}
.sheet-summary a{white-space:nowrap}
.badge-demo{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}
.bd{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px;border-radius:var(--r);border:1px solid var(--line2)}
.bd.light{background:#f4f5f8;color:#5b6478}
.bd span{font-size:.8rem}
.badge-pick select{margin-left:8px;padding:8px 10px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:inherit}
.snippet{width:100%;max-width:760px;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);background:rgba(11,13,20,.7);color:var(--text);font-size:.85rem}
.paid-thanks{border:1px solid rgba(16,185,129,.45);background:rgba(16,185,129,.1);border-radius:var(--r);padding:14px 18px;margin:0 0 16px;max-width:640px}
.paid-thanks p{margin:0}
.prose{max-width:780px}
.prose .card{margin:14px 0}
.prose .card h2{margin:0;font-size:1.15rem}
.prose .card p,.prose .card ul{margin:0;color:#c9cfdd}
.prose .card li{margin:4px 0}
/* footer */
.site-footer{border-top:1px solid var(--line);color:var(--dim);font-size:.85rem;margin-top:40px;padding:24px 0 36px;background:var(--bg2)}
.site-footer p{max-width:820px}
.site-footer a{color:var(--muted)}
.foot-brand .logo{color:var(--text);font-size:.95rem}
.foot-links{line-height:2}
.aff-disc{font-size:.85rem}
.foot-signup{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;max-width:640px}
.foot-signup label{flex:1 1 100%;font-size:.9rem;color:var(--muted)}
.foot-signup input{flex:1 1 200px;padding:9px 12px;border-radius:9px;border:1px solid var(--line2);background:rgba(11,13,20,.7);color:var(--text);font:inherit;font-size:.9rem}
.foot-signup button{padding:9px 14px;border-radius:9px;border:1px solid var(--line2);background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.foot-signup button[disabled],.foot-signup input[disabled]{background:var(--panel);color:var(--dim);cursor:default}
@media (max-width:1020px){
 .tiles{grid-template-columns:repeat(3,1fr)}
 .grid.g4{grid-template-columns:repeat(2,1fr)}
 .grid.g3{grid-template-columns:repeat(2,1fr)}
 .cmp-groups{grid-template-columns:1fr}
 .grid.g3.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
 :root{--hdr:96px}
 .wrap{padding:0 16px}
 .site-header nav{gap:0}
 .site-header nav a{padding:6px 5px;font-size:.85rem}
 .site-header nav a.nav-cta{margin:0 2px;padding:6px 9px}
 .hide-sm{display:none}
 .hero{margin-top:14px;border-radius:18px;padding:26px 18px 22px}
 .sub{font-size:1rem}
 .tiles{grid-template-columns:repeat(2,1fr);gap:10px}
 .tile-body{left:10px;bottom:8px}.tile-body strong{font-size:.88rem}
 .grid,.grid.g2,.grid.g3,.grid.g4,.news-list,.how-grid,.cmp-groups{grid-template-columns:1fr}
 .filters select{flex:1 1 calc(50% - 8px)}
 .filters button{flex:1 1 100%}
 .tool-head{flex-direction:column;padding:18px;gap:14px}
 .cat-hero{grid-template-columns:1fr}
 .facts,.g-summary dl{grid-template-columns:1fr}.facts dt{padding-bottom:2px;border-bottom:0}.facts dd{padding-top:2px}
 .g-summary dl{gap:4px}.g-summary dd{margin-bottom:10px}
 .feature,.news-top{grid-template-columns:1fr}
 .feature .card-media,.news-top .card-media{aspect-ratio:16/8}
 .feature-body{padding:18px}
 .vs-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .vs-row>.vs-label{grid-column:1/-1;padding:8px 14px 4px;border-bottom:0}
 .vs-head>.vs-label{display:none}
 .vs-row>*{padding:10px 12px;font-size:.88rem}
 .step{padding-left:48px}.steps:before{left:15px}.step:before{width:32px;height:32px}
 .grid.g3.t3{grid-template-columns:1fr}
 .grid.m2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .grid.m2 .card{padding:14px;gap:8px}
 .grid.m2 .card-top{gap:9px}
 .grid.m2 .tlogo{width:34px;height:34px}
 .grid.m2 .card h3{font-size:.95rem}
 .grid.m2 .arrow{display:none}
 .grid.m2 .summary{font-size:.84rem;-webkit-line-clamp:3}
 .grid.m2 .note-title{font-size:.84rem}
 .grid.m2 .badge{white-space:normal;text-align:left}
 .grid.m2 .badges{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:380px){
 .site-header nav a{padding:6px 4px;font-size:.79rem}
 .site-header nav a.nav-cta{padding:6px 7px}
}

/* ===== Polish pass: calmer cards, pipeline strip, guide hero, vendor line ===== */
/* Colour is reserved for commercial use (licence badge) and deals; other facts are quiet text. */
.facts-line{font-size:.78rem;color:var(--dim);letter-spacing:.01em}
.card-price{font-size:.78rem;color:var(--dim);white-space:nowrap}
.badge.b-deal{background:rgba(244,114,182,.12);color:#f9a8d4;border-color:rgba(244,114,182,.35)}
.card .verdict{background:transparent;border:0;border-left:2px solid rgba(139,92,246,.45);border-radius:0;padding:2px 0 2px 10px;color:#c9cfdd}
.card-foot{align-items:center}
.card .badges{gap:8px}
/* vendor line on tool pages */
.maker{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:18px 0 6px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);font-size:.86rem;color:var(--muted)}
.maker b{color:#dfe3ee;font-weight:600}
.maker-mail{font-size:.84rem;color:var(--muted);border:1px solid var(--line2);border-radius:9px;padding:5px 12px;text-decoration:none;white-space:nowrap}
.maker-mail:hover{color:var(--text);border-color:var(--accent)}
/* pipeline strip */
.flow{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none}
.flow::-webkit-scrollbar{display:none}
.flow-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;flex:1 1 0;padding:0 18px 0 0}
.flow-node:not(:last-child):after{content:"";position:absolute;top:13px;left:0;right:0;height:2px;z-index:0;background:linear-gradient(90deg,rgba(139,92,246,.6),rgba(34,211,238,.35))}
.flow-num{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-size:.78rem;font-weight:700;color:#c4b5fd;background:var(--panel2);border:1px solid var(--line2)}
.flow-logos{position:relative;z-index:1;display:flex;align-items:center}
.flow-logos .tlogo{width:28px;height:28px;border-radius:8px;border:2px solid var(--panel);background:#1d2232;margin-left:-8px}
.flow-logos .tlogo:first-child{margin-left:0}
.flow-logos .tlogo.mono{font-size:.55rem}
.flow-more{margin-left:4px;font-size:.72rem;color:var(--dim)}
.flow-label{font-size:.76rem;line-height:1.3;color:var(--muted)}
.flow-node.is-ai .flow-label{color:#c4b5fd;font-weight:600}
.card .flow{margin:4px 0 2px}
.feature .flow{margin:4px 0}
.guide>.flow{margin:18px 0 6px;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.guide>.flow .flow-label{font-size:.82rem}
/* guide hero */
.guide{max-width:920px}
.guide-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;margin:8px 0 0;border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.guide-hero-art{background:var(--bg2);min-height:220px}
.guide-hero-art img{display:block;width:100%;height:100%;object-fit:cover}
.guide-hero-body{padding:24px 26px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.guide-hero-body h1{margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem)}
.guide-hero-body .lead{margin:0;font-size:1rem}
/* guide card media: wider crop for the generated 16:9 art */
#guide-grid .card-media,.res .card-media{aspect-ratio:16/8}
@media (max-width:720px){
 .guide-hero{grid-template-columns:1fr}
 .guide-hero-art{min-height:0;aspect-ratio:16/8}
 .guide-hero-body{padding:18px}
 .flow-node{flex:0 0 auto;width:96px}
 .maker{flex-direction:column;align-items:flex-start}
}

/* ===== Compare + category pass ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;border:1px solid var(--line2);color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;transition:border-color .15s,color .15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--text)}
.linkish{background:none;border:0;padding:0;font:inherit;color:#b9a5ff;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* category: filters, visit column, related guide */
.cat-filters{margin:20px 0 -8px}
.cf-label{font-size:.8rem;color:var(--dim);margin-right:2px}
.cf-count{font-size:.82rem;color:var(--muted);margin-left:6px}
.td-visit{text-align:right;white-space:nowrap}
.visit-sm{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:600;color:#c4b5fd;text-decoration:none;border:1px solid rgba(139,92,246,.35);border-radius:8px;padding:4px 10px;transition:background .15s,border-color .15s,color .15s}
.visit-sm:hover{background:rgba(139,92,246,.18);border-color:var(--accent);color:#fff}
.cat-empty{margin:0;padding:16px;color:var(--muted);font-size:.9rem}
.cat-table tr[hidden]{display:none}
.rel-guide{margin:22px 0 4px}
.rel-guide .card h2{margin:0;font-size:1.08rem;line-height:1.3}
.rel-guide .feature{margin:0}
.rel-guide .feature .card-media{aspect-ratio:auto}
.rel-guide .card.feature{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);padding:0;overflow:hidden;gap:0}
.rel-guide .card.feature>:not(.card-media){margin-left:24px;margin-right:24px}
.rel-guide .card.feature .card-media{grid-row:1/span 6;margin:0;border-radius:0;min-height:100%}
.rel-guide .card.feature .kicker{margin-top:20px}
.rel-guide .card.feature .flow{margin-bottom:20px;margin-top:4px}
/* compare index: picker + pair cards */
.picker{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:22px 0 8px;padding:20px;border-color:var(--line2);background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(34,211,238,.05)),var(--panel)}
.picker label{display:grid;gap:6px;font-size:.82rem;color:var(--muted);font-weight:500;flex:1 1 200px}
.picker .pk-task{flex:1 1 220px}
.picker select{appearance:none;-webkit-appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--text);border:1px solid var(--line2);border-radius:10px;padding:11px 34px 11px 12px;font:inherit;font-size:.95rem;cursor:pointer}
.picker select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.2)}
.pk-vs{align-self:center;padding-top:20px;color:var(--dim);font-weight:700;font-size:.85rem}
.picker .btn{border:0;cursor:pointer;padding:11px 20px;font:inherit;font-weight:600}
.cmp-group .sec-head{margin:26px 0 10px}
.cmp-group .sec-head h3{margin:0;font-size:1.1rem}
.grid.pairs{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));margin:0 0 6px}
.vs-lic{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vs-lic li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.84rem;color:var(--muted)}
.vs-lic .badge{white-space:nowrap}
/* comparison page: at-a-glance pair */
.glance-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch;margin:20px 0 4px}
.glance-vs{align-self:center;color:var(--dim);font-weight:800;font-size:.9rem}
.glance{gap:14px;border-color:var(--line2)}
.glance h2{margin:0;font-size:1.25rem}
.glance h2 a{color:var(--text);text-decoration:none}
.glance h2 a:hover{color:#d6cbff}
.glance-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.88rem}
.glance-facts dt{color:var(--dim)}
.glance-facts dd{margin:0;color:#dfe3ee;min-width:0}
.glance-facts small{display:block;color:var(--muted);font-size:.8rem}
.glance-cta{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0}
.vs-toolbar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.vs-row.is-diff{background:rgba(139,92,246,.06)}
.diff-dot{color:#a78bfa;font-size:.6rem;margin-left:6px;vertical-align:middle}
.vs-grid.diff-only .vs-row.is-same{display:none}
.vs-cta{background:var(--bg2)}
.vs-cta .btn{font-size:.88rem;padding:8px 14px}
@media (max-width:720px){
 .rel-guide .card.feature{grid-template-columns:1fr}
 .rel-guide .card.feature .card-media{grid-row:auto;aspect-ratio:16/8}
 .rel-guide .card.feature>:not(.card-media){margin-left:16px;margin-right:16px}
 .glance-pair{grid-template-columns:1fr}
 .glance-vs{justify-self:center}
 .picker{padding:16px}
 .pk-vs{display:none}
 .picker .btn{flex:1 1 100%;justify-content:center}
 .td-visit{padding-left:4px!important}
}
.rel-guide .card.feature{row-gap:8px;align-content:center}
.rel-guide .card.feature>:not(.card-media){grid-column:2}
@media (max-width:720px){.rel-guide .card.feature>:not(.card-media){grid-column:1}}
.card.picker{flex-direction:row}
.vs-lic li>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-lic li{flex-wrap:wrap;row-gap:3px}
.vs-lic .badge{white-space:normal;max-width:100%}

/* ===== Rankings ===== */
.rank-switch{display:flex;gap:6px;margin:18px 0 -8px;justify-content:flex-end}
.cat-filters+.rank-switch{margin-top:16px}
.td-rank{width:44px;text-align:center!important;font-weight:800;color:#c4b5fd;font-variant-numeric:tabular-nums}
.cat-table tr.is-top{background:linear-gradient(90deg,rgba(139,92,246,.16),rgba(139,92,246,.03))}
.cat-table tr.is-top .td-rank{color:#fff}
.row-label{display:block;margin:2px 0 0 34px;font-size:.72rem;font-weight:600;color:#c4b5fd;letter-spacing:.02em}
.tier-row td{background:var(--bg2);color:var(--dim);font-size:.8rem;padding:9px 16px!important}
.tier-row a{color:var(--muted)}
.rank-line{display:flex;align-items:center;gap:8px;margin:0}
.rank-n{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:8px;font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(135deg,#7c3aed,#0891b2)}
.rank-tier{font-size:.74rem;color:var(--dim);margin-left:auto}
.rank-why{margin:0;font-size:.86rem;color:#c9cfdd}
.ranked-cards .card[data-rank="1"]{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 1px rgba(139,92,246,.25) inset}
.rank-chip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:14px 0 -4px;font-size:.88rem;color:var(--muted)}
.rank-chip>a{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.12);color:#e9e3ff;text-decoration:none;font-weight:500}
.rank-chip>a b{color:#fff}
.rank-chip span{font-size:.8rem;color:var(--dim)}
.rank-chip span a{color:var(--muted)}
@media (max-width:720px){.cat-filters+.rank-switch{margin-top:12px}.rank-switch{justify-content:flex-start}}

/* ===== Guides v2: pick your path + step cards ===== */
.g2 .guide-hero-body .lead{color:#dfe3ee}
.g-meta{margin:2px 0 0}
.g2>.flow{margin:16px 0 10px}
.g-costs{margin:0 0 6px;padding:12px 16px;gap:10px;border-color:var(--line)}
.g-costs summary{cursor:pointer;color:var(--muted);font-size:.9rem;font-weight:500}
.g-costs[open] summary{margin-bottom:10px}
.g-h{font-size:1.2rem;margin:30px 0 12px}
.g-steps{list-style:none;margin:0;padding:0;position:relative}
.g-steps:before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,rgba(124,58,237,.7),rgba(8,145,178,.5));border-radius:2px}
.g-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;margin:0 0 16px}
.g-num{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c3aed,#0891b2);box-shadow:0 0 0 6px var(--bg)}
.g-card{gap:12px;padding:20px 22px}
.g-card h3{font-size:1.15rem}
.g-do{margin:0;padding-left:20px;color:#dfe3ee;display:grid;gap:6px}
.g-do li::marker{color:#a78bfa;font-weight:700}
.g-see,.g-gotcha{margin:0;padding:10px 12px;border-radius:10px;font-size:.9rem;line-height:1.5}
.g-see{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.25);color:#d1fae5}
.g-see b{color:#6ee7b7}
.g-gotcha{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.25);color:#fde9c4}
.g-gotcha b{color:#fcd34d}
.g-src{margin:0;font-size:.8rem;color:var(--dim)}
.g-src a{color:var(--muted)}
.g-img,.g-video{margin:4px 0 0}
.g-img img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line2);background:#fff}
.g-img figcaption,.g-video figcaption{font-size:.78rem;color:var(--dim);margin-top:6px}
.g-video figcaption a{color:var(--muted)}
button.yt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;width:100%;aspect-ratio:16/9;padding:18px;border-radius:12px;border:1px solid var(--line2);background:radial-gradient(circle at 50% 42%,rgba(139,92,246,.35),transparent 55%),linear-gradient(160deg,#151a2a,#0b0d14);color:var(--text);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .15s}
button.yt:hover{border-color:var(--accent)}
.yt-play{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);color:#0b0d14;font-size:1.4rem;padding-left:5px;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
button.yt:hover .yt-play{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.yt-title{font-weight:600;font-size:.98rem}
.yt-meta{font-size:.78rem;color:var(--muted)}
.yt-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
.g-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 16px}
.g-tabs .chip{font-size:.92rem;padding:7px 16px}
.g-tabs .chip[aria-selected=true]{border-color:var(--accent);background:rgba(139,92,246,.22);color:#fff}
.g-path-h{font-size:1.05rem;margin:18px 0 10px;color:var(--muted)}
@media (max-width:720px){
 .g-step{grid-template-columns:32px minmax(0,1fr);gap:10px}
 .g-num{width:32px;height:32px;border-radius:10px;font-size:.9rem}
 .g-steps:before{left:15px}
 .g-card{padding:16px}
}
.g-alt{margin:8px 0 0;gap:6px;border-color:var(--line2)}.g-alt p{margin:0;color:#c9cfdd;font-size:.92rem}
/* compact click-to-load video bar (no third-party thumbnail until play) */
button.yt{aspect-ratio:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 14px;padding:14px 16px 14px 74px;min-height:72px;background:linear-gradient(90deg,rgba(139,92,246,.16),rgba(20,24,36,.6))}
.yt-play{left:16px;top:50%;width:44px;height:44px;font-size:1rem;padding-left:3px}
button.yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.06)}
.yt-play{transform:translate(0,-50%)}
button.yt:hover .yt-play{transform:translate(0,-50%) scale(1.06)}
.yt-title{flex:1 1 100%}

/* ===== Categories hub ===== */
.hub-picks{margin-top:8px}
.picks-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pick{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);border:1px solid rgba(139,92,246,.35);background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(34,211,238,.05)),var(--panel);color:var(--text);text-decoration:none;transition:transform .18s,border-color .18s}
.pick:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--text)}
.pick-txt{display:flex;flex-direction:column;min-width:0}
.pick-txt small{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pick-txt b{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-n{margin-left:auto;font-weight:800;font-size:.85rem;color:#fff;padding:3px 9px;border-radius:8px;background:linear-gradient(135deg,#7c3aed,#0891b2)}
.hub-group .sec-head{margin-top:38px}
.hub-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:4px}
.hub-card{gap:10px}
.hub-media{position:relative;aspect-ratio:16/7}
.hub-count{position:absolute;right:10px;bottom:8px;font-size:.74rem;font-weight:600;color:#fff;background:rgba(11,13,20,.75);border:1px solid rgba(255,255,255,.12);padding:2px 9px;border-radius:999px;backdrop-filter:blur(4px)}
.hub-card h3{font-size:1.1rem}
.hub-card .card-desc{font-size:.86rem}
.hub-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.25)}
.hub-n{font-weight:800;font-size:.8rem;color:#c4b5fd}
.hub-top .tlogo{border-radius:8px}
.hub-top-txt{display:flex;flex-direction:column;min-width:0}
.hub-top-txt b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-top-txt small{font-size:.74rem;color:var(--muted)}
.hub-next{display:flex;flex-wrap:wrap;gap:6px 12px}
.hub-mini{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);min-width:0}
.hub-mini em{font-style:normal;font-weight:700;color:var(--dim);font-size:.74rem}
.hub-mini .tlogo{border-radius:6px}
.hub-mini .tlogo.mono{font-size:.5rem}
.hub-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}
.hub-basis{font-size:.74rem;color:var(--dim)}
.hub-basis.is-ev{color:#6ee7b7}
.hub-basis.is-ev:before{content:"● ";font-size:.6rem;vertical-align:middle}
.hub-links{display:flex;gap:10px}
.hub-links a{position:relative;z-index:2;font-size:.8rem;color:var(--muted);text-decoration:none}
.hub-links a:hover{color:#d6cbff}
.hub-media{aspect-ratio:auto;height:112px}
.pick-txt b{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pick-n{white-space:nowrap;flex:0 0 auto}
.pick-txt b{display:block;-webkit-line-clamp:unset;overflow:visible}

/* ===== Homepage overhaul ===== */
.hero2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center;padding:36px 36px 32px}
.hero2 h1{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.hero2 .sub{font-size:1.02rem}
.hero-stats{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;color:var(--muted)}
.hero-stats b{color:var(--text);font-size:1.05rem;margin-right:3px}
.hero2 .searchbar{max-width:none}
.sb-go{border:0;border-radius:10px;padding:9px 14px;font:inherit;font-size:.9rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#7c3aed,#6d28d9);cursor:pointer}
.sb-go:hover{filter:brightness(1.12)}
.hero-picks{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;background:rgba(11,13,20,.55);border:1px solid var(--line2)}
.hero-picks h2{margin:0 0 4px;font-size:.95rem}
.hero-picks h2 small{display:block;font-size:.74rem;font-weight:500;color:var(--dim);letter-spacing:0}
.hpick{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.hpick:hover{border-color:var(--accent);transform:translateX(2px);color:var(--text)}
.hpick .tlogo{border-radius:9px}
.hp-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.hp-txt small{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.hp-txt b{font-size:.92rem;line-height:1.25}
.hp-n{flex:0 0 auto;white-space:nowrap;font-weight:800;font-size:.74rem;color:#fff;padding:2px 8px;border-radius:7px;background:linear-gradient(135deg,#7c3aed,#0891b2)}
.hp-all{font-size:.84rem;text-decoration:none;margin-top:2px}
/* can I ship it */
.ship{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;margin:26px 0 0;padding:24px 26px;border-color:var(--line2);background:linear-gradient(135deg,rgba(16,185,129,.07),rgba(139,92,246,.07)),var(--panel)}
.ship h2{margin:4px 0 6px;font-size:1.45rem}
.ship-q p{margin:0 0 14px;color:var(--muted)}
.ship-pick select{width:100%;appearance:none;-webkit-appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--text);border:1px solid var(--line2);border-radius:12px;padding:12px 36px 12px 14px;font:inherit;font-size:1rem;cursor:pointer}
.ship-pick select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(139,92,246,.2)}
.ship-out{min-height:150px;display:flex;align-items:center;padding:16px 18px;border-radius:14px;border:1px dashed var(--line2);background:rgba(11,13,20,.45)}
.ship-empty{margin:0;color:var(--dim);font-size:.9rem}
.ship-res{display:grid;gap:8px;width:100%}
.ship-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ship-top b{font-size:1.1rem}
.ship-top .tlogo{border-radius:10px}
.ship-a{margin:0;color:#eef0f6}
.ship-c{margin:0;font-size:.85rem;color:var(--muted)}
.ship-c b{color:#c9cfdd;font-weight:600}
.ship-links{margin:0;display:flex;gap:16px;font-size:.88rem}
/* best for each job */
.best-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.best-col{padding:14px 14px 10px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.best-col h3{margin:0 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#a78bfa}
.best-col ul{list-style:none;margin:0;padding:0}
.best-col li+li{border-top:1px solid var(--line)}
.best-col a{display:flex;flex-direction:column;gap:3px;padding:8px 2px;text-decoration:none;color:var(--text)}
.best-col a:hover .best-tool{color:#d6cbff}
.best-cat{font-size:.76rem;color:var(--dim)}
.best-tool{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem}
.best-tool .tlogo{border-radius:6px}
.best-tool .tlogo.mono{font-size:.5rem}
.best-ev{font-style:normal;color:#6ee7b7;font-size:.55rem;margin-left:2px}
.best-note{margin:8px 2px 0;font-size:.8rem;color:var(--dim)}
/* browse all */
.all-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin:40px 0 0;padding:22px 26px;border-color:var(--line2)}
.all-tools h2{margin:0 0 4px;font-size:1.3rem}
.all-tools p{margin:0;color:var(--muted)}
.at-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.at-side .quick{margin:0;justify-content:flex-end}
.tools-search{max-width:none;margin:18px 0 14px}
/* ===== Footer ===== */
.site-footer{padding:40px 0 26px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:28px}
.foot-brand-col .logo{color:var(--text);font-size:1rem}
.foot-tag{margin:12px 0 16px;color:var(--muted);font-size:.88rem;max-width:380px}
.foot-brand-col .foot-signup{max-width:400px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h2{margin:4px 0 4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text)}
.site-footer .foot-col a{color:var(--muted);text-decoration:none;font-size:.9rem}
.site-footer .foot-col a:hover{color:var(--text)}
.foot-bottom{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:8px}
.foot-bottom p{margin:0;font-size:.8rem;color:var(--dim);max-width:none}
.foot-meta{display:flex;flex-wrap:wrap;gap:6px 18px}
.site-footer .foot-meta a{color:var(--dim)}
@media (max-width:1020px){
 .hero2{grid-template-columns:1fr}
 .best-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .foot-brand-col{grid-column:1/-1}
}
@media (max-width:720px){
 .hero2{padding:24px 18px}
 .ship,.all-tools{grid-template-columns:1fr;padding:18px}
 .at-side{align-items:flex-start}.at-side .quick{justify-content:flex-start}
 .best-grid{grid-template-columns:1fr}
 .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== Comparisons v2 ===== */
.cmp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:-4px 0 6px;font-size:.8rem;color:var(--dim)}
.ldot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--unk);flex:0 0 auto}
.ldot.ld-ok{background:var(--ok)}.ldot.ld-warn{background:var(--warn)}.ldot.ld-bad{background:var(--bad)}.ldot.ld-unk{background:#64748b}
.cmp-stage-h{margin:26px 0 10px;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:#a78bfa}
.cmp-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.cmp-panel{gap:4px;padding:14px 14px 10px}
.cmp-panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 6px}
.cmp-panel-h h3{margin:0;font-size:1.05rem}
.cmp-panel-h a{font-size:.82rem;text-decoration:none}
.prow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s}
.prow:hover{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.35);color:var(--text)}
.prow.is-top{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.3)}
.prow-logos{display:flex;flex:0 0 auto}
.prow-logos .tlogo{border-radius:8px;border:2px solid var(--panel)}
.prow-logos .tlogo+.tlogo{margin-left:-8px}
.prow-logos .tlogo.mono{font-size:.55rem}
.prow-name{flex:1;min-width:0;font-weight:600;font-size:.92rem;line-height:1.3}
.prow-name em{font-style:normal;color:var(--dim);font-weight:500;font-size:.8rem}
.prow-tag{flex:0 0 auto;font-size:.7rem;font-weight:700;color:#fff;padding:2px 7px;border-radius:7px;background:linear-gradient(135deg,#7c3aed,#0891b2)}
.prow-lic{flex:0 0 auto;display:flex;gap:4px}
.cmp-panel-foot{margin:6px 2px 0;padding-top:8px;border-top:1px solid var(--line);font-size:.8rem;color:var(--dim)}
.cmp-panel-foot a{color:var(--muted)}
/* comparison page ranking */
.cmp-verdict{margin:18px 0 0;gap:6px;border-color:rgba(139,92,246,.4);background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(34,211,238,.04)),var(--panel)}
.cmp-verdict h2{margin:0;font-size:1.1rem}
.cmp-verdict p{margin:0;color:#dfe3ee;font-size:.95rem}
.cmp-verdict-foot{font-size:.84rem!important}
.cmp-verdict-foot a{color:var(--muted)}
.glance-rank{align-self:flex-start;font-size:.8rem;text-decoration:none;color:#e9e3ff;padding:3px 10px;border-radius:999px;border:1px solid rgba(139,92,246,.45);background:rgba(139,92,246,.12)}
.glance-rank b{color:#fff}
@media (max-width:720px){.cmp-panels{grid-template-columns:1fr}}
.cmp-panels.cp-4,.cmp-panels.cp-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cmp-panels.cp-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp-legend{margin:2px 0 4px}
h2.sub-h+.cmp-legend{margin-top:8px}
@media (max-width:1020px){.cmp-panels.cp-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cmp-panels.cp-2,.cmp-panels.cp-3,.cmp-panels.cp-4{grid-template-columns:1fr}}

/* Engine hubs + licence guides (FAQ, hub sections, licence table) */
.hub-sec .hub-intro{margin:0;color:#c9cfdd;font-size:.95rem}
.hub-sec ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.hub-table th[scope=row],.lic-table th[scope=row]{text-align:left;font-weight:600;white-space:normal;text-transform:none;letter-spacing:normal;font-size:.9rem;color:var(--text);vertical-align:top;background:none}
.lic-table th[scope=row] .badge{margin-top:4px}
.lic-table td,.hub-table td{font-size:.88rem;vertical-align:top}
.lic-table{min-width:900px}
@media (max-width:700px){.lic-table{min-width:0}.lic-table thead{display:none}.lic-table,.lic-table tbody,.lic-table tr,.lic-table th,.lic-table td{display:block;width:auto}.lic-table tr{border-bottom:1px solid var(--line2);padding:10px 0}.lic-table th[scope=row]{border:0;padding:6px 14px}.lic-table td{border:0;padding:4px 14px}.lic-table td::before{content:attr(data-label);display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}}
.faq{margin:24px 0}
.faq-item{margin:10px 0;padding:14px 16px}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--text)}
.faq-item p{margin:8px 0 0;color:#c9cfdd;font-size:.92rem}
.g-table{margin:18px 0}
/* Sponsor spots: wide-screen side card (fixed in the right margin, out of flow: no layout shift; hidden where the gutter can't fit it) */
.sp-side{display:none}
@media (min-width:1480px){.sp-side{display:block;position:fixed;top:calc(var(--hdr) + 28px);right:calc((100vw - 1180px) / 4 - 70px);width:140px;z-index:5}}
.sp-side-card{gap:6px;padding:12px;text-decoration:none;color:var(--text);font-size:.85rem;line-height:1.35}
.sp-side-card:hover{border-color:var(--line2)}
.sp-side-card .tlogo{border-radius:8px}
.sp-side-line{color:var(--muted);font-size:.78rem}
.sp-row{margin-top:16px}
.sp-offer-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sp-offer-head h2{margin:0}
.sp-price{font-weight:700;font-size:1.1rem}
.sp-avail{color:var(--muted);font-size:.9rem}
.sp-offer p{margin:0}