/*
Theme Name: AI Tool Atlas
Description: "Survey sheet" theme (made in OpenDesign): survey-paper surface, ink-teal text, one rust accent, contour map and terminal-style data. Tokens in design-options/open-design-redesign/DESIGN.md. Requires the AI Tool Atlas Core plugin.
Version: 0.7.1
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: ai-tool-atlas
*/

:root{
  --bg:oklch(0.972 0.007 180);
  --surface:oklch(0.995 0.003 180);
  --sunk:oklch(0.945 0.01 180);
  --fg:oklch(0.23 0.03 195);
  --fg-2:oklch(0.36 0.03 195);
  --muted:oklch(0.48 0.02 195);
  --border:oklch(0.87 0.012 185);
  --border-strong:oklch(0.76 0.018 190);
  --accent:oklch(0.53 0.15 40);
  --accent-hover:oklch(0.45 0.14 40);
  --accent-soft:oklch(0.94 0.035 50);
  --term:oklch(0.22 0.025 195);
  --term-line:oklch(0.32 0.025 195);
  --term-text:oklch(0.9 0.03 170);
  --term-dim:oklch(0.72 0.03 180);
  --term-ok:oklch(0.84 0.14 155);
  --term-warn:oklch(0.86 0.13 85);
  --pro:oklch(0.45 0.11 150);
  --con:oklch(0.5 0.15 35);
  --warn-bg:oklch(0.95 0.06 90);
  --warn-fg:oklch(0.4 0.08 75);
  --ok-bg:oklch(0.94 0.04 155);
  --ok-fg:oklch(0.38 0.08 155);
  --star:oklch(0.78 0.15 75);
  --pin:oklch(0.5 0.08 185);
  --pin-bg:oklch(0.94 0.03 185);

  --font-display:"Space Grotesk", "Avenir Next", ui-sans-serif, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-sm:6px;--r:10px;--r-lg:16px;--r-pill:999px;
  --shadow-1:0 1px 2px oklch(0.3 0.03 195 / .06), 0 2px 8px oklch(0.3 0.03 195 / .05);
  --shadow-2:0 2px 4px oklch(0.3 0.03 195 / .06), 0 14px 32px -8px oklch(0.3 0.03 195 / .18);
  --ease:cubic-bezier(0.2,0,0,1);
  --z-tray:30;--z-header:40;--z-skip:50;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2.25rem,5vw,3.75rem);letter-spacing:-0.03em}
h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-0.02em}
h3{font-size:1.125rem;letter-spacing:-0.01em}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:var(--s4);top:-60px;z-index:var(--z-skip);background:var(--fg);color:var(--surface);padding:var(--s2) var(--s4);border-radius:var(--r)}
.skip-link:focus{top:var(--s3)}
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
@media(min-width:768px){.container{padding:0 var(--s6)}}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.mono,.coord{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.01em}
.coord{color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.coord span+span::before{content:"/";margin-right:var(--s4);color:var(--border-strong)}

/* Buttons */
.btn{--bb:var(--surface);--bf:var(--fg);--bd:var(--border-strong);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border:1px solid var(--bd);border-radius:var(--r);background:var(--bb);color:var(--bf);font:600 .9375rem/1 var(--font-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease)}
.btn:hover{--bb:var(--sunk);--bd:var(--fg-2)}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:40px;padding:0 var(--s4);font-size:.875rem}
.btn--primary{--bb:var(--accent);--bf:oklch(0.99 0.005 60);--bd:var(--accent)}
.btn--primary:hover{--bb:var(--accent-hover);--bd:var(--accent-hover)}
.btn--ink{--bb:var(--fg);--bf:var(--surface);--bd:var(--fg)}
.btn--ink:hover{--bb:oklch(0.33 0.03 195);--bd:oklch(0.33 0.03 195)}
.btn--block{width:100%}
.btn svg{width:16px;height:16px;flex:none}
.link-arrow{font-weight:600;font-size:.9375rem;display:inline-flex;align-items:center;gap:6px;text-decoration:none;border-bottom:1px solid var(--border-strong);padding-bottom:2px}
.link-arrow::after{content:"→";transition:transform .15s var(--ease)}
.link-arrow:hover{border-color:var(--fg)}
.link-arrow:hover::after{transform:translateX(3px)}
.compare-toggle .is-on{display:none}
.compare-toggle[aria-pressed="true"]{--bb:var(--fg);--bf:var(--surface);--bd:var(--fg)}
.compare-toggle[aria-pressed="true"]:hover{--bb:oklch(0.33 0.03 195)}
.compare-toggle[aria-pressed="true"] .is-off{display:none}
.compare-toggle[aria-pressed="true"] .is-on{display:inline}
.compare-toggle.is-other-cat{opacity:.45}

/* Header */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:oklch(0.972 0.007 180 / .88);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--border)}
.site-header__inner{display:flex;align-items:center;gap:var(--s5);height:68px}
.brand{display:flex;flex-shrink:0;align-items:center;gap:10px;text-decoration:none;font:600 1.125rem/1 var(--font-display);letter-spacing:-0.01em;margin-right:auto}
.brand__mark{width:36px;height:36px;display:grid;place-items:center}
.brand__mark svg{width:36px;height:36px;display:block}
.nav{display:flex;align-items:center;gap:var(--s5)}
.nav__list{display:flex;gap:var(--s1);list-style:none}
.nav__list a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border-radius:var(--r);text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--fg-2)}
.nav__list a:hover{background:var(--sunk);color:var(--fg)}
.nav__list a[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg);border-radius:0}
.nav-toggle{display:none}
@media(max-width:1080px){
  .nav-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--fg);cursor:pointer}
  .nav-toggle span{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:transform .2s var(--ease)}
  .nav-toggle[aria-expanded="true"] span{box-shadow:none;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{content:"";display:block;width:18px;height:2px;background:currentColor;transform:rotate(-90deg)}
  .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;padding:var(--s4);gap:var(--s3);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-2);display:none}
  .nav.is-open{display:flex}
  .nav__list{flex-direction:column}
  .nav__list a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--fg)}
}

/* Sections */
.section{padding-block:var(--s8)}
@media(min-width:1024px){.section{padding-block:var(--s9) calc(var(--s9) + 8px)}}
.section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s5);margin-bottom:var(--s6)}
.section__head p{max-width:52ch}
.stack-head h2{margin-bottom:var(--s2)}

/* Hero / atlas sheet */
.intro{padding:var(--s7) 0 var(--s8);border-bottom:1px solid var(--border)}
.intro__grid{display:grid;gap:var(--s7);align-items:center}
@media(min-width:1024px){.intro__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8)}.intro{padding-top:var(--s8)}}
.intro__title{margin:var(--s4) 0 var(--s5);font-size:clamp(2.5rem,5.4vw,4.25rem);line-height:1.02}
.intro__title em{font-style:normal;color:var(--accent);white-space:nowrap}
.intro__lead{font-size:1.125rem;color:var(--fg-2);max-width:46ch;margin-bottom:var(--s6)}
.search{display:flex;gap:var(--s2);padding:6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:calc(var(--r) + 6px);box-shadow:var(--shadow-1);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.search:focus-within{border-color:var(--fg);box-shadow:0 0 0 4px oklch(0.23 0.03 195 / .1)}
.search__field{position:relative;flex:1;min-width:0}
.search__field svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search__input{width:100%;height:48px;border:0;background:transparent;padding:0 var(--s3) 0 40px;font:inherit;font-size:1rem;color:var(--fg);border-radius:var(--r)}
.search__input:focus{outline:none}
.search__input::placeholder{color:var(--muted)}
.search .btn{min-height:48px}

.map{position:relative;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-2);overflow:hidden;aspect-ratio:6/5}
.map__topo{position:absolute;inset:0;width:100%;height:100%;color:oklch(0.55 0.04 185 / .28)}
.map__grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:20% 20%;opacity:.45}
.map__ticks{position:absolute;inset:auto var(--s4) var(--s3) var(--s4);display:flex;justify-content:space-between;font:500 .6875rem/1 var(--font-mono);color:var(--muted);letter-spacing:.04em}
.map__label{position:absolute;top:var(--s4);left:var(--s4);font:500 .75rem/1.4 var(--font-mono);color:var(--muted);background:oklch(0.995 0.003 180 / .9);padding:4px 8px;border-radius:var(--r-sm)}
.map__compass{position:absolute;top:var(--s4);right:var(--s4);width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font:600 .75rem/1 var(--font-mono);background:var(--surface)}
.map__pins{list-style:none;position:absolute;inset:0}
.map__pins li{position:absolute;left:var(--x);top:var(--y)}
.pin{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px 0 10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pill);text-decoration:none;font-weight:600;font-size:.875rem;box-shadow:var(--shadow-1);white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.pin:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--pin)}
.pin__dot{width:12px;height:12px;border-radius:50%;background:var(--pin);box-shadow:0 0 0 4px var(--pin-bg)}
.pin__n{font:500 .75rem/1 var(--font-mono);color:var(--muted);padding-left:6px;border-left:1px solid var(--border)}
@media(max-width:640px){
  .map{aspect-ratio:auto;padding:56px var(--s4) var(--s7)}
  .map__pins{position:static;display:flex;flex-wrap:wrap;gap:var(--s2)}
  .map__pins li{position:static}
}

/* Terminal */
.log{margin-top:var(--s7);background:var(--term);color:var(--term-text);border-radius:var(--r-lg);font:400 .8125rem/1.7 var(--font-mono);overflow:hidden;box-shadow:inset 0 1px 0 oklch(1 0 0 / .06)}
.log__head{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-bottom:1px solid var(--term-line);color:var(--term-dim)}
.log__dots{display:flex;gap:6px}.log__dots i{width:9px;height:9px;border-radius:50%;background:var(--term-line)}
.log__lines{list-style:none;padding:var(--s4);display:grid;gap:2px}
@media(min-width:900px){.log__lines{grid-template-columns:1fr 1fr;column-gap:var(--s7)}}
.log__lines b{color:var(--term-ok);font-weight:600;margin-right:10px}
.log__lines em{color:var(--term-warn);font-style:normal;font-weight:600;margin-right:10px}
.log__lines i{color:var(--term-dim);font-style:normal;margin-right:10px}

/* Category index */
.cat-index{list-style:none;display:grid;gap:0;border-top:1px solid var(--border)}
@media(min-width:768px){.cat-index{grid-template-columns:1fr 1fr;column-gap:var(--s7)}}
.cat-index a{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:var(--s4);padding:var(--s4) var(--s2);border-bottom:1px solid var(--border);text-decoration:none;transition:background .15s var(--ease)}
.cat-index a:hover{background:var(--surface)}
.cat-index a:hover .cat-index__go{transform:translateX(4px);color:var(--fg)}
.cat-index__sw{width:14px;height:14px;border-radius:4px;background:var(--pin)}
.cat-index__name{font:600 1.125rem/1.2 var(--font-display);letter-spacing:-0.01em}
.cat-index__n{font:500 .8125rem/1 var(--font-mono);color:var(--muted)}
.cat-index__go{color:var(--muted);transition:transform .15s var(--ease)}

/* Card grid */
.card-grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.card-grid--lead{grid-template-columns:1fr}
@media(min-width:1024px){.card-grid--lead{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:max(280px,calc((100% - 2 * var(--s5)) / 3));gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s4);margin-bottom:calc(var(--s4) * -1)}
.rail>*{scroll-snap-align:start}
@media(max-width:640px){.rail{grid-auto-columns:84%}}

/* Tool card */
.tool-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.tool-card__media{position:relative;display:block;aspect-ratio:16/10;border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;overflow:hidden;background:var(--sunk)}
.tool-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.tool-card:hover .tool-card__media img{transform:scale(1.03)}
.badge{position:absolute;top:var(--s3);left:var(--s3);display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);background:var(--surface);font-size:.75rem;font-weight:600;letter-spacing:.01em;box-shadow:var(--shadow-1)}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pin)}
.ribbon{position:absolute;top:var(--s3);right:var(--s3);padding:5px 10px;border-radius:var(--r-pill);background:var(--fg);color:var(--surface);font:600 .6875rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.tool-card__body{padding:0 var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.tool-card__head{display:flex;align-items:flex-end;gap:var(--s3);margin-top:-22px;position:relative}
.logo{flex:none;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:12px;overflow:hidden;display:grid;place-items:center}
.logo img{width:100%;height:100%;object-fit:contain}
.logo--md{width:52px;height:52px;padding:6px;box-shadow:var(--shadow-1)}
.logo--sm{width:36px;height:36px;padding:4px;border-radius:9px}
.logo--lg{width:80px;height:80px;padding:10px;border-radius:18px;box-shadow:var(--shadow-1)}
.tool-card__name{font-size:1.25rem}
.tool-card__name a{text-decoration:none}
.tool-card__name a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.tool-card__name a:focus-visible{outline:none}
.tool-card:has(.tool-card__name a:focus-visible){outline:2.5px solid var(--accent);outline-offset:3px}
.tool-card__meta{font:500 .75rem/1.4 var(--font-mono);color:var(--muted);margin-top:2px}
.tool-card__desc{font-size:.9375rem;color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rating{display:flex;align-items:center;gap:var(--s2);font-size:.8125rem}
.stars{--fill:0%;position:relative;display:inline-block;font-size:.9rem;line-height:1;letter-spacing:2px;color:var(--border-strong)}
.stars::before{content:"★★★★★"}
.stars::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--fill);overflow:hidden;color:var(--star)}
.tool-card__status{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto;padding-top:var(--s1)}
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:var(--r-sm);font:600 .75rem/1.4 var(--font-mono);background:var(--ok-bg);color:var(--ok-fg)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.editorial-chip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-sm);font:500 .75rem/1.4 var(--font-mono);border:1px dashed var(--border-strong);color:var(--fg-2)}
.tool-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5) var(--s5);border-top:1px dashed var(--border)}
.tool-card__actions{display:flex;gap:var(--s2);position:relative;z-index:1}
.price{position:relative;display:flex;flex-direction:column;padding:6px 12px 6px 18px;background:var(--sunk);border-radius:4px var(--r-sm) var(--r-sm) 4px;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}
.price::before{content:"";position:absolute;left:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--surface)}
.price__main{font:600 .9375rem/1.3 var(--font-body);font-variant-numeric:tabular-nums}
.price__sub{font:500 .6875rem/1.4 var(--font-mono);color:var(--muted);letter-spacing:.01em}
.price--unconfirmed{background:var(--warn-bg)}
.price--unconfirmed .price__sub{color:var(--warn-fg)}

/* Principles */
.principles{display:grid;gap:var(--s6)}
@media(min-width:960px){.principles{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s8)}}
.principles h2{max-width:14ch;margin-bottom:var(--s5)}
.principles__list{list-style:none;display:grid;gap:0}
.principles__list li{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--border)}
.principles__list li:last-child{border-bottom:1px solid var(--border)}
.principles__list svg{width:28px;height:28px;color:var(--fg-2)}
.principles__list h3{margin-bottom:6px}
.principles__list p{color:var(--fg-2);max-width:60ch}

/* Footer */
.site-footer{background:var(--term);color:var(--term-text);padding:var(--s8) 0 var(--s6);margin-top:var(--s8)}
.site-footer a{color:var(--term-text)}
.site-footer__inner{display:grid;gap:var(--s6)}
@media(min-width:768px){.site-footer__inner{grid-template-columns:1.4fr 1fr;align-items:start}}
.site-footer__brand{font:600 1.5rem/1 var(--font-display);margin-bottom:var(--s3)}
.site-footer .muted{color:var(--term-dim);max-width:52ch}
.footer-links{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s5)}
.footer-links a{display:inline-flex;min-height:36px;align-items:center;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.site-footer__legal{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--term-line);font:400 .75rem/1.6 var(--font-mono)}
.site-footer :focus-visible{outline-color:var(--term-warn)}

/* Catalog */
.page-head{padding:var(--s7) 0 var(--s6)}
.page-head h1{margin:var(--s3) 0 var(--s3)}
.page-head p{max-width:60ch;color:var(--fg-2);font-size:1.0625rem}
.catalog__bar{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
@media(min-width:768px){.catalog__bar{grid-template-columns:1fr auto;align-items:center}}
.sort{display:flex;align-items:center;gap:var(--s2);font-size:.875rem;font-weight:500}
select,input[type=text],input[type=url],input[type=email],input[type=search],textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);min-height:44px;padding:0 var(--s3);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
textarea{padding:var(--s3);min-height:120px;resize:vertical;width:100%}
select{padding-right:36px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23334' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
input:hover,select:hover,textarea:hover{border-color:var(--fg-2)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px oklch(0.53 0.15 40 / .35)}
.catalog__layout{display:grid;gap:var(--s6)}
@media(min-width:960px){.catalog__layout{grid-template-columns:260px 1fr;gap:var(--s7);align-items:start}}
.filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
@media(min-width:960px){.filters{position:sticky;top:92px}}
.filters__summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 var(--s4);font-weight:600;cursor:pointer;list-style:none;border-radius:var(--r-lg)}
.filters__summary::-webkit-details-marker{display:none}
.filters__summary::after{content:"+";font:500 1.25rem/1 var(--font-mono);transition:transform .2s var(--ease)}
.filters[open] .filters__summary::after{transform:rotate(45deg)}
.filters__body{padding:0 var(--s4) var(--s4);display:grid;gap:var(--s5)}
.filter-group{border:0;margin:0;padding:var(--s4) 0 0;border-top:1px solid var(--border);display:grid;gap:2px}
.filter-group legend{float:left;width:100%;font:600 .6875rem/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:var(--s2)}
.legend-note{text-transform:none;letter-spacing:0}
.check{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 6px;border-radius:var(--r-sm);cursor:pointer;font-size:.9375rem}
.check:hover{background:var(--sunk)}
.check input{width:18px;height:18px;margin:0;accent-color:var(--fg);flex:none}
.check .n{margin-left:auto;font:500 .75rem/1 var(--font-mono);color:var(--muted)}
.check:has(input:checked){font-weight:600}
.results__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.results__count{font:600 1rem/1.3 var(--font-mono);letter-spacing:0}
.empty{display:block;padding:var(--s7) var(--s5);text-align:left;border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface)}
.empty.is-shown{display:block}
.empty h3{font-size:1.375rem;margin-bottom:var(--s2)}
.empty p{color:var(--fg-2);margin-bottom:var(--s4);max-width:52ch}
.pagination{margin-top:var(--s7)}
ul.page-numbers,.pagination .nav-links{list-style:none;display:flex;gap:var(--s2);flex-wrap:wrap;margin:0;padding:0}
.page-numbers a,.page-numbers span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 var(--s3);border-radius:var(--r);border:1px solid var(--border-strong);text-decoration:none;font:600 .875rem/1 var(--font-mono);background:var(--surface)}
.page-numbers a:hover{background:var(--sunk);border-color:var(--fg-2)}
.page-numbers .current{background:var(--fg);color:var(--surface);border-color:var(--fg)}

/* Tool page */
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:var(--s5) 0 0;font-size:.875rem;color:var(--muted)}
.breadcrumbs li+li::before{content:"/";margin-right:6px;color:var(--border-strong)}
.breadcrumbs a{color:var(--fg-2)}
.tool__header{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;padding:var(--s6) 0}
.tool__header h1{margin:var(--s2) 0 var(--s3)}
.tool__lead{font-size:1.125rem;color:var(--fg-2);max-width:60ch;margin-bottom:var(--s4)}
@media(max-width:640px){.tool__header{grid-template-columns:1fr}.logo--lg{width:64px;height:64px}}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border-strong);background:var(--surface);font-size:.8125rem;font-weight:500;text-decoration:none}
a.chip:hover{border-color:var(--fg);background:var(--sunk)}
.chip--cat{background:var(--pin-bg);border-color:transparent;gap:6px}
.chip--cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pin)}
.status-link{text-decoration:none;display:inline-flex}
.showcase{display:grid;gap:var(--s5)}
@media(min-width:1024px){.showcase{grid-template-columns:minmax(0,1fr) 360px;align-items:start}}
.gallery__main{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--sunk);box-shadow:var(--shadow-2)}
.gallery__main img{width:100%;aspect-ratio:1024/538;object-fit:contain}
.gallery__thumbs{list-style:none;display:flex;gap:var(--s3);margin-top:var(--s3)}
.gallery__thumbs a{display:block;width:132px;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);transition:border-color .15s var(--ease)}
.gallery__thumbs a:hover,.gallery__thumbs a[aria-current="true"]{border-color:var(--fg)}
.gallery__thumbs img{aspect-ratio:300/188;object-fit:cover;width:100%}
.buybox{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:var(--s5);display:grid;gap:var(--s4)}
@media(min-width:1024px){.buybox{position:sticky;top:92px}}
.buybox__label{font:600 .6875rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.buybox__price{font:600 1.75rem/1.15 var(--font-display);letter-spacing:-0.02em;margin-top:6px}
.buybox__sub{margin-top:4px}
.buybox__rating{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.facts{display:grid;gap:0;margin:0}
.facts div{display:flex;justify-content:space-between;gap:var(--s4);padding:8px 0;border-bottom:1px dashed var(--border);font-size:.9375rem}
.facts div:last-child{border-bottom:0}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600;text-align:right}
.buybox__actions{display:grid;gap:var(--s2)}
.buybox__more{font-size:.875rem;justify-self:start}
.tool__layout{display:grid;gap:var(--s7);margin-top:var(--s8)}
@media(min-width:1024px){.tool__layout{grid-template-columns:minmax(0,1fr) 300px}}
.tool__main{display:grid;gap:var(--s8);min-width:0}
.block h2{margin-bottom:var(--s4)}
.prose{display:grid;gap:var(--s4);max-width:68ch;color:var(--fg-2);font-size:1.0625rem}
.split{display:grid;gap:var(--s6)}
@media(min-width:720px){.split{grid-template-columns:1fr 1fr}}
.split h2{font-size:1.375rem}
.bullets{list-style:none;display:grid;gap:10px}
.bullets li{position:relative;padding-left:26px}
.bullets li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;border:1.5px solid var(--fg-2);border-radius:2px;transform:rotate(45deg)}
.bullets--pro li::before,.bullets--con li::before{border:0;transform:none;left:0;top:.2em;width:18px;height:18px;border-radius:50%;font:700 11px/18px var(--font-mono);text-align:center}
.bullets--pro li::before{content:"+";background:var(--ok-bg);color:var(--pro)}
.bullets--con li::before{content:"–";background:var(--accent-soft);color:var(--con)}
.proscons{padding:var(--s5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border)}
.pricing-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s3)}
.pricing-box p{max-width:70ch}
.pricing-box__checked{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;padding-top:var(--s3);border-top:1px dashed var(--border)}
.editorial{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);padding:var(--s5);border-radius:var(--r-lg);border:1px dashed var(--border-strong)}
.editorial__score{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--border-strong);display:grid;place-items:center;font:600 1.25rem/1 var(--font-mono);color:var(--muted)}
.editorial p{color:var(--fg-2)}
.editorial strong{color:var(--fg)}
.reviews__empty{display:grid;gap:var(--s2);padding:var(--s5);border-radius:var(--r-lg);background:var(--sunk);margin-bottom:var(--s5)}
.form{display:grid;gap:var(--s5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5)}
@media(min-width:768px){.form{padding:var(--s6)}}
.form__row{display:grid;gap:var(--s5)}
@media(min-width:640px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px}
.field label,.field legend{font-weight:600;font-size:.9375rem}
.field input,.field select{width:100%}
.field__hint{font-size:.8125rem;color:var(--muted)}
.field__error{font-size:.8125rem;color:var(--con);font-weight:500}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-color:var(--con)}
.field.is-invalid .field__error{display:block}
.required{color:var(--con)}
.rating-input{border:0;padding:0;margin:0}
.rating-input__stars{display:inline-flex;flex-direction:row-reverse;gap:2px;margin-top:6px}
.rating-input input{position:absolute;opacity:0;width:1px;height:1px}
.rating-input label{display:grid;place-items:center;width:44px;height:44px;font-size:1.75rem;color:var(--border-strong);cursor:pointer;border-radius:var(--r-sm);transition:color .1s var(--ease),transform .1s var(--ease)}
.rating-input label:hover,.rating-input label:hover~label,.rating-input input:checked~label{color:var(--star)}
.rating-input label:active{transform:scale(.9)}
.rating-input input:focus-visible+label{outline:2.5px solid var(--accent);outline-offset:1px}
.upload{display:grid;gap:6px}
.upload input[type=file]{font-size:.875rem;padding:var(--s4);border:1.5px dashed var(--border-strong);border-radius:var(--r);background:var(--sunk);width:100%;cursor:pointer}
.upload input[type=file]:hover{border-color:var(--fg-2)}
.upload input[type=file]::file-selector-button{font:600 .875rem var(--font-body);min-height:36px;padding:0 14px;margin-right:12px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);cursor:pointer}
.shots-preview{list-style:none;display:flex;gap:var(--s2);flex-wrap:wrap}
.shots-preview img{width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border)}
.antibot{display:grid;gap:6px;padding:var(--s4);border-radius:var(--r);background:var(--sunk);font-family:var(--font-mono);font-size:.875rem}
.antibot label{font-weight:600}
.antibot input{width:96px}
.hp{position:absolute;left:-9999px}
.alt-list{list-style:none;display:grid;gap:var(--s3)}
@media(min-width:720px){.alt-list{grid-template-columns:1fr 1fr}}
.alt{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);padding:var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.alt__name{font-weight:600;font-family:var(--font-display);font-size:1.0625rem}
.alt .btn{grid-column:2;justify-self:start;margin-top:var(--s2)}
.sources{list-style:none;display:grid;gap:var(--s2);margin:var(--s3) 0}
.sources a{font-weight:500}
.glance{position:sticky;top:92px;background:var(--term);color:var(--term-text);border-radius:var(--r-lg);padding:var(--s5);font-family:var(--font-mono);font-size:.8125rem}
.glance h2{font-size:.75rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--term-dim);margin-bottom:var(--s3)}
.glance dl{margin:0;display:grid}
.glance dl div{display:flex;justify-content:space-between;gap:var(--s3);padding:7px 0;border-bottom:1px solid var(--term-line)}
.glance dt{color:var(--term-dim)}
.glance dd{margin:0;text-align:right}
.glance a{color:var(--term-text)}
.glance .warn{color:var(--term-warn)}
.glance__toc{display:grid;margin-top:var(--s4);gap:2px}
.glance__toc a{display:flex;align-items:center;min-height:36px;padding:0 var(--s2);border-radius:var(--r-sm);text-decoration:none}
.glance__toc a::before{content:">";margin-right:10px;color:var(--term-ok)}
.glance__toc a:hover{background:var(--term-line)}
.glance :focus-visible{outline-color:var(--term-warn)}
@media(max-width:1023px){.glance{position:static}}

/* Compare */
.picker{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.picker__item{display:inline-flex;align-items:center;gap:10px;padding:4px 4px 4px 6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pill);font-weight:600}
.picker__item .logo{border-radius:50%}
.picker__remove{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;text-decoration:none;font-size:1.25rem;color:var(--fg-2)}
.picker__remove:hover{background:var(--sunk);color:var(--fg)}
.share{display:grid;gap:6px;margin:var(--s5) 0 var(--s6);max-width:560px}
.share__label{font-weight:600;font-size:.875rem}
.share__row{display:flex;gap:var(--s2)}
.share__row input{flex:1;min-width:0;font-family:var(--font-mono);font-size:.8125rem;background:var(--sunk)}
.compare-wrap{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.compare-table{width:100%;border-collapse:collapse;table-layout:fixed}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);font-size:.9375rem}
.compare-table tbody tr:last-child>*{border-bottom:0}
.compare-table tbody th{width:180px;font:600 .75rem/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--sunk)}
.compare-table thead th{background:var(--surface);position:sticky;top:68px;z-index:1;border-bottom:1px solid var(--border-strong)}
.compare-table__corner{background:var(--sunk);width:180px}
.compare-table__tool{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);font:600 1.125rem/1.2 var(--font-display)}
.compare-table__tool a{text-decoration:none}
.compare-table__tool a:hover{text-decoration:underline}
.compare-table td p+p{margin-top:var(--s2)}
.compare-table .bullets{gap:6px}
.unconfirmed{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);background:var(--warn-bg);color:var(--warn-fg);font:600 .75rem/1.5 var(--font-mono)}
.mini-ratings{margin:0;display:grid;gap:6px}
.mini-ratings div{display:flex;justify-content:space-between;gap:var(--s3)}
.mini-ratings dt{color:var(--muted);font-size:.8125rem}
.mini-ratings dd{margin:0;font-size:.8125rem;text-align:right}
@media(max-width:760px){
  .compare-wrap{border:0;background:none;overflow:visible}
  .compare-table,.compare-table tbody,.compare-table tr,.compare-table td,.compare-table tbody th{display:block;width:100%}
  .compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare-table tr{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--s4);overflow:hidden}
  .compare-table tbody th{border-bottom:1px solid var(--border)}
  .compare-table td{padding:var(--s4)}
  .compare-table td::before{content:attr(data-tool);display:block;font:600 1rem/1.3 var(--font-display);margin-bottom:6px;color:var(--fg)}
  .compare-heads{display:grid!important}
}
.compare-heads{display:none;gap:var(--s3);margin-bottom:var(--s5)}
.compare-heads li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);list-style:none}

/* Submit */
.submit{display:grid;gap:var(--s7);padding-bottom:var(--s4)}
@media(min-width:960px){.submit{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start}}
.submit__aside{display:grid;gap:var(--s5)}
@media(min-width:960px){.submit__aside{position:sticky;top:100px}}
.steps{list-style:none;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--border);counter-increment:s}
.steps li::before{content:counter(s);width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font:600 .75rem/1 var(--font-mono)}
.notice{display:block;padding:var(--s4);border-radius:var(--r);font-weight:500}
.notice.is-shown{display:block}
.notice--error{background:var(--accent-soft);color:oklch(0.4 0.13 35)}
.notice--ok{background:var(--ok-bg);color:var(--ok-fg)}

/* Compare tray */
.compare-tray{position:fixed;left:50%;bottom:var(--s4);z-index:var(--z-tray);width:min(760px,calc(100% - 24px));transform:translate(-50%,0);background:var(--term);color:var(--term-text);border-radius:var(--r-lg);box-shadow:0 20px 50px -12px oklch(0.2 0.03 195 / .5);padding:var(--s3) var(--s3) var(--s3) var(--s5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);animation:tray-in .3s var(--ease)}
.compare-tray[hidden]{display:none}
.compare-tray__text{flex:1;min-width:180px;font:500 .875rem/1.4 var(--font-mono)}
.compare-tray__text strong{color:var(--term-ok);font-weight:600}
.compare-tray__hint{font:400 .75rem/1.4 var(--font-mono);color:var(--term-warn);width:100%;order:3}
.compare-tray__hint:empty{display:none}
.compare-tray__actions{display:flex;gap:var(--s2)}
.compare-tray .btn:not(.btn--primary){--bb:transparent;--bf:var(--term-text);--bd:var(--term-line)}
.compare-tray .btn:not(.btn--primary):hover{--bb:var(--term-line)}
.compare-tray :focus-visible{outline-color:var(--term-warn)}
.compare-tray .btn--primary[aria-disabled="true"]{opacity:.5;pointer-events:none}
@keyframes tray-in{from{opacity:0;transform:translate(-50%,16px)}}

/* Reveal */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .tool-card:hover,.pin:hover{transform:none}
  .tool-card:hover .tool-card__media img{transform:none}
}

/* Specificity fixes */
.search .search__input{padding-left:40px;border:0;background:transparent;box-shadow:none}
.tool-card .tool-card__head{margin-top:0;align-items:flex-start;padding-top:var(--s3)}
.tool-card .logo--md{margin-top:calc(-26px - var(--s3))}

/* ==========================================================================
   WordPress additions (states the static mockup does not cover)
   ========================================================================== */

/* Admin bar offset for sticky header and anchors */
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:600px){.admin-bar .site-header{top:0}}
.admin-bar{scroll-padding-top:120px}

main:focus{outline:none}
.brand__name{white-space:nowrap}
body.has-tray{padding-bottom:120px}
.section--flush{padding-top:0}
.stack-head{margin-bottom:var(--s6)}
.section__head--tight{margin-bottom:var(--s4)}
.section__head--tight h2{margin:0}
.rail{list-style:none}
.rail>li{display:flex}
.rail>li>.tool-card{flex:1}
.page-content{padding-bottom:var(--s4)}
.compare-toggle .is-on{display:none}
.buybox .compare-toggle{min-height:44px}

/* Cards: generated cover SVG fills the media box */
.tool-card__media .cover__svg,.tool-card__media .cover__img,.gallery__main svg{display:block;width:100%;height:100%}
.gallery__main svg{aspect-ratio:1024/538;height:auto}
.gallery__note{padding:var(--s2) var(--s4);font:500 .75rem/1.4 var(--font-mono);color:var(--muted);background:var(--surface);border-top:1px solid var(--border)}
.logo:not(.logo--img){font:600 1rem/1 var(--font-display);color:var(--fg);background:var(--surface);border:1.5px solid var(--fg)}
.logo--lg:not(.logo--img){font-size:1.75rem}
.logo--sm:not(.logo--img){font-size:.8125rem}
.rating strong{font-variant-numeric:tabular-nums}
.editorial-chip--scored{border-style:solid;border-color:var(--pin);color:var(--fg)}
.card{position:relative}

/* Status variants */
.status--hands-on{background:var(--ok-bg);color:var(--ok-fg)}
.status--listed{background:var(--ok-bg);color:var(--ok-fg)}
.status--needs-verification{background:var(--warn-bg);color:var(--warn-fg)}
.status--discontinued{background:var(--sunk);color:var(--muted)}
.status--hands-on::before{content:"✓";width:auto;height:auto;background:none;border-radius:0}

/* Sponsored + demo labels */
.sponsored{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r-sm);font:600 .6875rem/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--fg);color:var(--surface)}
.demo-flag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--r-sm);font:600 .6875rem/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;background:var(--warn-bg);color:var(--warn-fg);border:1px solid currentColor}
.glance .demo-flag{background:transparent;color:var(--term-warn)}
.unconfirmed.buybox__sub{justify-self:start}

/* Notices */
.notice{margin-bottom:var(--s5)}
.notice[hidden]{display:none}
.notice h2{font-size:1.25rem;margin-bottom:var(--s2)}
.notice p+p{margin-top:var(--s2)}
.notice ul{margin:var(--s2) 0 0;padding-left:1.2em}
.notice a{color:inherit}
.notice--warn{background:var(--warn-bg);color:var(--warn-fg)}
.notice--muted{background:var(--sunk);color:var(--fg-2)}
.notice--success{background:var(--ok-bg);color:var(--ok-fg)}
.notice:focus{outline:2.5px solid var(--accent);outline-offset:3px}
.tool .notice{margin:var(--s5) 0 0}

/* Catalog: counts, chips, pagination, empty state */
.filters__summary>span{display:inline-flex;align-items:center;gap:var(--s2)}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:oklch(0.99 0.005 60);font:600 .75rem/1 var(--font-mono)}
.filters__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.active-filters{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:0 0 var(--s4)}
.chip--removable{gap:6px;background:var(--fg);color:var(--surface);border-color:var(--fg)}
a.chip--removable:hover{background:oklch(0.33 0.03 195);border-color:oklch(0.33 0.03 195)}
.link-reset{font-size:.875rem;font-weight:600}
.empty__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.empty p:last-child{margin-bottom:0}
.empty .tags{margin-top:var(--s2)}
.empty h2{font-size:1.375rem;margin-bottom:var(--s2)}
.page-numbers .dots{border:0;background:none}
.page-numbers .prev,.page-numbers .next{padding:0 var(--s4);font-family:var(--font-body)}

/* Tool page */
.tool__heading{min-width:0}
.gallery{min-width:0}
.gallery__thumbs{flex-wrap:wrap}
.buybox__sub.unconfirmed{display:inline-block}
.buybox__rating .rating{flex-wrap:wrap}
.tags .status-link:hover .status{filter:brightness(.97)}
.editorial__mark{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--border-strong);display:grid;place-items:center;font:600 1.25rem/1 var(--font-mono);color:var(--muted)}
.editorial--scored{border-style:solid;border-color:var(--border);background:var(--surface)}
.editorial--scored .editorial__score{border:1.5px solid var(--pin);color:var(--fg);background:var(--pin-bg);font-size:1.125rem}
.editorial__max{font-size:.6875rem;color:var(--muted)}
.editorial--scored .facts{margin-top:var(--s3)}
.editorial--scored .facts dd{text-align:right}
@media(max-width:520px){.editorial{grid-template-columns:1fr}}
.block>.muted,.block>.small{max-width:68ch}
.sources+.muted,.block .small+.sources{margin-top:var(--s3)}
.prose>*{margin:0}
.prose a{color:var(--fg)}
.prose h2{font-size:1.5rem;margin-top:var(--s4);color:var(--fg)}
.prose h3{margin-top:var(--s3);color:var(--fg)}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:6px}
.prose--page{max-width:72ch}
.alt>div{min-width:0}

/* At a glance (terminal) */
.glance .muted{color:var(--term-dim)}
.glance .ratings{margin-bottom:0;gap:0}
.glance .mini-ratings dt,.glance .mini-ratings dd{font-size:inherit}
.glance .mini-ratings dt{color:var(--term-dim)}
.glance .mini-ratings .muted{color:var(--term-warn)}
.glance .stars{color:var(--term-line)}
.glance .facts dd{font-weight:400}
.glance__title .screen-reader-text{text-transform:none}

/* Ratings mini table (compare, glance) */
.ratings dd{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 6px}

/* Reviews */
.reviews .section__head{margin-bottom:var(--s4)}
.reviews__summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.review-list{list-style:none;padding:0;margin:0 0 var(--s5);display:grid;gap:var(--s3)}
.review{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.review__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-bottom:var(--s2)}
.review__author{font:600 1.0625rem/1.3 var(--font-display)}
.review__text{color:var(--fg-2);display:grid;gap:var(--s2)}
.review__shots{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.review__shots a{display:block;width:150px;aspect-ratio:16/10;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .15s var(--ease)}
.review__shots a:hover{border-color:var(--fg)}
.review__shots img{width:100%;height:100%;object-fit:cover}
.review-form>summary{list-style:none;display:inline-flex;margin-bottom:var(--s4)}
.review-form>summary::-webkit-details-marker{display:none}
.review-form.is-highlighted .form{box-shadow:0 0 0 3px oklch(0.53 0.15 40 / .35);transition:box-shadow .3s var(--ease)}
.comment-form p{margin:0}
.comment-form .field label{display:block}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{width:100%}
.comment-form .form-submit{margin:0}
.logged-in-as{font-size:.875rem;color:var(--muted)}
.shots-error{color:var(--con);font-weight:600;font-size:.875rem}
[aria-invalid="true"]{border-color:var(--con)!important}

/* Anti-bot quick check + Turnstile */
.antibot__q{display:grid;gap:6px;margin:0}
.antibot__q label{font-family:var(--font-mono)}
.antibot .antibot__input{width:96px}
.cf-turnstile{margin-top:var(--s2)}

/* Compare page */
.add-tool{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.compare__picker{margin-bottom:var(--s3)}
.compare-heads__name{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.compare-heads__name a{text-decoration:none}
.compare-table thead th .btn{white-space:normal;text-align:left}
.admin-bar .compare-table thead th{top:100px}
.empty--compare{margin-top:var(--s4)}

/* Submit */
.submit__main{min-width:0}
.form .notice{margin:0}

/* Generic page / 404 */
.not-found .search{max-width:560px}
.not-found__links{margin-top:var(--s5)}
.page-numbers:not(ul){list-style:none}

@media(max-width:640px){
  .tool-card__foot{padding:var(--s4)}
  .tool-card__body{padding:0 var(--s4) var(--s4)}
  .buybox__rating{justify-content:flex-start}
  .share__row{flex-wrap:wrap}
  .compare-tray{padding:var(--s3)}
}
@media(prefers-reduced-motion:reduce){.review-form.is-highlighted .form{transition:none}}

/* Card: verification date + product link (above the card-wide link overlay) */
.tool-card__verify{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;font:500 .75rem/1.4 var(--font-mono,ui-monospace,monospace);color:var(--muted)}
.tool-card__site{position:relative;z-index:2;color:var(--fg-2);text-decoration:underline;text-underline-offset:2px}
.tool-card__site:hover{color:var(--accent)}

.tool-card__media-link{display:block;cursor:pointer;position:absolute;inset:var(--s4)}
.tool-card__media-link:hover .cover__img{filter:brightness(1.05)}

/* Category line icons */
.cat-icon,.tool-card__media .badge .cat-icon{width:16px;height:16px;flex:none;display:inline-block}
.badge .cat-icon{color:var(--pin)}
.badge::before{display:none}
.check__icon{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--pin-bg);color:var(--pin);flex:none}
.cat-index__sw{display:grid;place-items:center;width:28px;height:28px;border-radius:8px}
.cat-index__sw .cat-icon{width:16px;height:16px;color:var(--surface)}
.cat-index__sw.mono{background:var(--pin-bg);color:var(--pin);font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid oklch(0.5 0.08 185 / .25)}
/* Covers fit inside the card instead of being cropped; the letterbox takes the category tint */
.tool-card__media{background:var(--pin-bg)}
.tool-card__media .cover__img{object-fit:contain;object-position:center;padding:5% 6%}
/* Neighbouring cards never share a letterbox tint: cycle three tints by grid position */
.card-grid > :nth-child(3n+2) .tool-card__media{background:var(--sunk)}
.card-grid > :nth-child(3n) .tool-card__media{background:oklch(0.95 0.03 calc(var(--hue, 185) + 60))}
/* Category badge in solid category colour so it reads on any screenshot */
.tool-card__media .badge{background:var(--surface);color:var(--fg)}
.tool-card__media .badge .cat-icon{color:var(--pin)}
/* Tag row lives on white above the cover, not on top of it */
.tool-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s4);background:var(--surface);border-bottom:1px solid var(--border);border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;min-height:44px}
.tool-card__top .badge,.tool-card__top .ribbon{position:static;box-shadow:none}
.tool-card__top .badge{padding:0;background:none;font-size:.8125rem}
.tool-card__media{border-radius:0}
.tool-card__top a{text-decoration:none;color:inherit}
.tool-card__top .badge:hover{color:var(--pin)}
.tool-card__top .ribbon:hover{background:var(--accent)}
/* Tags look like chips: outlined, cursor hand, lift + tint on hover/focus */
.tool-card__top .badge{padding:5px 11px 5px 8px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--pin-bg);color:var(--fg);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),transform .12s var(--ease),box-shadow .15s var(--ease)}
.tool-card__top .badge:hover,.tool-card__top .badge:focus-visible{background:var(--surface);border-color:var(--pin);color:var(--pin);transform:translateY(-1px);box-shadow:0 2px 6px oklch(0 0 0 / .08)}
.tool-card__top .badge:active{transform:translateY(0)}
.tool-card__top .ribbon{cursor:pointer;transition:background .15s var(--ease),transform .12s var(--ease)}
.tool-card__top .ribbon:hover{transform:translateY(-1px)}
.tool-card__top a:focus-visible{outline:2px solid var(--pin);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tool-card__top .badge,.tool-card__top .ribbon{transition:none;transform:none}}
.tool-card__top .ribbon{color:var(--surface)}
/* Card logo sits on the tinted letterbox: ink outline + white plate so it never merges with the cover */
.tool-card__head .logo{border-color:var(--fg);box-shadow:0 0 0 3px var(--surface)}

/* ---------- Profile-driven tool page ---------- */
.tool--profile .tool__header--profile h1{font-size:clamp(1.75rem,3.6vw,2.75rem);letter-spacing:-.02em}
.verdict{margin:var(--s4) 0 var(--s3);padding:var(--s4);border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r) var(--r) 0}
.verdict p{margin:0}.verdict p+p{margin-top:6px}
.byline{margin:0}
.facts--quick{display:grid;grid-template-columns:1fr;gap:10px}
.facts--quick div{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:baseline}
.facts--quick dt{font:500 .72rem/1.3 var(--font-mono);color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.facts--quick dd{margin:0;font-size:.9375rem}
.facts--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 20px;margin:var(--s3) 0}
.facts--grid div{padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.facts--grid dt{font:500 .72rem/1.3 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.facts--grid dd{margin:4px 0 0}
.toc--inline{margin:0 0 var(--s5)}
.toc__details{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:10px 14px}
.toc__details summary{cursor:pointer;font:600 .875rem var(--font-body)}
.toc__details ol{margin:10px 0 0;padding:0 0 0 18px;columns:2;column-gap:24px;font-size:.9rem}
.toc__details li{break-inside:avoid;margin:3px 0}
.glance__toc--long a{display:block;padding:6px 0;border-bottom:1px dashed var(--border);font-size:.875rem}
.block h3{font-size:1.125rem;margin:var(--s5) 0 var(--s2)}
.lede{font-size:1.0625rem}
.eyebrow{font:500 .72rem/1.3 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s3) 0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
table.data th,table.data td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
table.data thead th{font:600 .72rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--sunk)}
table.data tbody tr:last-child td,table.data tbody tr:last-child th{border-bottom:0}
table.plans th[scope=row]{white-space:nowrap}
ul.tight{margin:0;padding-left:16px}ul.tight li{margin:2px 0}
.fit{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font:600 .75rem/1.4 var(--font-mono);white-space:nowrap}
.fit--good{background:var(--ok-bg);color:var(--ok-fg)}.fit--conditional{background:var(--warn-bg);color:var(--warn-fg)}.fit--poor{background:oklch(0.95 0.04 30);color:var(--con)}
.src{font:500 .72rem/1 var(--font-mono);color:var(--muted);text-decoration:underline dotted;margin-left:4px}
.kind{font:500 .7rem/1 var(--font-mono);color:var(--muted);border:1px dashed var(--border-strong);border-radius:4px;padding:1px 5px;margin-left:4px}
.limit{color:var(--con)}
.chip--sm{font-size:.72rem;padding:2px 8px}
.usecase,.feature{padding:var(--s4);border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin:var(--s3) 0}
.usecase h3,.feature h3{margin-top:0}
.steps{padding-left:22px}.steps li{margin:6px 0}
.prompt{margin:var(--s4) 0;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--term);color:var(--term-text);overflow:hidden}
.prompt figcaption{font:500 .75rem/1.4 var(--font-mono);color:var(--term-dim);padding:8px 12px;border-bottom:1px solid var(--term-line)}
.prompt pre{margin:0;padding:12px 14px;white-space:pre-wrap;font:400 .85rem/1.6 var(--font-mono);max-height:320px;overflow:auto}
.prompt .btn{margin:10px 12px}
.faq{border-bottom:1px solid var(--border);padding:6px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline}
.faq summary::before{content:"+";font:600 1rem/1 var(--font-mono);color:var(--accent);flex:none}
.faq[open] summary::before{content:"–"}
.faq summary h3{display:inline;font-size:1rem;margin:0}
.faq p{margin:6px 0 10px 22px}
@media (max-width:720px){.toc__details ol{columns:1}.facts--quick div{grid-template-columns:1fr}.tool--profile .tool__aside{display:none}}
/* Profile page: grid children may shrink so wide tables scroll inside .table-wrap instead of overlapping the aside */
.tool__main,.tool__layout>*,.block,.split>*{min-width:0}
.tool--profile .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--s5)}
.tool--profile .bullets li,.tool--profile p,.tool--profile h3{overflow-wrap:anywhere}
@media (min-width:1024px){.tool--profile .toc--inline{display:none}}
.tool--profile .showcase{align-items:start}

/* Plan cards replace the wide plan table */
.plan-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s4);margin:var(--s3) 0}
.plan{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:var(--s4);display:flex;flex-direction:column;gap:6px;min-width:0}
.plan header{border-bottom:1px dashed var(--border);padding-bottom:8px;margin-bottom:4px}
.plan h4{margin:0;font:600 1rem var(--font-display)}
.plan__price{margin:4px 0 0;font:600 1.25rem var(--font-display);letter-spacing:-.01em}
.plan__billing{font-size:.72rem;color:var(--muted);margin:2px 0 0}
.plan__for{font-size:.875rem;margin:0}
.plan .eyebrow{margin:8px 0 2px}
.plan ul.tight{font-size:.875rem;padding-left:16px;margin:0}
.more{font-size:.875rem}.more summary{cursor:pointer;color:var(--accent);font:500 .8rem var(--font-mono);padding:4px 0}
.more ul.tight{margin-top:4px}

.to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--surface);display:grid;place-items:center;box-shadow:0 6px 18px oklch(0 0 0 / .18);z-index:60;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.to-top[hidden]{display:grid;opacity:0;pointer-events:none;transform:translateY(8px)}
.to-top svg{width:20px;height:20px}
.to-top:hover{background:var(--accent)}
body.has-tray .to-top{bottom:92px}
.gallery .verdict{margin-top:var(--s4)}
/* Compact quick-facts aside so it matches the cover column height */
.tool--profile .buybox{padding:var(--s4)}
.tool--profile .facts--quick{grid-template-columns:1fr 1fr;gap:8px 14px}
.tool--profile .facts--quick div{grid-template-columns:1fr;gap:2px;padding:6px 0;border-bottom:1px dashed var(--border)}
.tool--profile .facts--quick div:nth-child(-n+2){grid-column:1 / -1}
.tool--profile .facts--quick dd{font-size:.875rem;line-height:1.35}
.tool--profile .buybox__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--s3)}
.tool--profile .buybox__actions .btn--primary{grid-column:1 / -1}
.tool--profile .buybox__actions .btn{min-height:40px;font-size:.875rem}
.tool--profile .buybox > p.small{margin:var(--s3) 0 0;font-size:.72rem}

/* Search typeahead */
.suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:0 14px 34px oklch(0 0 0 / .14);overflow:hidden;text-align:left}
.suggest__item{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--fg);border-bottom:1px solid var(--border)}
.suggest__item:hover,.suggest__item.is-active{background:var(--sunk)}
.suggest__item img,.suggest__mark{width:28px;height:28px;border-radius:7px;flex:none;object-fit:contain;background:var(--surface);border:1px solid var(--border)}
.suggest__mark{display:grid;place-items:center;font:600 .8rem var(--font-display);color:var(--pin);background:var(--pin-bg)}
.suggest__text{display:flex;flex-direction:column;min-width:0}
.suggest__text strong{font-weight:600;font-size:.9375rem}.suggest__text small{font:400 .72rem var(--font-mono);color:var(--muted)}
.suggest mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px}
.suggest__all{display:block;padding:10px 14px;font:500 .8125rem var(--font-body);color:var(--accent);text-decoration:none;background:var(--bg)}
.suggest__all:hover{text-decoration:underline}
.search:focus-within,.catalog__bar:focus-within{position:relative;z-index:60}
.suggest{z-index:70}

/* Header search (hidden on the home page and the catalog, which have their own) */
.search--header{padding:3px;border-radius:999px;box-shadow:none;width:min(320px,34vw);margin-right:var(--s3)}
.search--header .search__input{height:38px;font-size:.9rem}
.search--header .suggest{width:min(420px,calc(100vw - 32px));right:auto;left:0}
.site-header:focus-within{z-index:calc(var(--z-header) + 1)}
@media (min-width:1081px){.search--header-mobile-only{display:none}}
@media (max-width:1080px){
  .search--header{display:flex;width:100%;margin:0 0 var(--s2);border-radius:var(--r)}
  .search--header .suggest{position:static;width:100%;margin-top:6px;box-shadow:none}
}
.nav__list a,.nav__cta{white-space:nowrap}



/* News + videos */
.newslist{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--s4)}
.newslist__item{display:flex;flex-direction:column;gap:10px;height:100%;padding:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);overflow:hidden;text-decoration:none;color:var(--fg);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.newslist__item:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.newslist__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sunk)}
.newslist__img--empty{display:grid;place-items:center;font:600 2rem var(--font-display);color:var(--pin);background:var(--pin-bg)}
.newslist__text{display:flex;flex-direction:column;gap:4px;padding:0 14px 14px}
.newslist__title{font-weight:600;font-size:.9375rem;line-height:1.35}
.newslist__meta{font-size:.72rem;color:var(--muted)}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--s4);margin-top:var(--s3)}
.video{margin:0}.video__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--sunk);border:1px solid var(--border)}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:.875rem}.video figcaption .mono{font-size:.72rem}

/* Inline screenshots */
.shot{margin:var(--s4) 0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.shot a{display:block;line-height:0}
.shot__img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shot figcaption{padding:8px 12px;font-size:.8rem;color:var(--fg-2);border-top:1px solid var(--border)}
.shot figcaption .mono{font-size:.7rem}
.newslist__logo{width:56px;height:56px;border-radius:14px;box-shadow:0 2px 8px oklch(0 0 0 / .12)}

/* Token calculator */
.calc__stats{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin:var(--s4) 0 0;padding:var(--s3) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.calc__stats div{display:grid;gap:2px}
.calc__stats dt{font:600 .7rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.calc__stats dd{margin:0;font:600 1.05rem/1.2 var(--font-display,var(--font-body))}
.calc__layout{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:var(--s5);align-items:start;margin-top:var(--s5)}
.calc__side{position:sticky;top:84px;display:grid;gap:var(--s3);border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:var(--s4);max-height:calc(100vh - 100px);overflow:auto}
.calc__side-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.calc__side-head .eyebrow{margin:0}
.calc__label{display:block;margin:0;font:600 .72rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.calc__field{display:grid;gap:6px;min-width:0}
.calc__field input[type=number]{height:44px;border:1px solid var(--border-strong);border-radius:var(--r);padding:0 var(--s3);font:inherit;font-size:1rem;color:var(--fg);background:var(--surface);width:100%}
.calc__field input[type=range]{width:100%;accent-color:var(--pin)}
.calc__presets{display:grid;gap:6px}
.calc__preset{display:grid;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--fg);font:inherit;cursor:pointer;min-width:0;transition:border-color .15s var(--ease),background .15s var(--ease)}
.calc__preset strong{font:600 .9rem/1.3 var(--font-body)}
.calc__preset-desc{font-size:.78rem;color:var(--fg-2);line-height:1.35}
.calc__preset .mono{font-size:.68rem;color:var(--muted)}
.calc__preset:hover{border-color:var(--fg);background:var(--sunk)}
.calc__preset[aria-pressed=true]{background:var(--pin-bg);border-color:var(--pin);box-shadow:inset 0 0 0 1px var(--pin)}
.calc__preset[aria-pressed=true] .mono{color:var(--pin)}
.calc__seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.calc__seg button{flex:1;min-height:40px;padding:0 12px;border:0;background:transparent;font:500 .875rem/1 var(--font-body);color:var(--fg-2);cursor:pointer;white-space:nowrap}
.calc__seg button+button{border-left:1px solid var(--border)}
.calc__seg button[aria-pressed=true]{background:var(--fg);color:var(--surface)}
.calc__seg--sm button{min-height:36px;font-size:.8rem}
.calc__results{display:grid;gap:var(--s3);min-width:0}
.calc__summary{margin:0;padding:var(--s3) var(--s4);background:var(--pin-bg);border-left:3px solid var(--pin);border-radius:0 var(--r) var(--r) 0;font-size:1rem}
.calc__summary:empty{display:none}
.calc__toolbar{display:grid;gap:var(--s2)}
.calc__toolbar-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.calc__toolbar-row select{height:36px;border:1px solid var(--border-strong);border-radius:var(--r);padding:0 var(--s2);font:inherit;font-size:.875rem;background:var(--surface);color:var(--fg)}
.calc__toolbar-row label{display:inline-flex;align-items:center;gap:6px}
.calc__chips{display:flex;flex-wrap:wrap;gap:6px}
.calc__chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--fg);font:500 .85rem/1 var(--font-body);cursor:pointer}
.calc__chip:hover{background:var(--sunk);border-color:var(--fg)}
.calc__chip[aria-pressed=true]{background:var(--fg);color:var(--surface);border-color:var(--fg)}
.calc__chip .calc__logo{width:18px;height:18px;padding:1px;border-radius:4px}
.calc__vendor{display:inline-flex;align-items:flex-start;gap:8px}
.calc__logo{width:28px;height:28px;border-radius:7px;object-fit:contain;background:var(--surface);border:1px solid var(--border);padding:2px;flex:none}
.calc__logo--mono{display:inline-flex;align-items:center;justify-content:center;font:700 .8rem/1 var(--font-mono);color:var(--fg);background:var(--sunk)}
.calc__notes{display:block;margin-top:4px;max-width:34ch;white-space:normal}
.calc__table th[scope=row]{min-width:220px;font-weight:500}
.calc__table td{white-space:nowrap;font-variant-numeric:tabular-nums}
.calc__table td:first-child{width:32px;padding-right:0}
.calc__pick input{width:18px;height:18px;accent-color:var(--pin);cursor:pointer}
.calc__best td,.calc__best th{background:var(--pin-bg)}
.calc__tag-best{color:var(--pin);font-weight:600}
.calc__bars{display:grid;gap:8px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:var(--s3)}
.calc__bar{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:var(--s3);align-items:center}
.calc__bar-label{display:flex;align-items:center;gap:8px;font-size:.85rem;min-width:0}
.calc__bar-label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc__bar-track{position:relative;height:28px;background:var(--sunk);border-radius:6px;overflow:hidden}
.calc__bar-fill{height:100%;background:var(--fg-2);border-radius:6px;transition:width .3s var(--ease)}
.calc__bar-fill.is-best{background:var(--pin)}
.calc__bar-val{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 .8rem/1 var(--font-mono);color:var(--fg)}
.calc__shortlist{display:grid;gap:var(--s2)}
.calc__shortlist-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3)}
.calc__card{position:relative;border:1px solid var(--pin);border-radius:var(--r);background:var(--surface);padding:var(--s4);display:grid;gap:8px}
.calc__card-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;font-size:1.1rem;line-height:1}
.calc__card-price{margin:0;font:700 1.5rem/1.1 var(--font-display,var(--font-body))}
.calc__card-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:0}
.calc__card-facts dt{font:600 .65rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.calc__card-facts dd{margin:0;font-variant-numeric:tabular-nums}
@media (max-width:900px){.calc__layout{grid-template-columns:1fr}.calc__side{position:static;max-height:none}.calc__presets{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media (max-width:600px){.calc__bar{grid-template-columns:1fr}.calc__table th[scope=row]{min-width:180px}}
.calc [hidden]{display:none!important}

/* Extensions */
.ext-icon{width:16px;height:16px;flex:none}
.ext__types{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);margin:0 0 var(--s4)}
.ext-type{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--fg);text-decoration:none;transition:border-color .15s var(--ease),background .15s var(--ease)}
.ext-type .ext-icon{width:22px;height:22px;color:var(--pin)}
.ext-type>span{display:grid;gap:2px;min-width:0}
.ext-type strong{font-size:.95rem}
.ext-type:hover{border-color:var(--fg);background:var(--sunk)}
.ext-type.is-active{background:var(--pin-bg);border-color:var(--pin);box-shadow:inset 0 0 0 1px var(--pin)}
.ext-type__n{font-size:.8rem;color:var(--muted)}
.ext__bar{display:grid;gap:var(--s3);margin:0 0 var(--s3)}
.ext__hosts{display:flex;flex-wrap:wrap;gap:6px}
.ext__hosts .tag{text-decoration:none}
.ext__hosts .tag.is-active{background:var(--fg);color:var(--surface);border-color:var(--fg)}
.ext__hosts .tag.is-active .muted{color:inherit;opacity:.7}
.ext-card{display:grid;gap:8px;padding:var(--s4);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);min-width:0}
.ext-card__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.ext-card .badge,.ext-card .ribbon,.ext-head .badge,.ext-head .ribbon{position:static;box-shadow:none}
.ext-badge{padding:5px 11px 5px 8px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--pin-bg);color:var(--fg);text-decoration:none}
.ext-card--mcp-server .ext-badge{background:oklch(0.94 0.04 60)}
.ext-card--rules .ext-badge{background:var(--sunk)}
.ext-card--skill .ext-badge{background:oklch(0.94 0.05 280)}
.ribbon--official{background:var(--pin);color:var(--surface)}
.ext-card__name{margin:0;font-size:1.1rem}
.ext-card__name a{text-decoration:none;color:var(--fg)}
.ext-card__name a:hover{text-decoration:underline}
.ext-card__by{margin:-4px 0 0}
.ext-card__desc{margin:0;color:var(--fg-2);font-size:.95rem}
.ext-card__hosts{margin:0;font-size:.85rem}
.ext-single .crumbs{margin:0 0 var(--s4)}
.ext-head{display:grid;gap:var(--s3);padding-bottom:var(--s5);border-bottom:1px solid var(--border);margin-bottom:var(--s5)}
.ext-head__badges{display:flex;gap:var(--s2);align-items:center}
.ext-head h1{margin:0}
.ext-head__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ext-body{display:grid;gap:var(--s5);max-width:860px}
.ext-body .block h2{margin-top:0}
.codeblock{border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;background:var(--surface);margin-top:var(--s3)}
.codeblock__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:6px 6px 6px 12px;background:var(--sunk);border-bottom:1px solid var(--border)}
.codeblock pre{margin:0;padding:var(--s3) var(--s4);overflow:auto;font:.85rem/1.5 var(--font-mono);max-height:420px}
.steps code,.ext-body code{font:.9em var(--font-mono);background:var(--sunk);padding:1px 5px;border-radius:4px}

/* Homepage hub cards */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s3)}
.hub-card{display:grid;gap:6px;padding:var(--s4);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--fg);text-decoration:none;transition:border-color .15s var(--ease),transform .12s var(--ease)}
.hub-card:hover{border-color:var(--fg);transform:translateY(-2px)}
.hub-card__kicker{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pin)}
.hub-card strong{font-size:1.05rem}
.hub-card .muted{font-size:.9rem}

/* Prompts */
.prompt-card{display:grid;gap:8px;padding:var(--s4);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);min-width:0}
.prompt-card__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.prompt-card .badge,.prompt-card .ribbon{position:static;box-shadow:none}
.ribbon--editorial{background:var(--sunk);color:var(--fg)}
.prompt-card__name{margin:0;font-size:1.05rem}
.prompt-card__name a{text-decoration:none;color:var(--fg)}
.prompt-card__name a:hover{text-decoration:underline}
.prompt-card__text{margin:0;padding:var(--s3);background:var(--sunk);border-radius:var(--r-sm);font:.82rem/1.5 var(--font-mono);white-space:pre-wrap;word-break:break-word;max-height:9.5em;overflow:hidden;position:relative}
.prompt-card__text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5em;background:linear-gradient(transparent,var(--sunk))}
.prompt-card__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.prompt-box pre{white-space:pre-wrap;word-break:break-word;max-height:none}
.prompt-grid,.ext-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--s4)}

/* Benchmarks */
.bench__task{padding-bottom:var(--s5);border-bottom:1px solid var(--border)}
.bench__table td,.bench__table th{vertical-align:middle}
.bench__pending td{color:var(--muted);font-style:italic}
.bench__raw{margin-top:var(--s3);border:1px solid var(--border);border-radius:var(--r);padding:var(--s2) var(--s3);background:var(--surface)}
.bench__raw pre{white-space:pre-wrap;word-break:break-word;background:var(--sunk);padding:var(--s3);border-radius:var(--r-sm)}

/* Extensions & prompts — visual cards */
.ext-card{padding:0;overflow:hidden;--hue:185}
.ext-card--skill{--hue:280}.ext-card--plugin{--hue:185}.ext-card--mcp-server{--hue:60}.ext-card--rules{--hue:230}
.ext-card__cover{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/7;background:
  radial-gradient(circle at 20% 30%,oklch(0.97 0.03 var(--hue)),transparent 55%),
  repeating-linear-gradient(135deg,oklch(0.93 0.035 var(--hue)) 0 2px,transparent 2px 14px),
  oklch(0.95 0.03 var(--hue));border-bottom:1px solid var(--border);text-decoration:none}
.ext-grid > :nth-child(3n+2) .ext-card__cover{background:radial-gradient(circle at 80% 70%,oklch(0.97 0.03 var(--hue)),transparent 55%),repeating-radial-gradient(circle at 50% 50%,oklch(0.93 0.035 var(--hue)) 0 2px,transparent 2px 18px),oklch(0.955 0.025 var(--hue))}
.ext-grid > :nth-child(3n) .ext-card__cover{background:linear-gradient(135deg,oklch(0.96 0.03 var(--hue)),oklch(0.92 0.04 calc(var(--hue) + 40)))}
.ext-card__glyph{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-1)}
.ext-card__glyph .ext-icon{width:32px;height:32px;color:oklch(0.45 0.09 var(--hue))}
.ext-card__hosts-row{position:absolute;left:var(--s3);bottom:var(--s3);display:flex;gap:4px}
.ext-card__host .logo{width:28px;height:28px;font-size:.6rem;border:1px solid var(--border-strong);background:var(--surface)}
.ext-card__host .logo img{width:100%;height:100%;object-fit:contain}
.ext-card__cover .ribbon{position:absolute;top:var(--s3);right:var(--s3)}
.ext-card__body{display:grid;gap:8px;padding:var(--s4)}
.ext-card__lic{font-size:.7rem;color:var(--muted);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 8px}
.ext-card__stats{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;margin:4px 0 0;padding-top:8px;border-top:1px dashed var(--border)}
.ext-card__stats dt{font:600 .62rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ext-card__stats dd{margin:2px 0 0;font-size:.85rem;font-weight:600}

.prompt-card{padding:0;overflow:hidden;--hue:185}
.prompt-card--writing{--hue:40}.prompt-card--coding{--hue:230}.prompt-card--marketing{--hue:20}.prompt-card--data{--hue:200}.prompt-card--research{--hue:260}.prompt-card--productivity{--hue:185}.prompt-card--images{--hue:320}.prompt-card--video{--hue:350}.prompt-card--audio{--hue:140}.prompt-card--education{--hue:90}.prompt-card--business{--hue:210}.prompt-card--fun{--hue:300}
.prompt-card__head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:linear-gradient(135deg,oklch(0.96 0.03 var(--hue)),oklch(0.93 0.04 calc(var(--hue) + 30)));border-bottom:1px solid var(--border)}
.prompt-grid > :nth-child(3n+2) .prompt-card__head{background:repeating-linear-gradient(135deg,oklch(0.93 0.035 var(--hue)) 0 2px,transparent 2px 12px),oklch(0.955 0.025 var(--hue))}
.prompt-card__glyph{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--border-strong);flex:none}
.prompt-card__glyph svg{width:20px;height:20px;color:oklch(0.45 0.09 var(--hue))}
.prompt-card__labels{display:grid;gap:2px;flex:1;min-width:0}
.prompt-card__task{font-weight:600;font-size:.9rem;color:var(--fg);text-decoration:none}
.prompt-card__task:hover{text-decoration:underline}
.prompt-card__kind{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:oklch(0.45 0.09 var(--hue))}
.prompt-card__tool .logo{width:32px;height:32px;font-size:.65rem;border:1px solid var(--border-strong);background:var(--surface)}
.prompt-card__tool .logo img{width:100%;height:100%;object-fit:contain}
.prompt-card__name{margin:0;padding:var(--s3) var(--s4) 0;font-size:1.02rem}
.prompt-card__bubble{margin:8px var(--s4) 0;position:relative}
.prompt-card__bubble::before{content:"";position:absolute;left:18px;top:-7px;width:14px;height:14px;background:var(--sunk);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.prompt-card__text{margin:0;padding:var(--s3);background:var(--sunk);border:1px solid var(--border);border-radius:var(--r);font:.8rem/1.5 var(--font-mono);white-space:pre-wrap;word-break:break-word;max-height:8.5em;overflow:hidden;position:relative}
.prompt-card__text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5em;background:linear-gradient(transparent,var(--sunk))}
.prompt-card__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) var(--s4) var(--s4)}
.copy-prompt svg{width:14px;height:14px;margin-right:4px}

/* Benchmarks — scorecards and bars */
.bench__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin:var(--s3) 0}
.bench__card{display:grid;gap:4px;padding:var(--s4);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface)}
.bench__card--pending{opacity:.6;border-style:dashed}
.bench__card-agent{display:flex;align-items:center;gap:8px;font-weight:600}
.bench__card-agent .logo{width:28px;height:28px;font-size:.6rem}
.bench__card-agent .logo img{width:100%;height:100%;object-fit:contain}
.bench__big{font:700 1.8rem/1.1 var(--font-display,var(--font-body));margin:6px 0 0}
.bench__big small{font:500 .8rem/1 var(--font-mono);color:var(--muted);margin-left:4px}
.bench__kv{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:6px 0 0;font-size:.85rem}
.bench__kv dt{color:var(--muted);font:500 .65rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.bench__kv dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.bench__bars{display:grid;gap:6px;margin:var(--s3) 0}
.bench__bar{display:grid;grid-template-columns:140px 1fr;gap:var(--s3);align-items:center;font-size:.85rem}
.bench__bar-track{position:relative;height:22px;background:var(--sunk);border-radius:6px;overflow:hidden}
.bench__bar-fill{height:100%;background:var(--pin);border-radius:6px}
.bench__bar-val{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:600 .75rem/1 var(--font-mono)}

/* Hero infographics */
.page-head--viz{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:var(--s5);align-items:center}
@media (max-width:820px){.page-head--viz{grid-template-columns:1fr}}
.viz{margin:0;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);padding:var(--s4);display:grid;gap:var(--s3)}
.viz--donut{grid-template-columns:140px 1fr;align-items:center}
.viz--donut svg{width:140px;height:140px}
.viz__num{font:700 22px var(--font-display,var(--font-body));fill:var(--fg)}
.viz__sub{font:500 9px var(--font-mono);fill:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.viz__legend{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.85rem}
.viz__legend li{display:flex;align-items:center;gap:8px}
.viz__legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.viz__dot{width:10px;height:10px;border-radius:3px;flex:none}
.viz--bars{gap:8px}
.viz__bar{display:grid;grid-template-columns:minmax(90px,120px) 1fr auto;gap:10px;align-items:center;font-size:.82rem}
.viz__bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viz__bar-track{height:12px;background:var(--sunk);border-radius:4px;overflow:hidden}
.viz__bar-fill{display:block;height:100%;border-radius:4px}
.viz__bar-val{font-size:.75rem;color:var(--muted)}
@media (max-width:480px){.viz--donut{grid-template-columns:1fr;justify-items:center}}
/* Compare empty-state illustration */
.cmp-viz{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cmp-viz__slot{aspect-ratio:3/4;border:2px dashed var(--border-strong);border-radius:var(--r);display:grid;place-items:center;background:var(--surface);color:var(--muted);font:600 .8rem var(--font-mono);position:relative;overflow:hidden}
.cmp-viz__slot.is-filled{border-style:solid;background:var(--pin-bg);color:var(--fg)}
.cmp-viz__slot .logo{width:44px;height:44px;font-size:.8rem}
.cmp-viz__slot .logo img{width:100%;height:100%;object-fit:contain}
.cmp-viz__slot span{text-align:center;padding:0 8px}
.cmp-viz__slot::before{content:"";position:absolute;inset:auto 10px 10px;height:6px;border-radius:3px;background:var(--border)}
.cmp-viz__slot::after{content:"";position:absolute;inset:auto 10px 22px 10px;height:6px;width:60%;border-radius:3px;background:var(--border)}

/* Hub card artwork */
.hub-card{--hue:185;overflow:hidden}
.hub-card--calc{--hue:60}.hub-card--ext{--hue:280}.hub-card--prompt{--hue:20}.hub-card--bench{--hue:230}.hub-card--cmp{--hue:185}
.hub-card__art{display:flex;align-items:flex-end;gap:6px;height:72px;padding:10px 12px;border-radius:var(--r-sm);background:linear-gradient(135deg,oklch(0.96 0.03 var(--hue)),oklch(0.92 0.04 calc(var(--hue) + 30)));margin-bottom:4px}
.hub-card__art i{flex:1;border-radius:4px 4px 0 0;background:oklch(0.55 0.11 var(--hue))}
.hub-card__art--icons{align-items:center;justify-content:space-around}
.hub-card__art--icons .ext-icon{width:26px;height:26px;color:oklch(0.45 0.1 var(--hue))}
.hub-card__art--bubbles{align-items:center;flex-direction:column;justify-content:center;gap:5px}
.hub-card__art--bubbles b{display:block;height:10px;border-radius:6px;background:oklch(0.55 0.11 var(--hue))}
.hub-card__art--bubbles b:nth-child(1){width:70%;align-self:flex-start}.hub-card__art--bubbles b:nth-child(2){width:50%;align-self:flex-end;background:var(--surface)}.hub-card__art--bubbles b:nth-child(3){width:60%;align-self:flex-start}
.hub-card__art--race{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.hub-card__art--race i{flex:none;height:10px;border-radius:5px}
.hub-card__art--slots{align-items:stretch}
.hub-card__art--slots b{flex:1;border:2px dashed oklch(0.55 0.11 var(--hue));border-radius:6px;background:var(--surface)}
.hub-card__art--slots b:first-child{border-style:solid;background:oklch(0.9 0.05 var(--hue))}
/* Header: 7 nav items now — tighten between the drawer breakpoint and wide desktops */
@media (min-width:1081px){.nav{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:var(--s3)}.nav__list a{padding:0 8px;font-size:.875rem}.search--header{flex:0 1 220px;min-width:120px;width:auto}.nav__cta{padding:0 12px}}
@media (min-width:1081px) and (max-width:1280px){.nav__list a[href*="how-we-review"]{display:none}}

/* Three-column card grids on desktop (catalog, extensions, prompts) */
@media (min-width:1100px){
  .card-grid,.ext-grid,.prompt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .catalog__layout{grid-template-columns:240px 1fr}
}
@media (min-width:1100px) and (max-width:1279px){.catalog__layout .card-grid{gap:var(--s3)}.tool-card__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}

/* Landings */
.landing .block{margin-top:var(--s6)}
.landing .block h2{margin-top:0}
.vs-duel{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:center}
.vs-duel__side{display:grid;justify-items:center;gap:6px;padding:var(--s4);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--fg);text-align:center}
.vs-duel__side .logo{width:64px;height:64px;font-size:1rem}
.vs-duel__side .logo img{width:100%;height:100%;object-fit:contain}
.vs-duel__vs{font-size:1.1rem;font-weight:700;color:var(--muted)}
.vs-table th[scope=row]{white-space:nowrap}
.vs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.vs-cards{grid-template-columns:1fr}}
.hub-grid--compact .hub-card{gap:4px;padding:var(--s3) var(--s4)}
.hub-grid--compact .hub-card strong{font-size:.95rem}

/* Check / cross lists (landings, extensions, explainers) */
.checks,.crosses{list-style:none;margin:var(--s2) 0;padding:0;display:grid;gap:8px}
.checks li,.crosses li{position:relative;padding-left:28px;line-height:1.5}
.checks li::before,.crosses li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--pin-bg);border:1px solid var(--pin)}
.checks li::after{content:"";position:absolute;left:5px;top:calc(.2em + 4px);width:6px;height:9px;border:solid var(--pin);border-width:0 2px 2px 0;transform:rotate(45deg)}
.crosses li::before{background:oklch(0.95 0.03 25);border-color:oklch(0.6 0.15 25)}
.crosses li::after{content:"";position:absolute;left:4px;top:calc(.2em + 4px);width:10px;height:10px;background:linear-gradient(45deg,transparent 42%,oklch(0.5 0.15 25) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,oklch(0.5 0.15 25) 42% 58%,transparent 58%)}

/* Compare presets */
.cmp-presets{margin-top:var(--s5)}
.cmp-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s4)}
.cmp-preset{display:grid;gap:8px;padding:var(--s4);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);min-width:0}
.cmp-preset__duel{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:start;text-decoration:none;color:var(--fg);padding:var(--s3);border-radius:var(--r-sm);background:var(--pin-bg)}
.cmp-preset__side{display:grid;justify-items:center;text-align:center;gap:4px;min-width:0}
.cmp-preset__side .logo{width:44px;height:44px;font-size:.75rem;background:var(--surface);border:1px solid var(--border-strong)}
.cmp-preset__side .logo img{width:100%;height:100%;object-fit:contain}
.cmp-preset__side strong{font-size:.9rem;line-height:1.2}
.cmp-preset__vs{align-self:center;color:var(--muted);font-weight:700}
.cmp-preset__title{margin:4px 0 0;font-size:1.05rem}
.cmp-preset__title a{color:var(--fg);text-decoration:none}
.cmp-preset__title a:hover{text-decoration:underline}
.cmp-preset__verdict{margin:0;color:var(--fg-2);font-size:.92rem}
.cmp-preset__foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* Compare slots picker */
.cmp-viz{position:relative}
.cmp-viz__slot--empty{cursor:pointer;font:inherit;gap:4px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.cmp-viz__slot--empty:hover,.cmp-viz__slot--empty[aria-expanded=true]{border-color:var(--pin);background:var(--pin-bg);color:var(--fg)}
.cmp-viz__slot--empty::before,.cmp-viz__slot--empty::after{display:none}
.cmp-viz__plus{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border-strong);font-size:1.4rem;line-height:1;color:var(--pin)}
.cmp-viz__slot.is-filled{display:grid;grid-template-rows:1fr auto;padding:10px;gap:6px}
.cmp-viz__slot.is-filled::before,.cmp-viz__slot.is-filled::after{display:none}
.cmp-viz__tool{display:grid;justify-items:center;align-content:center;gap:6px;text-decoration:none;color:var(--fg);font:600 .85rem/1.2 var(--font-body);text-align:center}
.cmp-viz__remove{justify-self:center;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);text-decoration:none;font-size:1rem;line-height:1}
.cmp-viz__remove:hover{border-color:var(--fg)}
.cmp-picker{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:var(--shadow-1);padding:var(--s3);display:grid;gap:8px}
.cmp-picker__input{height:44px;border:1px solid var(--border-strong);border-radius:var(--r);padding:0 var(--s3);font:inherit;font-size:1rem;width:100%}
.cmp-picker__list{display:grid;gap:4px;max-height:260px;overflow:auto}
.cmp-picker__item{display:grid;gap:2px;padding:8px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--fg)}
.cmp-picker__item:hover,.cmp-picker__item:focus{background:var(--pin-bg)}
.cmp-picker__hint{margin:0}

.cmp-picker__tabs{display:flex;flex-wrap:wrap;gap:6px}
.cmp-picker__tab{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font:500 .8rem/1 var(--font-body);color:var(--fg);cursor:pointer}
.cmp-picker__tab svg{width:14px;height:14px}
.cmp-picker__tab[aria-selected=true]{background:var(--fg);color:var(--surface);border-color:var(--fg)}
.cmp-picker__group{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;margin-top:8px}
.cmp-picker__item--pop{grid-template-columns:auto 1fr;align-items:center;gap:8px}
.cmp-picker__item--pop .logo{width:30px;height:30px;font-size:.6rem}
.cmp-picker__item--pop .logo img{width:100%;height:100%;object-fit:contain}
.cmp-picker__item--pop>span{display:grid;gap:1px;min-width:0}
.cmp-picker__item[hidden]{display:none}
.cmp-picker[hidden],.cmp-picker__group[hidden],.cmp-picker__list[hidden],.cmp-picker__popular[hidden],.cmp-picker__tab[hidden],.cmp-picker__item[hidden]{display:none!important}
.cmp-picker{max-height:420px;overflow:auto}

.cmp-picker__q{margin:0;font:600 .8rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cmp-picker__step{display:grid;gap:10px}
.cmp-picker__step[hidden]{display:none!important}
.cmp-picker__head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.cmp-picker__tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cmp-picker__tab{display:grid;justify-items:center;gap:4px;padding:12px 8px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);font:600 .85rem/1.2 var(--font-body);color:var(--fg);cursor:pointer;text-align:center;min-height:0}
.cmp-picker__tab svg{width:22px;height:22px;color:var(--pin)}
.cmp-picker__tab:hover{border-color:var(--pin);background:var(--pin-bg)}

/* ===== Visual system: Field notes (paper) + Instrument (slate) ===== */
:root{--paper:oklch(0.985 0.012 85);--paper-line:oklch(0.5 0.08 185 / .10);--slate:oklch(0.27 0.03 190);--slate-2:oklch(0.32 0.03 190);--amber:oklch(0.78 0.13 80);--violet:oklch(0.55 0.15 285);--violet-bg:oklch(0.93 0.04 285);--green-bg:oklch(0.93 0.06 135);--green:oklch(0.42 0.1 135)}
.hero-paper{position:relative;overflow:hidden;background:var(--paper);background-image:repeating-linear-gradient(0deg,transparent 0 31px,var(--paper-line) 31px 32px);border:1px solid var(--border-strong);border-radius:var(--r-lg,16px);padding:var(--s6) var(--s5);display:grid;gap:var(--s4);margin-top:var(--s5)}
.hero-paper .page-head{padding:0}
.stamp{position:absolute;right:var(--s5);top:var(--s4);transform:rotate(-7deg);border:2px solid var(--accent,#c2552c);color:var(--accent,#c2552c);border-radius:6px;padding:5px 10px;font:700 .68rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;background:oklch(1 0 0 / .6)}
@media (max-width:720px){.stamp{position:static;transform:none;justify-self:start;width:max-content}}
.pin-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--s3)}
.pin-list .pin{position:relative;display:grid;gap:6px;padding:14px 12px 12px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);color:var(--fg);text-decoration:none;min-width:0;transition:transform .15s var(--ease),border-color .15s var(--ease)}
.pin-list .pin::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--accent,#c2552c);transform:translateX(-50%);box-shadow:0 1px 1px oklch(0 0 0 / .25)}
.pin-list .pin:hover{transform:translateY(-2px) rotate(-.4deg);border-color:var(--fg)}
.pin-list .pin svg{width:24px;height:24px;color:var(--pin)}
.pin-list .pin b{font:600 .95rem/1.2 var(--font-display,var(--font-body))}
.pin-list .pin small{font:.72rem/1.3 var(--font-mono);color:var(--muted)}
.tape{display:flex;flex-wrap:wrap;gap:6px}
.tape a,.tape button{font:500 .78rem/1 var(--font-mono);background:var(--surface);border:1px solid var(--border-strong);border-radius:5px;padding:8px 10px;color:var(--fg);text-decoration:none;cursor:pointer;min-height:34px;display:inline-flex;align-items:center;gap:6px}
.tape .is-on,.tape a[aria-current],.tape button[aria-pressed=true]{background:var(--fg);color:var(--surface);border-color:var(--fg)}
.hero-slate{position:relative;overflow:hidden;background:var(--slate);color:oklch(0.93 0.01 190);border-radius:var(--r-lg,16px);padding:var(--s6) var(--s5);display:grid;gap:var(--s4);margin-top:var(--s5)}
.hero-slate h1,.hero-slate h2,.hero-slate .h{color:#fff;margin:0}
.hero-slate .lede,.hero-slate p{color:oklch(0.8 0.02 190)}
.hero-slate .eyebrow{color:var(--amber)}
.hero-slate .compass{position:absolute;right:var(--s4);bottom:-10px;width:120px;height:120px;opacity:.9;pointer-events:none}
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3)}
.gauge{background:var(--slate-2);border:1px solid oklch(1 0 0 / .08);border-radius:var(--r);padding:12px;display:grid;gap:5px;min-width:0}
.gauge .l{font:500 .64rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:oklch(0.75 0.02 190)}
.gauge .n{font:700 1.5rem/1 var(--font-display,var(--font-body));color:#fff;font-variant-numeric:tabular-nums}
.gauge .t{height:6px;border-radius:3px;background:oklch(1 0 0 / .1);overflow:hidden}
.gauge .t i{display:block;height:100%;background:var(--amber);border-radius:3px}
.gauge .t i.p{background:oklch(0.72 0.1 185)}
.hero-slate .tape a,.hero-slate .tape button{background:transparent;color:oklch(0.85 0.02 190);border-color:oklch(1 0 0 / .25)}
.hero-slate .tape .is-on,.hero-slate .tape a[aria-current],.hero-slate .tape button[aria-pressed=true]{background:var(--amber);color:var(--slate);border-color:var(--amber)}
.hero-slate .btn{background:transparent;color:#fff;border-color:oklch(1 0 0 / .35)}
.hero-slate .btn--amber{background:var(--amber);color:var(--slate);border-color:var(--amber)}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.flow .st{position:relative;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:12px;display:grid;gap:3px}
.flow .st b{font:600 .9rem/1.2 var(--font-display,var(--font-body))}
.flow .st small{font-size:.75rem;color:var(--muted)}
.flow .st .num{font:700 .66rem/1 var(--font-mono);color:var(--accent,#c2552c);letter-spacing:.08em}
.hero-slate .flow .st{background:var(--slate-2);border-color:oklch(1 0 0 / .1);color:#fff}
.hero-slate .flow .st small{color:oklch(0.75 0.02 190)}
.badge--doc{background:var(--pin-bg);color:var(--pin)}
.badge--hands{background:var(--rust-bg,oklch(0.93 0.05 40));color:var(--accent,#c2552c)}
.badge--free{background:var(--green-bg);color:var(--green)}
.badge--off{background:var(--violet-bg);color:var(--violet)}
.badge--warn{background:oklch(0.95 0.07 85);color:oklch(0.45 0.1 70)}
.badge--dead{background:var(--sunk);color:var(--muted);text-decoration:line-through}
.badge--static{position:static;box-shadow:none;font:600 .66rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;padding:5px 9px}
.note-card{position:relative;display:grid;gap:6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:var(--s4);min-width:0}
.note-card--spine{border-left:4px solid var(--pin)}
.note-card--spine.is-vendor{border-left-color:var(--violet)}
.note-card--hero{border-left:4px solid var(--accent,#c2552c)}
.note-card b{font:600 .95rem/1.25 var(--font-display,var(--font-body))}
.note-card small{font-size:.78rem;color:var(--muted)}
.big-num{font:700 clamp(1.8rem,4vw,2.6rem)/1 var(--font-display,var(--font-body));letter-spacing:-.02em}
.pin-list .pin.is-on,.note-card.is-on{border-color:var(--pin);box-shadow:inset 0 0 0 1px var(--pin);background:var(--pin-bg)}
@media (max-width:720px){.hero-paper .grid[style*="1.4fr"]{grid-template-columns:1fr!important}}

.cmp-duel{margin:var(--s4) 0}
.duel-row{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:center}
.duel-row:has(> .duel-side:nth-of-type(3)){grid-template-columns:1fr auto 1fr auto 1fr}
.duel-side{display:grid;justify-items:center;gap:4px;text-decoration:none;color:#fff;text-align:center;background:var(--slate-2);border:1px solid oklch(1 0 0 / .1);border-radius:var(--r);padding:var(--s3)}
.duel-side .logo{width:48px;height:48px;background:oklch(1 0 0 / .08);border-color:oklch(1 0 0 / .15);color:#fff}
.duel-side .logo img{width:100%;height:100%;object-fit:contain}
.duel-side small{color:oklch(0.78 0.02 190);font-size:.78rem}
.duel-vs{color:var(--amber);font-weight:700}
.cmp-preset[hidden]{display:none!important}
@media (max-width:600px){.duel-row,.duel-row:has(> .duel-side:nth-of-type(3)){grid-template-columns:1fr}.duel-vs{text-align:center}}

.calc__presets--collapsed > :nth-child(n+5){display:none}
.calc-meter .gauge .n{font-size:1.15rem}
.hero-paper .grid,.hero-slate .grid{display:grid}
.badge--static{width:max-content;display:inline-flex}

/* Versus v2 */
.vs-hero{margin-top:var(--s4)}
.vs-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s6);align-items:start;margin-top:var(--s5)}
.vs-toc{position:sticky;top:84px;border:1px solid var(--border);border-radius:var(--r);padding:var(--s3) var(--s4);background:var(--surface)}
.vs-toc ol{margin:6px 0 0;padding-left:18px;display:grid;gap:4px;font-size:.85rem}
.vs-toc a{color:var(--fg-2);text-decoration:none}
.vs-toc a:hover{color:var(--fg);text-decoration:underline}
.vs-body{display:grid;gap:var(--s5);min-width:0}
.vs-body .block{margin-top:0}
.vs-body .block h2{scroll-margin-top:90px}
.vs-body .split .note-card small{font:600 .68rem/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:6px}
@media (max-width:900px){.vs-layout{grid-template-columns:1fr}.vs-toc{position:static}}

/* Card preview: hover slideshow through the tool's screenshots + micro motion */
.tool-card__media .cover__img{transition:transform .5s var(--ease),filter .3s var(--ease);will-change:transform}
.tool-card:hover .tool-card__media .cover__img{transform:scale(1.04)}
.tool-card__media .cover__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s var(--ease);pointer-events:none;background:inherit}
.tool-card__media .cover__frame.is-on{opacity:1}
.tool-card__media.is-playing .cover__img{opacity:0;transition:opacity .45s var(--ease)}
.tool-card__dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;opacity:0;transition:opacity .25s var(--ease)}
.tool-card:hover .tool-card__dots,.tool-card__media.is-playing .tool-card__dots{opacity:1}
.tool-card__dots i{width:6px;height:6px;border-radius:50%;background:oklch(1 0 0 / .7);border:1px solid oklch(0 0 0 / .25);transition:transform .2s var(--ease),background .2s var(--ease)}
.tool-card__dots i.is-on{background:var(--accent);transform:scale(1.25)}
.tool-card{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.tool-card .tool-card__head .logo{transition:transform .3s var(--ease)}
.tool-card:hover .tool-card__head .logo{transform:translateY(-2px) rotate(-3deg)}
@media (prefers-reduced-motion:reduce){.tool-card,.tool-card__media .cover__img,.tool-card .tool-card__head .logo{transition:none;transform:none!important}}

/* ===== Card rhythm: identical spacing on every tool card ===== */
.tool-card__top{height:56px;min-height:56px;padding:0 var(--s4);flex:none}
.tool-card__top .badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;display:inline-flex}
.tool-card__top .ribbon{white-space:nowrap;flex:none}
.tool-card__media{aspect-ratio:16/10;padding:var(--s4);box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.tool-card__media .cover__img,.tool-card__media .cover__svg{width:100%;height:100%;object-fit:contain;border-radius:6px}
.tool-card__media .cover__frame{inset:var(--s4);width:auto;height:auto;border-radius:6px}
.tool-card__body{display:grid;grid-template-rows:auto auto minmax(4.2em,auto) auto auto;gap:var(--s3);padding:0 var(--s5) var(--s4)}
.tool-card__head{min-height:44px}
.tool-card__name{min-height:1.3em}
.tool-card__meta{min-height:1.4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-card .rating{min-height:22px}
.tool-card__desc{min-height:4.2em;line-height:1.4}
.tool-card__status{min-height:30px;margin-top:0;padding-top:0;align-items:center}
.tool-card__verify{min-height:2.9em;display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
.tool-card__foot{margin-top:auto;min-height:96px;align-items:center}
.tool-card__foot .price-tag,.tool-card__foot > :first-child{min-height:52px;display:flex;flex-direction:column;justify-content:center}
.tool-card__actions .btn{min-height:44px}
/* Lock the row heights so every card lines up to the pixel */
.tool-card__media{flex:none}
.tool-card__body{grid-template-rows:60px 22px 4.2em 2.9em 30px 40px;align-items:start}
.tool-card__desc{height:4.2em;min-height:0}
.tool-card__status{height:30px;overflow:hidden}
.tool-card__verify{height:40px;overflow:hidden;font-size:.78rem;line-height:1.4}
.tool-card .rating{height:22px;align-items:center;display:flex}
.tool-card__foot{height:148px;min-height:0;flex:none}

/* ===== Motion system ===== */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.34,1.4,.64,1)}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease-out) var(--d,0ms),transform .55s var(--ease-out) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.no-motion .reveal{opacity:1;transform:none;transition:none}
.gauge .t i,.viz__bar-fill,.bench__bar-fill,.calc__bar-fill{transition:width .9s var(--ease-out)}
.pin-list .pin,.note-card,.hub-card,.ext-card,.prompt-card,.cmp-preset,.plan,.ext-type,.bench__card{transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}
a.note-card:hover,.hub-card:hover,.ext-card:hover,.prompt-card:hover,.cmp-preset:hover,.plan:hover,.bench__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.pin-list .pin:hover{transform:translateY(-3px) rotate(-.6deg)}
.btn{transition:background .15s var(--ease-out),border-color .15s var(--ease-out),transform .15s var(--ease-spring),box-shadow .15s var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.link-arrow::after{display:inline-block;transition:transform .2s var(--ease-spring)}
.link-arrow:hover::after{transform:translateX(4px)}
.tape a,.tape button,.tag,.calc__chip,.cmp-picker__tab{transition:background .15s var(--ease-out),color .15s var(--ease-out),border-color .15s var(--ease-out),transform .15s var(--ease-spring)}
.tape a:hover,.tape button:hover,.tag:hover,.calc__chip:hover,.cmp-picker__tab:hover{transform:translateY(-1px)}
.stamp{animation:stamp-in .5s var(--ease-spring) both}
@keyframes stamp-in{from{opacity:0;transform:rotate(-7deg) scale(1.3)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
@media (max-width:720px){.stamp{animation-name:stamp-in-flat}@keyframes stamp-in-flat{from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:none}}}
.hero-slate .compass path[fill]{transform-origin:50px 50px;animation:needle 1.2s var(--ease-spring) both}
@keyframes needle{from{transform:rotate(-40deg)}to{transform:rotate(0)}}
.viz--donut svg circle{transition:stroke-dashoffset .9s var(--ease-out)}
.faq details summary{transition:color .15s var(--ease-out)}
.faq details[open] summary{color:var(--pin)}
.faq details p{animation:fade-in .3s var(--ease-out)}
@keyframes fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.suggest,.cmp-picker{animation:pop-in .18s var(--ease-out)}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tool-card__media .cover__img{transition:transform .6s var(--ease-out),opacity .35s var(--ease-out)}
.tool-card__media .cover__frame{transition:opacity .35s var(--ease-out)}
.tool-card{transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Layout audit 2026-10-06: keep children inside their boxes */
.tool-card__body > *{min-width:0}
.cmp-preset__side .small{max-width:100%;overflow-wrap:anywhere}
.add-tool select,.add-tool__input{flex:1 1 200px;min-width:0;max-width:100%}
.add-tool__input{height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);font:inherit;color:var(--fg)}
.add-tool__input:focus{outline:2px solid var(--pin);outline-offset:1px}
.tool-card__head > div{flex:1 1 auto;min-width:0}
.suggest__hint{margin:0;padding:6px 12px 8px;font:500 .7rem/1 var(--font-mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;border-top:1px solid var(--border)}
.tool-card__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-card .tool-card__name,.tool-card .tool-card__meta{margin-top:0;margin-bottom:0}
.tool-card .tool-card__meta{margin-top:2px}
.cmp-presets > .muted{max-width:70ch;margin:0 0 var(--s4)}
.cmp-presets .tape{margin-bottom:var(--s5)}
/* News without a thumbnail: compact row with the outlet mark instead of an empty 16:9 slab */
.newslist__item--compact{flex-direction:row;align-items:flex-start;gap:12px;padding:14px}
.newslist__item--compact .newslist__text{padding:0;min-width:0}
.newslist__mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--pin-bg);color:var(--pin);font:600 1.1rem var(--font-display);overflow:hidden}
.newslist__mark .newslist__logo{width:44px;height:44px;border-radius:12px;box-shadow:none}
.pin-list .pin{padding-right:14px}
.pin-list .pin small{white-space:normal;overflow-wrap:anywhere}

/* Extensions: table view */
.ext__count{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.ext__count p{margin:0}
.ext-grid--table{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.ext-grid--table .ext-card{border:0;border-radius:0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 var(--s3);align-items:center;padding:10px var(--s4)}
.ext-grid--table .ext-card:last-child{border-bottom:0}
.ext-grid--table .ext-card__cover{aspect-ratio:auto;height:40px;width:40px;border-radius:10px;padding:0;display:grid;place-items:center}
.ext-grid--table .ext-card__cover .ext-card__hosts-row,.ext-grid--table .ext-card__cover .ribbon{display:none}
.ext-grid--table .ext-card__glyph{width:22px;height:22px}
.ext-grid--table .ext-card__body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:var(--s3);align-items:center;padding:0}
.ext-grid--table .ext-card__top{grid-column:1/-1;display:none}
.ext-grid--table .ext-card__name{font-size:.95rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ext-grid--table .ext-card__by{display:none}
.ext-grid--table .ext-card__desc{margin:0;font-size:.85rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ext-grid--table .ext-card__stats{display:flex;gap:var(--s3);margin:0;font-size:.75rem;white-space:nowrap}
.ext-grid--table .ext-card__stats dt{display:none}
@media (max-width:720px){.ext-grid--table .ext-card__body{grid-template-columns:1fr}.ext-grid--table .ext-card__desc,.ext-grid--table .ext-card__stats{display:none}}
/* Calculator: jump from the verdict to the row in the price table */
.calc__jump{color:inherit;text-decoration:underline;text-decoration-color:oklch(0.7 0.05 190);text-underline-offset:3px}
.calc__table tr:target td,.calc__table tr:target th{background:var(--pin-bg);box-shadow:inset 3px 0 0 var(--pin)}
.calc__table tr{scroll-margin-top:96px}

/* ---------- Ambient motion on first screens: one or two living elements per view, all CSS, off under reduced motion ---------- */
/* Home map: slow radar sweep over the contours + breathing pins */
.map::after{content:"";position:absolute;inset:-20%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 318deg,oklch(0.6 0.08 185 / .16) 352deg,oklch(0.6 0.1 185 / .32) 360deg);animation:map-sweep 14s linear infinite;mix-blend-mode:multiply}
@keyframes map-sweep{to{transform:rotate(1turn)}}
.map__pins li{animation:pin-drop .6s var(--ease-spring,cubic-bezier(.2,.9,.3,1.2)) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes pin-drop{from{opacity:0;transform:translateY(-10px) scale(.92)}to{opacity:1;transform:none}}
.pin__dot{position:relative}
.pin__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--pin);opacity:0;animation:pin-ring 3.2s ease-out infinite;animation-delay:calc(var(--i,0) * 450ms)}
@keyframes pin-ring{0%{transform:scale(.6);opacity:.9}60%{transform:scale(2.1);opacity:0}100%{opacity:0}}
.map__compass{animation:compass-settle 2.4s var(--ease-out,ease-out) both}
@keyframes compass-settle{0%{transform:rotate(-24deg)}55%{transform:rotate(8deg)}80%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
/* survey.log: a live cursor after the last line */
.log__lines li:last-child::after{content:"";display:inline-block;width:.55em;height:1em;margin-left:6px;vertical-align:-0.15em;background:currentColor;opacity:.7;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* Paper and slate heroes: a soft light sweep across the sheet, every 12s */
.hero-paper::after,.hero-slate::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:35%;pointer-events:none;transform:skewX(-14deg);background:linear-gradient(90deg,transparent,oklch(1 0 0 / .22),transparent);animation:sheen 12s ease-in-out infinite;animation-delay:1.5s}
.hero-slate::after{background:linear-gradient(90deg,transparent,oklch(1 0 0 / .07),transparent)}
@keyframes sheen{0%,8%{left:-40%}22%,100%{left:120%}}
/* Pin tiles: the tack nudges when you hover the tile */
.pin-list .pin:hover::before{animation:tack .35s var(--ease-spring,ease-out)}
@keyframes tack{40%{transform:translate(-50%,-3px) scale(1.15)}}
/* Stamp: tiny re-press on hover */
.stamp:hover{animation:stamp-press .35s ease-out}
@keyframes stamp-press{50%{transform:rotate(-7deg) scale(.94)}}
@media (max-width:720px){.stamp:hover{animation:none}}
@media (prefers-reduced-motion:reduce){.map::after,.pin__dot::after,.log__lines li:last-child::after,.hero-paper::after,.hero-slate::after{animation:none;display:none}.map__pins li,.map__compass{animation:none}}
.no-motion .map::after,.no-motion .pin__dot::after,.no-motion .hero-paper::after,.no-motion .hero-slate::after{animation:none;display:none}
.no-motion .map__pins li,.no-motion .map__compass{animation:none}

.add-tool .search--inline{flex:1 1 260px;min-width:0;max-width:100%;padding:3px;border-radius:var(--r)}
.add-tool .search--inline .search__input{height:38px;font-size:.95rem}
.add-tool .search--inline .suggest{left:0;right:auto;width:min(420px,calc(100vw - 32px))}

/* ---------- Section signatures: one living element per first screen ---------- */
/* Catalog: a surveyor's route drawing itself across the sheet, with a crosshair walking the line */
.hero-paper--catalog .route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-paper--catalog .route__line{fill:none;stroke:var(--accent,#c2552c);stroke-width:1.5;stroke-dasharray:6 8;opacity:.45;animation:route-dash 1.6s linear infinite}
@keyframes route-dash{to{stroke-dashoffset:-14}}
.hero-paper--catalog .route__marker{position:absolute;left:0;top:0;width:14px;height:14px;border:1.5px solid var(--accent,#c2552c);border-radius:50%;background:oklch(1 0 0 / .8);box-shadow:0 0 0 4px oklch(0.6 0.15 40 / .15);offset-path:path("M-20 300 C 150 260, 220 360, 380 320 S 640 180, 820 240 S 1060 330, 1240 260");offset-rotate:0deg;animation:route-walk 26s linear infinite;pointer-events:none;z-index:0}
.hero-paper--catalog .route__marker::before,.hero-paper--catalog .route__marker::after{content:"";position:absolute;background:var(--accent,#c2552c);opacity:.7}
.hero-paper--catalog .route__marker::before{left:50%;top:-5px;width:1px;height:calc(100% + 10px);transform:translateX(-50%)}
.hero-paper--catalog .route__marker::after{top:50%;left:-5px;height:1px;width:calc(100% + 10px);transform:translateY(-50%)}
@keyframes route-walk{to{offset-distance:100%}}
.hero-paper--catalog > :not(.route):not(.route__marker):not(.stamp){position:relative;z-index:1}
.hero-paper--catalog .stamp,.hero-paper--ext .stamp{z-index:1}
/* Extensions: faint circuit traces with light pulses travelling along them; host tacks glow like LEDs */
.hero-paper--ext .circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-paper--ext .circuit path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-paper--ext .circuit__trace path{stroke:var(--pin);stroke-width:1.2;opacity:.22}
.hero-paper--ext .circuit__pulse path{stroke:var(--pin);stroke-width:2.2;stroke-dasharray:28 900;opacity:.9;animation:circuit-pulse 5s linear infinite}
.hero-paper--ext .circuit__pulse path:nth-child(2){animation-delay:1.3s}.hero-paper--ext .circuit__pulse path:nth-child(3){animation-delay:2.6s}.hero-paper--ext .circuit__pulse path:nth-child(4){animation-delay:3.9s}
@keyframes circuit-pulse{from{stroke-dashoffset:928}to{stroke-dashoffset:0}}
.hero-paper--ext > :not(.circuit):not(.stamp){position:relative;z-index:1}
.hero-paper--ext .pin-list .pin::before{background:oklch(0.72 0.17 150);box-shadow:0 0 0 3px oklch(0.72 0.17 150 / .25),0 0 10px oklch(0.72 0.17 150 / .6);animation:led 2.4s ease-in-out infinite}
@keyframes led{50%{box-shadow:0 0 0 2px oklch(0.72 0.17 150 / .15),0 0 3px oklch(0.72 0.17 150 / .3)}}
/* Prompts: a typed tagline with a caret */
.typed{margin:6px 0 0;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden}
.typed span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid var(--accent,#c2552c);width:0;animation:typing 2.4s steps(42,end) .6s forwards,caret-blink .8s step-end infinite}
@keyframes typing{to{width:100%}}
@keyframes caret-blink{50%{border-color:transparent}}
/* Guides: a hand-drawn underline that draws itself */
.h1-marked .mark{position:relative;display:inline-block}
.h1-marked .mark svg{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.32em;overflow:visible}
.h1-marked .mark path{fill:none;stroke:var(--accent,#c2552c);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;animation:draw-mark .9s var(--ease-out,ease-out) .5s forwards;opacity:.85}
@keyframes draw-mark{to{stroke-dashoffset:0}}
/* Compare: a scope line sweeps the duel panel; the vs badge beats */
.cmp-duel{position:relative;overflow:hidden}
.cmp-duel::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.7;animation:scope 6s ease-in-out infinite;pointer-events:none}
@keyframes scope{0%{top:-2px}50%{top:100%}100%{top:-2px}}
.duel-vs{display:inline-block;animation:vs-beat 2.4s ease-in-out infinite}
@keyframes vs-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* Benchmarks and category guides: donut arcs spin into place */
.viz--donut svg{animation:donut-in 1.1s var(--ease-out,ease-out) both}
@keyframes donut-in{from{transform:rotate(-120deg);opacity:0}to{transform:rotate(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-paper--catalog .route,.hero-paper--catalog .route__marker,.hero-paper--ext .circuit__pulse,.cmp-duel::before{display:none}.hero-paper--ext .pin-list .pin::before,.duel-vs,.viz--donut svg,.h1-marked .mark path,.typed span{animation:none}.h1-marked .mark path{stroke-dashoffset:0}.typed span{width:100%;border-right:0}}
.no-motion .hero-paper--catalog .route,.no-motion .hero-paper--catalog .route__marker,.no-motion .hero-paper--ext .circuit__pulse,.no-motion .cmp-duel::before{display:none}
.no-motion .viz--donut svg,.no-motion .duel-vs,.no-motion .h1-marked .mark path,.no-motion .typed span{animation:none}.no-motion .h1-marked .mark path{stroke-dashoffset:0}.no-motion .typed span{width:100%}
/* Calculator: a price ticker running under the hero, like a quote tape */
.ticker{overflow:hidden;margin:var(--s3) 0 0;padding:8px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;gap:var(--s6);width:max-content;font:500 .78rem/1 var(--font-mono);color:var(--muted);white-space:nowrap;animation:ticker 90s linear infinite}
.ticker__track span b{color:var(--fg);font-weight:600}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}
.no-motion .ticker__track{animation:none}

/* SEO pass 2026-10-10: myth/reality list on versus pages, extra sections on hubs */
.myths{margin:0}
.myths dt{font-weight:600;margin-top:14px}
.myths dt:first-child{margin-top:0}
.myths dd{margin:4px 0 0;color:var(--muted, inherit)}
/* chips row used on landing pages (Browse by category) */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips .tag{display:inline-block;padding:6px 12px;border:1px solid var(--border);border-radius:999px;text-decoration:none}
/* A–Z list of every tool on category landings */
.az-list{list-style:none;margin:0 0 16px;padding:0;columns:4 180px;column-gap:24px;font-size:.9rem}
.az-list li{break-inside:avoid;padding:2px 0}
.az-list__sub{font-size:.75rem;color:var(--muted, inherit);margin-left:4px}

/* r10: compact empty pricing / reviews, breadcrumbs on ext+prompt */
.pricing-empty{margin:.25rem 0 0;padding:.6rem .8rem;border-left:3px solid var(--line,#ddd);background:var(--soft,#f7f7f5);font-size:.95em}
.reviews__empty{gap:var(--s1);padding:var(--s4) var(--s5);margin-bottom:var(--s4);max-width:72ch}.reviews__empty p{margin:0}
.ext-single .breadcrumbs{margin-bottom:1rem}
.pricing-reported{margin:.25rem 0 1rem;padding:.6rem .8rem;border-left:3px solid #d9a400;background:var(--soft,#fbf7ea);font-size:.95em}

.rank{font-weight:600;cursor:help;border-bottom:1px dotted var(--muted)}.rank .muted{font-weight:400}.rank-method ul.checks li b{font-variant-numeric:tabular-nums}

.tool-card__free{margin:0;color:var(--fg-2);height:2.9em;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tool-card__free b{font-weight:600}
/* Tool page: fact tiles stack label over value, left-aligned, equal height; feature meta line breathes */
.facts--grid div{display:grid;grid-template-rows:auto 1fr;align-content:start;gap:6px;padding:12px 14px;min-height:0}
.facts--grid dt{line-height:1.3}
.facts--grid dd{margin:0;text-align:left;font-weight:600;line-height:1.35}
.facts--grid dd .src,.facts--grid dd a.small{display:block;margin-top:4px;font-weight:400}
.feature__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 0}
.feature__meta .limit{line-height:1.45}
.feature p{margin:8px 0 0}

.hub-card--preview{padding:0;overflow:hidden}.hub-card--preview .hub-card__img{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-bottom:1px solid var(--border-strong);background:#f7f4ee}.hub-card--preview strong{padding:var(--s3) var(--s4) 0}.hub-card--preview .muted{padding:0 var(--s4) var(--s4)}

/* Page tips: one floating card with an arrow, a soft ring around the target */
.tip{position:absolute;z-index:60;width:min(340px,calc(100vw - 32px));padding:14px 16px 12px;background:var(--surface);color:var(--fg);border:1.5px solid var(--amber,#e3a14a);border-radius:var(--r);box-shadow:0 18px 40px oklch(0 0 0 / .28),0 0 0 4px oklch(1 0 0 / .85);font-size:.9rem;line-height:1.45;animation:tip-in .3s var(--ease-out,ease-out) both}
.tip__text{margin:0 0 10px}
.tip__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tip__n{font-size:.72rem;opacity:.7}
.tip .btn--sm{min-height:32px;padding:0 12px}
.tip .tip__skip{background:transparent;color:inherit;border-color:var(--border-strong)}
.tip .tip__next{background:var(--amber,#e3a14a);color:#1c2b2b;border-color:transparent}
.tip__arrow{position:absolute;top:-7px;width:14px;height:14px;background:var(--surface);border:1.5px solid var(--amber,#e3a14a);border-right:0;border-bottom:0;transform:rotate(45deg);border-radius:2px}
.tip--above .tip__arrow{top:auto;bottom:-7px;border:1.5px solid var(--amber,#e3a14a);border-left:0;border-top:0}
.tip__ring{position:absolute;z-index:59;pointer-events:none;border:2px solid var(--amber,#e3a14a);border-radius:12px;box-shadow:0 0 0 6px oklch(0.78 0.14 75 / .18);animation:tip-ring 1.6s ease-in-out infinite}
@keyframes tip-in{from{opacity:0;transform:translateY(6px)}}
@keyframes tip-ring{50%{box-shadow:0 0 0 12px oklch(0.78 0.14 75 / .06)}}
.show-tips{font-size:.85rem}
@media (prefers-reduced-motion:reduce){.tip,.tip__ring{animation:none}}

/* Figures: inline SVG schematics inside articles */
.fig{margin:var(--s5) 0;padding:var(--s3);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--paper,#fdfaf3);background-image:repeating-linear-gradient(0deg,transparent 0 31px,var(--paper-line,#efe8db) 31px 32px)}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{margin:10px 4px 0;font:500 .78rem/1.4 var(--font-mono);color:var(--muted)}
/* Figures on phones: the sheet gets less padding and the SVG text stays legible by letting the figure scroll sideways instead of shrinking below ~700px */
@media (max-width:640px){.fig{padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}.fig svg{min-width:680px}.fig figcaption{font-size:.72rem}}

/* Language switcher */
.lang{display:flex;gap:2px;list-style:none;margin:0;padding:0;font-family:var(--mono,ui-monospace,monospace);font-size:12px;letter-spacing:.06em}
.lang a{display:inline-block;padding:4px 7px;border-radius:999px;color:var(--muted,#55605f);text-decoration:none;border:1px solid transparent}
.lang a:hover{color:var(--ink,#1e3434);border-color:currentColor}
.lang a[aria-current]{color:var(--ink,#1e3434);background:var(--teal,#dcefec)}
.site-footer__lang{display:flex;justify-content:flex-end;padding-top:var(--s4,16px)}
@media (max-width:1080px){.lang--nav{order:99;width:100%;justify-content:flex-start;padding-top:var(--s3,12px)}}

/* Price freshness */
.price-fresh{font-family:var(--mono,ui-monospace,monospace);font-size:13px;color:var(--muted,#55605f);margin:0 0 var(--s3,12px)}
.price-fresh--changed{color:var(--accent,#c2552c)}
.tool-card__fresh{color:var(--accent,#c2552c);font-family:var(--mono,ui-monospace,monospace);font-size:12px;margin:0}

/* Root-archive editorial copy at the bottom of /tools/, /prompts/, /guides/ etc. */
.arc-body{max-width:72ch;margin:var(--s8) 0 var(--s7)}
.arc-body .block+.block{margin-top:var(--s6)}
.arc-body h2{margin-bottom:var(--s3)}
.arc-body p{line-height:1.6}

/* Drawer fallback when translated nav labels do not fit the desktop bar (class set by atlas.js) */
html.nav-tight .nav-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--fg);cursor:pointer}
html.nav-tight .nav-toggle span{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;transition:transform .2s var(--ease)}
html.nav-tight .nav-toggle[aria-expanded="true"] span{box-shadow:none;transform:rotate(45deg)}
html.nav-tight .nav-toggle[aria-expanded="true"] span::after{content:"";display:block;width:18px;height:2px;background:currentColor;transform:rotate(-90deg)}
html.nav-tight .nav{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;padding:var(--s4);gap:var(--s3);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-2);display:none}
html.nav-tight .nav.is-open{display:flex}
html.nav-tight .nav__list{flex-direction:column}
html.nav-tight .nav__list a{font-size:.9375rem;padding:0 var(--s3)}
html.nav-tight .nav__list a[href*="how-we-review"]{display:inline-flex}
html.nav-tight .nav__list a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--fg)}
html.nav-tight .search--header{display:flex;width:100%;flex:none;margin:0 0 var(--s2);border-radius:var(--r)}
html.nav-tight .lang--nav{order:99;width:100%;justify-content:flex-start;padding-top:var(--s3,12px)}

.intro__title{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.intro__title em{white-space:normal}

/* First-screen internal links on landing pages */
.quick-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:var(--s3) 0 var(--s4);font-size:.875rem}
.quick-links__label{font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-right:2px}
.quick-links a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid currentColor;border-radius:999px;color:inherit;text-decoration:none;opacity:.88}
.quick-links a:hover{opacity:1;background:oklch(0.5 0.05 185 / .12)}

.shots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--s4)}
.shots-grid .shot{margin:0}