/* The SaaS Wire — shared stylesheet */
:root{
  /* Brand palette — from the official kit */
  --violet:#7C3AED; --blue:#2563EB; --cyan:#06B6D4; --navy:#0B1220; --mist:#E5E7EB;
  --brand-grad:linear-gradient(120deg,#7C3AED 0%,#2563EB 55%,#06B6D4 100%);

  --bg:#ffffff; --alt:#F7F8FB; --surface:#ffffff; --ink:#0B1220; --muted:#5B6472; --line:#E5E7EB;
  --accent:#2563EB; --accent-2:#1D4ED8; --wire:#7C3AED; --ok:#0F766E; --warn:#9A3412;
  --shadow:0 1px 2px rgba(11,18,32,.04),0 8px 24px -12px rgba(11,18,32,.12);
  --shadow-lg:0 2px 4px rgba(11,18,32,.04),0 20px 50px -20px rgba(11,18,32,.22);

  --display:'Mona Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Mona Sans','Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:22px;top:10px;z-index:99;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px}

/* ---------- Masthead ---------- */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.1) blur(8px);z-index:20}
.top .in{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:800;letter-spacing:.02em;font-size:18px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--wire);display:inline-block;transform:translateY(-1px);flex:none}
.brand b{color:var(--ink)}
nav{display:flex;gap:20px;margin-left:auto;font-size:14.5px;font-weight:500}
nav a{color:var(--muted)}
nav a:hover,nav a[aria-current="page"]{color:var(--ink)}
@media(max-width:760px){nav{gap:14px;font-size:13px;overflow-x:auto;-webkit-overflow-scrolling:touch}nav::-webkit-scrollbar{display:none}.top .in{gap:14px}}

/* ---------- Hero ---------- */
.hero{padding:64px 0 30px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,5.4vw,54px);line-height:1.06;letter-spacing:-.01em;margin:14px 0 0;text-wrap:balance}
.hero h1{max-width:17ch}
.lede{font-size:clamp(17px,2.2vw,20px);color:var(--muted);margin:18px 0 0;max-width:62ch}

/* ---------- Featured ---------- */
.featured{margin:34px 0 0;display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.featured .txt{padding:30px 30px 34px}
.featured .kick{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wire)}
.featured h2{font-family:var(--serif);font-weight:600;font-size:clamp(23px,3.1vw,31px);line-height:1.15;margin:10px 0 0;text-wrap:balance}
.featured p{color:var(--muted);margin:12px 0 0;font-size:15.5px}
.featured .cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:600;color:var(--accent)}
.featured .cta:hover{color:var(--accent-2)}
.featured .art{background:linear-gradient(135deg,#4f46e5,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:20px;padding:24px;text-align:center;min-height:220px;line-height:1.3}
@media(max-width:760px){.featured{grid-template-columns:1fr}.featured .art{order:-1;min-height:140px}}

/* ---------- Trust strip ---------- */
.trust{padding:40px 0;border-bottom:1px solid var(--line)}
.trust h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:center;font-family:var(--sans)}
.trust .g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.trust .c{text-align:center;padding:0 8px}
.trust .c b{font-family:var(--serif);font-weight:600;font-size:19px;display:block}
.trust .c p{color:var(--muted);font-size:14.5px;margin-top:6px}
@media(max-width:640px){.trust .g{grid-template-columns:1fr;gap:16px}}

/* ---------- Sections & cards ---------- */
.section{padding:48px 0}
.section.alt{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2.t{font-family:var(--serif);font-weight:600;font-size:28px}
.section .sub{color:var(--muted);margin-top:8px;max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease}
a.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .ph{aspect-ratio:16/9;background:var(--alt);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.card .b{padding:16px 18px 20px}
.card .tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.card h3{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.25;margin:8px 0 0}
.card p{color:var(--muted);font-size:14px;margin:8px 0 0}
@media(max-width:820px){.grid,.grid.two{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid,.grid.two{grid-template-columns:1fr}}

/* ---------- Category hub tiles ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.cat{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--surface);transition:border-color .15s ease}
.cat:hover{border-color:var(--accent)}
.cat b{font-family:var(--serif);font-weight:600;font-size:18px;display:block}
.cat p{color:var(--muted);font-size:14px;margin-top:6px}
.cat .n{color:var(--muted);font-size:12px;margin-top:10px;display:block;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:820px){.cats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cats{grid-template-columns:1fr}}

/* ---------- Article ---------- */
.article{padding:44px 0 20px}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.byline{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--muted);font-size:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.prose{font-size:17.5px;line-height:1.72}
.prose>*+*{margin-top:22px}
.prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.4vw,32px);line-height:1.2;margin-top:52px;scroll-margin-top:80px;text-wrap:balance}
.prose h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.25;margin-top:38px;scroll-margin-top:80px}
.prose h4{font-size:16px;font-weight:700;margin-top:26px}
.prose p{color:var(--ink)}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose a:not(.btn):not(.card){color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:not(.btn):not(.card):hover{color:var(--accent-2)}
.prose strong{font-weight:700}
.prose blockquote{border-left:3px solid var(--accent);padding-left:18px;color:var(--muted);font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:44px 0}

/* ---------- Disclosure box ---------- */
.disclosure-box{border:1px solid var(--line);background:var(--alt);border-radius:12px;padding:16px 18px;font-size:14.5px;color:var(--muted);line-height:1.6}
.disclosure-box strong{color:var(--ink)}

/* ---------- TOC ---------- */
.toc{border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:var(--surface)}
.toc b{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block}
.toc ol{margin-top:12px;padding-left:20px;font-size:15.5px}
.toc li+li{margin-top:7px}
.toc a{color:var(--accent)}
.toc a:hover{text-decoration:underline}

/* ---------- Comparison table ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;font-size:14.5px;min-width:660px;background:var(--surface)}
table.cmp th,table.cmp td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{background:var(--alt);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td.tool{font-weight:700;white-space:nowrap}
table.cmp td.tool small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px;white-space:normal}
p.note{font-size:13.5px;color:var(--muted)}

/* ---------- Ranked pick ---------- */
.pick{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;margin-top:28px}
.pick .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;padding:20px 24px 0}
.pick .rank{font-family:var(--serif);font-size:15px;font-weight:600;color:#fff;background:var(--accent);border-radius:999px;padding:3px 12px;flex:none}
.pick .head h3{margin:0;font-family:var(--serif);font-size:25px;font-weight:600}
.pick .best-for{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wire);width:100%}
.pick .body{padding:6px 24px 24px}
.pick .body p{margin-top:14px}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);margin-top:22px}
.proscons>div{padding:18px 24px}
.proscons>div+div{border-left:1px solid var(--line)}
.proscons b{font-size:12px;letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:10px}
.proscons .p b{color:var(--ok)}
.proscons .c b{color:var(--warn)}
.proscons ul{list-style:none;padding:0;font-size:15px}
.proscons li{position:relative;padding-left:22px}
.proscons li+li{margin-top:9px}
.proscons .p li::before{content:"+";position:absolute;left:4px;color:var(--ok);font-weight:700}
.proscons .c li::before{content:"\2212";position:absolute;left:4px;color:var(--warn);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}.proscons>div+div{border-left:0;border-top:1px solid var(--line)}}
.pick .foot{border-top:1px solid var(--line);background:var(--alt);padding:16px 24px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.pick .price{font-size:14px;color:var(--muted)}
.pick .price b{color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:11px 20px;border-radius:10px;border:1px solid transparent;transition:background .15s ease}
.btn:hover{background:var(--accent-2)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn.ghost:hover{background:var(--alt);color:var(--accent-2)}
.prose a.btn{text-decoration:none}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0}
.faq details+details{margin-top:12px}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-size:20px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:16px 20px;color:var(--muted);font-size:16px}
.faq .a p+p{margin-top:12px}

/* ---------- Verdict ---------- */
.verdict{border:1px solid var(--accent);border-radius:16px;padding:24px 26px;background:var(--surface)}
.verdict b.k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block}
.verdict h2{margin-top:8px !important;font-size:26px !important}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:var(--alt);padding:40px 0 48px;margin-top:20px}
footer .cols{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
footer .brand{font-size:16px}
footer nav{display:flex;gap:18px;margin:0;flex-wrap:wrap;overflow:visible}
footer nav a{color:var(--muted)}
.disc{color:var(--muted);font-size:12.5px;line-height:1.6;margin-top:22px;max-width:74ch}
.cop{color:var(--muted);font-size:12.5px;margin-top:14px}

/* ---------- Figures / charts ---------- */
.prose figure{margin-top:32px}
.prose figure img{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:block}
.prose figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.55}

/* ================================================================
   BRAND v2 — Mona Sans display type, logo lockup, language switcher,
   motion. Appended after the base so it wins on specificity ties.
   ================================================================ */

h1,h2,h3,.featured h2,.section h2.t,.card h3,.cat b,.trust .c b,
.pick .head h3,.verdict h2,.prose h2,.prose h3{
  font-family:var(--display);letter-spacing:-.022em
}
h1{font-weight:800}
h2,h3,.prose h2,.prose h3{font-weight:700}
.prose h2{letter-spacing:-.025em}

/* ---------- Logo lockup ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:800;font-size:19px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.brand img,.brand svg{width:26px;height:26px;flex:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.brand:hover img,.brand:hover svg{transform:translateY(-2px) rotate(-3deg)}
.brand .wm{white-space:nowrap}
.brand .wm i{font-style:normal;color:var(--blue)}

footer .brand{font-size:17px}
footer .brand img,footer .brand svg{width:23px;height:23px}

/* ---------- Top bar layout ---------- */
.top .in{gap:18px}
nav{gap:22px}
nav a{position:relative;padding:4px 0;transition:color .18s ease}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--brand-grad);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.4,0,.2,1)}
nav a:hover::after,nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- Language switcher ---------- */
.lang{position:relative;flex:none;margin-left:4px}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);
  border-radius:9px;padding:6px 10px;font:600 13px var(--sans);color:var(--muted);cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.lang-btn:hover{border-color:var(--accent);color:var(--ink)}
.lang-btn .flag{font-size:14px;line-height:1}
.lang-btn .chev{width:9px;height:9px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s ease}
.lang[open] .lang-btn .chev{transform:rotate(-135deg) translate(-2px,-2px)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:196px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:40;
  animation:langIn .18s cubic-bezier(.4,0,.2,1)}
@keyframes langIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.lang-menu a,.lang-menu span{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--ink);transition:background .15s ease}
.lang-menu a:hover{background:var(--alt)}
.lang-menu a[aria-current="true"]{background:var(--alt);font-weight:700}
.lang-menu span{color:var(--muted);cursor:default}
.lang-menu .soon{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.lang summary{list-style:none}
.lang summary::-webkit-details-marker{display:none}
@media(max-width:560px){.lang-btn .lbl{display:none}}

/* ---------- Motion: reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.reveal.d1.in{transition-delay:.06s}
.reveal.d2.in{transition-delay:.12s}
.reveal.d3.in{transition-delay:.18s}

/* ---------- Hero flourish ---------- */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-220px;right:-160px;width:520px;height:520px;border-radius:50%;
  background:var(--brand-grad);opacity:.10;filter:blur(70px);pointer-events:none}

.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-grad);flex:none}

/* ---------- Cards & interactive polish ---------- */
.card,.cat{box-shadow:var(--shadow)}
a.card:hover,.cat:hover{box-shadow:var(--shadow-lg)}
.featured{box-shadow:var(--shadow-lg)}
.featured .art{background:var(--brand-grad)}
.featured .cta{transition:gap .22s ease}
.featured:hover .cta{gap:13px}
.btn{box-shadow:0 1px 2px rgba(11,18,32,.08);transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.pick{transition:box-shadow .25s ease}
.pick:hover{box-shadow:var(--shadow-lg)}
.pick .rank{background:var(--brand-grad)}
.faq summary{transition:background .15s ease}
.faq summary:hover{background:var(--alt)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Language codes instead of flag emoji — Windows has no regional-indicator
   glyphs (they fall back to bare letters), and we are switching language,
   not country, so a code is also the more accurate label. */
.lang .code{display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:19px;
  border-radius:5px;background:var(--alt);border:1px solid var(--line);flex:none;
  font:700 10.5px/1 var(--sans);letter-spacing:.05em;color:var(--muted)}
.lang-btn:hover .code{border-color:var(--accent);color:var(--ink)}
.lang-menu a[aria-current="true"] .code{background:var(--brand-grad);color:#fff;border-color:transparent}

/* Mobile masthead: at narrow widths the nav could not fit on the same row as
   the logo and language switcher, and wrapped above the logo. Give it its own
   scrollable row instead — no JS, no hamburger, every section still one tap. */
@media(max-width:760px){
  .top .in{flex-wrap:wrap;height:auto;padding-top:11px;row-gap:0;column-gap:12px}
  .brand{order:1}
  .lang{order:2;margin-left:auto}
  nav{order:3;flex-basis:100%;width:100%;margin-left:0;padding:11px 0 9px;gap:20px;
    border-top:1px solid var(--line);margin-top:11px;font-size:13.5px}
  nav a{white-space:nowrap}
}

/* ---------- Card & featured artwork ----------
   Original SVG art per article: the number that decides the article becomes
   the image. Informative at thumbnail size, on-brand, no copyright risk. */
img.art{width:100%;height:100%;min-height:230px;object-fit:cover;padding:0;display:block;border:0}
.card .ph{padding:0;overflow:hidden;border-bottom:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.6,.3,1)}
a.card:hover .ph img{transform:scale(1.04)}
.card .meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:10px;font-weight:500}
.card .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);flex:none}

/* ================================================================
   ARTICLE LAYOUT v2 — full-bleed grid
   The body text stays at a readable measure (~75 characters), but
   tables, figures and ranked picks break out to the full column so
   the page uses the site's real width instead of looking like a
   narrow strip. This is the modern CSS Grid "full-bleed" pattern:
   named grid lines, no wrapper divs, no change to the HTML.
   ================================================================ */
.article .narrow{
  max-width:none;
  padding:0;
  display:grid;
  grid-template-columns:
    [full-start] minmax(22px, 1fr)
    [content-start] min(830px, 100% - 44px) [content-end]
    minmax(22px, 1fr) [full-end];
}
.article .narrow > *{grid-column:content}

/* These break out wider than the text column */
.article .prose > .table-scroll,
.article .prose > figure,
.article .prose > .pick,
.article .prose > .faq,
.article .prose > .verdict,
.article .prose > .toc{
  grid-column:full;
  width:min(1100px, 100%);
  margin-left:auto;
  margin-right:auto;
}
.article .prose > .toc{width:min(940px, 100%)}

/* .prose IS the .narrow grid container here (class="narrow prose"),
   so its children are already the grid items — no display:contents needed. */
.article .prose > * + *{margin-top:22px}
.article .prose > h2{margin-top:52px}
.article .prose > h3{margin-top:38px}

@media(max-width:900px){
  .article .narrow{
    grid-template-columns:[full-start] 20px [content-start] minmax(0,1fr) [content-end] 20px [full-end];
  }
  .article .prose > .table-scroll,
  .article .prose > figure,
  .article .prose > .pick,
  .article .prose > .faq,
  .article .prose > .verdict,
  .article .prose > .toc{width:100%}
}

/* ================================================================
   MASTHEAD v2 — taller, quieter, more product-like
   ================================================================ */
.top{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.top .in{height:70px;gap:0}
.top .wrap{max-width:1180px}
.brand{margin-right:38px}
nav{margin-left:0;gap:4px;font-size:14px;font-weight:500}
nav a{padding:8px 13px;border-radius:9px;color:var(--muted);
  transition:color .16s ease,background .16s ease}
nav a::after{display:none}
nav a:hover{color:var(--ink);background:var(--alt)}
nav a[aria-current="page"]{color:var(--ink);background:var(--alt);font-weight:600}
.top .lang{margin-left:auto}

/* A quiet credibility signal in the bar itself */
.verified-chip{display:inline-flex;align-items:center;gap:7px;margin-left:14px;padding:6px 12px;
  border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);
  white-space:nowrap}
.verified-chip .tick{width:14px;height:14px;border-radius:50%;background:var(--brand-grad);flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.verified-chip .tick svg{width:8px;height:8px;display:block}
@media(max-width:1080px){.verified-chip{display:none}}

@media(max-width:760px){
  .top .in{height:auto;padding-top:11px}
  nav{gap:2px;font-size:13px;padding:9px 0 8px;margin-top:10px}
  nav a{padding:7px 11px}
}

/* ================================================================
   FOOTER v2 — multi-column, with the disclosure given real weight
   ================================================================ */
footer{border-top:1px solid var(--line);background:var(--alt);padding:0;margin-top:56px}
footer .wrap{max-width:1180px}
.foot-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:52px 0 44px}
.foot-brand .brand{margin:0 0 14px}
.foot-brand p{color:var(--muted);font-size:14px;line-height:1.65;max-width:34ch}
.foot-col h4{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.foot-col a{display:block;font-size:14.5px;color:var(--ink);opacity:.78;padding:5px 0;
  transition:opacity .15s ease,transform .15s ease}
.foot-col a:hover{opacity:1;transform:translateX(2px)}
.foot-disc{border-top:1px solid var(--line);padding:22px 0;display:flex;gap:16px;align-items:flex-start}
.foot-disc .ico{width:26px;height:26px;border-radius:8px;background:var(--brand-grad);flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.foot-disc .ico svg{width:13px;height:13px;display:block}
.foot-disc p{color:var(--muted);font-size:13px;line-height:1.65;max-width:88ch}
.foot-disc strong{color:var(--ink)}
.foot-legal{border-top:1px solid var(--line);padding:20px 0 34px;display:flex;flex-wrap:wrap;
  gap:8px 20px;align-items:center;justify-content:space-between;color:var(--muted);font-size:12.5px}
.foot-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.foot-legal a:hover{color:var(--ink)}
@media(max-width:860px){
  .foot-main{grid-template-columns:1fr 1fr;gap:34px;padding:42px 0 34px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:520px){
  .foot-main{grid-template-columns:1fr}
  .foot-legal{flex-direction:column;align-items:flex-start}
}

/* ---------- Brand marks ----------
   Nominative use: the vendor's own logo identifies the product under review.
   Where we could not obtain an official asset, a typographic mark keeps the
   layout consistent rather than leaving a gap. */
.brandmark{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;padding:9px;border-radius:12px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.brandmark img{width:100%;height:100%;object-fit:contain}
.brandmark.txt{padding:0;font:800 13px var(--display);letter-spacing:-.04em;color:var(--ink)}
.brandmark.lg{width:58px;height:58px;padding:11px}
.brandmark.lg.txt{font-size:15px}

.pick .head{align-items:center;gap:12px 14px;padding-top:22px}
.pick .head .brandmark{order:-1}
.pick .head .rank{order:-2}

/* Comparison lockup: logo vs logo */
.vs-lockup{display:flex;align-items:center;justify-content:center;gap:22px;
  padding:26px 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
  box-shadow:var(--shadow)}
.vs-lockup .side{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:96px}
.vs-lockup .side b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.vs-lockup .vs{font:800 13px var(--display);letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;padding:0 4px}
@media(max-width:480px){.vs-lockup{gap:14px;padding:20px 14px}.vs-lockup .side{min-width:0}}

/* Official product screenshot */
.prose figure.shot img{border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.shot-credit{font-size:12.5px;color:var(--muted);margin-top:8px}

/* ---------- Brand logos overlaid on card artwork ----------
   The number stays the hook (legible at thumbnail size, and it's what
   differentiates us); the logos give the instant "I know that product"
   recognition. Both, rather than one instead of the other. */
.card .ph{position:relative}
.ph-logos{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;z-index:2}
.ph-logos .brandmark{width:34px;height:34px;padding:7px;border-radius:9px;
  box-shadow:0 2px 8px rgba(11,18,32,.18);border-color:transparent}
.ph-logos .brandmark.txt{font-size:10.5px;letter-spacing:-.03em}
.ph-logos .sep{color:#fff;font:700 10px var(--sans);opacity:.85;letter-spacing:.06em;
  text-shadow:0 1px 3px rgba(11,18,32,.4)}
@media(max-width:560px){.ph-logos .brandmark{width:30px;height:30px;padding:6px}}

/* ---------- ONE article width ----------
   Earlier the text sat at 830px while tables, FAQ, verdict and figures broke
   out to 1100px. Mixing widths made the page look misaligned. Everything now
   shares a single measure; only wide tables scroll inside their own box. */
.article .narrow{
  grid-template-columns:
    [full-start] minmax(22px, 1fr)
    [content-start] min(900px, 100% - 44px) [content-end]
    minmax(22px, 1fr) [full-end];
}
.article .prose > .table-scroll,
.article .prose > figure,
.article .prose > .pick,
.article .prose > .faq,
.article .prose > .verdict,
.article .prose > .toc{
  grid-column:content;
  width:100%;
  margin-left:0;
  margin-right:0;
}
@media(max-width:900px){
  .article .narrow{
    grid-template-columns:[full-start] 20px [content-start] minmax(0,1fr) [content-end] 20px [full-end];
  }
}

/* ---------- Related reading ---------- */
.related{grid-column:content;margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.related h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.022em;margin:0}
.related .grid{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.related .card h3{font-size:16.5px;line-height:1.3}
.related .card .b{padding:14px 16px 18px}
.related .card .ph{aspect-ratio:16/9}
@media(max-width:820px){.related .grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.related .grid{grid-template-columns:1fr}}

/* ---------- Top pick: make the recommendation unmistakable ----------
   Our verdicts are conditional ("best FOR this reader"), never an absolute
   winner — so the badge says "top pick", the sub-line always names who it
   suits, and the other picks keep equal visual weight below. */
.pick.top-pick{border-color:var(--accent);border-width:2px;box-shadow:var(--shadow-lg);position:relative}
.pick.top-pick .head{padding-top:28px}
.top-badge{position:absolute;top:-13px;left:24px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:var(--brand-grad);color:#fff;font:800 11px var(--display);letter-spacing:.11em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 4px 14px rgba(37,99,235,.35)}
.top-badge svg{width:11px;height:11px;display:block;flex:none}
.pick.top-pick .rank{background:var(--brand-grad)}
.pick.top-pick .foot{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--alt)) 0%, var(--alt) 100%)}
.pick.top-pick .foot .btn{box-shadow:0 4px 14px rgba(37,99,235,.28)}

/* Verdict box: give the actual recommendation more presence */
.verdict{border-width:2px;box-shadow:var(--shadow-lg)}
.verdict b.k{display:inline-flex;align-items:center;gap:7px}
.verdict b.k::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--brand-grad);flex:none}

/* Anchors now live on the card itself, so keep them clear of the sticky header */
.pick[id]{scroll-margin-top:96px}
.pick .head h2{margin:0;font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.022em}

/* The badge hangs off the top edge, so the highlighted card cannot clip its
   own children. Radius is restored on the inner blocks that used to rely on
   the parent's overflow:hidden to get rounded corners. */
.pick.top-pick{overflow:visible}
.pick.top-pick .foot{border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.pick.top-pick .proscons > div:first-child{border-bottom-left-radius:0}
.top-badge{top:-14px;white-space:nowrap}

/* ---------- Paired CTA for comparisons ----------
   A comparison needs an exit at the point of decision, not only at the end.
   Both options are shown side by side with equal weight, and the one that
   pays us nothing says so — the reader picks, not the commission. */
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px;
  padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--alt)}
.cta-pair .opt{display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.cta-pair .opt .who{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent)}
.cta-pair .opt b{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.02em}
.cta-pair .opt p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.cta-pair .opt .btn{margin-top:auto;width:100%;justify-content:center}
.cta-pair .opt .fine{font-size:11.5px;color:var(--muted);line-height:1.45}
.cta-pair .brandmark{width:38px;height:38px;padding:8px}
@media(max-width:620px){.cta-pair{grid-template-columns:1fr;padding:16px}}

/* ---------- Inline CTA (playbook: three positions per review) ----------
   Placed after the short verdict and after pricing — the two points where a
   reader has actually decided. Offer and commission notice always visible. */
.cta-inline{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;
  margin-top:26px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--alt)) 0%, var(--alt) 100%)}
.cta-inline-txt{flex:1 1 300px;min-width:0}
.cta-inline-txt b{display:block;font-family:var(--display);font-size:16.5px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink)}
.cta-inline-txt p{margin:6px 0 0;font-size:14.5px;color:var(--muted);line-height:1.55}
.cta-inline-act{display:flex;flex-direction:column;align-items:flex-start;gap:7px;flex:0 0 auto}
.cta-inline-act .fine{font-size:11.5px;color:var(--muted)}
@media(max-width:620px){.cta-inline{padding:18px}.cta-inline-act{width:100%}.cta-inline-act .btn{width:100%;justify-content:center}}

/* Homepage screenshot inside a ranked pick */
.pick-shot{margin:0 0 4px}
.pick-shot img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;display:block}
.prose figure.shot{margin-top:26px}
.prose figure.shot figcaption{font-size:14px;color:var(--muted);margin-top:10px;line-height:1.55}