/* Shared rules for the news layouts (N1 Newspaper, N2 Tech magazine, N3 Reader).
   build.py prepends this file to themes/n1.css, n2.css or n3.css in dist/. Each theme file sets fonts and colours. */
body{font-size:var(--fs-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font-head);color:var(--text)}
a{color:var(--link)}
.wrap{width:calc(100% - 32px)}
/* slim sticky header: wordmark left, search + Contact right */
.nav{background:var(--nav-bg);backdrop-filter:none}
.nav .wrap{min-height:56px}
.wm{font-family:var(--font-wm);color:var(--wm);text-decoration:none;white-space:nowrap;gap:0}
.by{border:0;background:none;padding:2px 0;margin-left:12px;font:500 12.5px/1.2 var(--font-ui);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.by:hover{color:var(--text)}
.nav-links{font:500 15px var(--font-ui);gap:8px}
.nav-links a{color:var(--nav-ink)}
.search-btn{border-radius:var(--r-btn)}
.nav-links .main-link{border-radius:var(--r-btn);padding:7px 14px;min-height:40px;display:inline-flex;align-items:center}
.subnav{background:var(--subnav-bg)}
.subnav a{font:600 14px var(--font-ui);border-radius:0;color:var(--nav-ink)}
.subnav a[aria-current="page"],.subnav a:hover{background:none;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
@media (max-width:860px){.subnav::after{background:linear-gradient(90deg,transparent,var(--subnav-bg))}}
/* shared story furniture */
.kicker{margin:0 0 6px;font:700 12.5px/1.3 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--kicker)}
.kicker a{color:inherit;text-decoration:none}.kicker a:hover{text-decoration:underline}
.meta{font:400 13.5px/1.45 var(--font-ui);color:var(--muted);margin:6px 0 0}
.dek{color:var(--muted);margin:6px 0 0}
.dtag{display:inline-block;margin-left:6px;font:700 10.5px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:3px 5px;border-radius:3px;vertical-align:2px}
h2 a,h3 a{color:inherit;text-decoration:none}h2 a:hover,h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.img{display:block;overflow:hidden;background:var(--line)}.img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.rule-h{font:800 13px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px;padding-top:10px;border-top:2px solid var(--text)}
.tstrip{margin:34px auto 10px}.tstrip h2{font:800 13px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
.tstrip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.tstrip a{font:600 15px/1.6 var(--font-ui);color:var(--text)}.tstrip a.all{color:var(--link)}
/* article */
.art-head{padding:26px 0 6px}
.art-head h1{font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:var(--h1-ls);margin:4px 0 12px}
.art-head .lead{font:var(--dek-font);color:var(--dek-ink);max-width:var(--measure);margin:0 0 14px}
.art-pills{margin:0 0 8px}
.byline{font:400 14.5px/1.5 var(--font-ui);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.byline .av{background:var(--text);color:var(--bg)}
.tpills{margin:0 0 12px}
.art-cover{margin:18px 0 8px}.art-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-img)}
.prose{font-family:var(--font-prose);font-size:var(--fs-prose);line-height:var(--lh)}
.prose h2{font-size:var(--h2p);line-height:1.25;margin-top:1.7em}.prose h3{font-size:calc(var(--h2p) * .8);margin-top:1.4em}
.prose a{color:var(--link);text-decoration-thickness:1px}
.prose li{margin:.3em 0}
/* editor's notes (blockquote) are quiet boxes; pull quotes use a paragraph with {: .pull} */
.prose blockquote{font:400 16px/1.6 var(--font-ui);background:var(--note-bg);border:0;border-left:3px solid var(--text);border-radius:0;padding:12px 16px;color:var(--text)}
.prose blockquote p{margin:0}
.prose .pull{font:var(--pull-font);color:var(--text);border-top:2px solid var(--text);border-bottom:1px solid var(--line-strong);padding:14px 0;margin:1.4em 0;max-width:30ch}
/* clean tables */
.prose table,.cmp table{font:400 15.5px/1.5 var(--font-ui)}
.prose th,.prose td{border:0;border-bottom:1px solid var(--line);padding:9px 12px 9px 0}
.prose thead th,.cmp thead th{background:none;color:var(--text);font:700 12.5px/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--text)}
.cmp-scroll{border-radius:var(--r-box);box-shadow:none}
.cmp tbody th{color:var(--text)}.cmp .pick{color:var(--kicker)}
.toc,.sources,.rbox,.tasks,.updlog,.transcript,.author-box,.disc,.ct-page,.ct-list li,.empty-hub,.tlist li{border-radius:var(--r-box);box-shadow:none}
.sources h2,.tasks h3{color:var(--muted)}
.cta{animation:none;background:var(--note-bg);border:1px solid var(--line);border-radius:var(--r-box)}
.btn{background:var(--btn);color:var(--btn-ink);border-radius:var(--r-btn)}.btn:hover{background:var(--btn)}
.btn.em{background:var(--btn);color:var(--btn-ink)}
.btn.ghost{background:var(--bg);color:var(--text);border-color:var(--line-strong)}
.pill{border-radius:3px;background:var(--note-bg);color:var(--text)}
.pill.creators,.pill.mint{background:var(--note-bg);color:var(--text)}
.pill.vid-p{background:var(--text);color:var(--bg)}
.tested,.appr{border-radius:3px;background:var(--note-bg);color:var(--text)}
.card{border-radius:var(--r-box);box-shadow:none}.card:hover{transform:none}.card h3 a{color:var(--text)}
.card .thumb{aspect-ratio:16/9}
.tcard a{border-radius:var(--r-box);box-shadow:none;border-top-color:var(--text)}.tcard strong{color:var(--text)}.tcard em{color:var(--kicker)}
.tchips a,.tpill,.chip,.me-links a{border-radius:var(--r-btn)}
.chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.eyebrow{background:none;padding:0;color:var(--kicker);border-radius:0}
.nl{border-radius:var(--r-box)}
.ct-dialog{border-radius:var(--r-box)}
.pc .pros,.pc .cons,.facts div{border-radius:var(--r-box)}
.list-head h1{font-size:clamp(32px,5vw,46px)}
footer{background:var(--foot-bg);border-top:1px solid var(--line-strong)}
.foot-links{font-family:var(--font-ui)}.foot-links a{color:var(--foot-ink)}
:focus-visible{outline:3px solid var(--focus)}
.search-box{--pagefind-ui-primary:var(--text);--pagefind-ui-text:var(--text);--pagefind-ui-border:var(--line-strong);--pagefind-ui-tag:var(--note-bg);--pagefind-ui-border-radius:var(--r-btn)}
.search-box mark{background:var(--mark);color:var(--text)}
.wm{display:inline-block}
.art-head h1 .dtag{font-size:11px;vertical-align:middle;margin-left:10px;letter-spacing:.08em}
.front .lead,.hero2 .lead{max-width:none;font-size:inherit;color:inherit;margin:0}
@media (max-width:640px){.cmp tbody tr{border-radius:var(--r-box);box-shadow:none}}

/* n5 "Colour sections" (v5). Built on N1's readable base: Literata body 18-19px, ~65ch, AAA ink.
   One colour per section (Reviews plum, Comparisons indigo, Guides green, News blue) for labels, bands and accents. No coral.
   Fonts (v6): Public Sans (headlines, labels) + Literata (reading text), both SIL OFL, self-hosted. */
@font-face{font-family:"Literata";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/literata-400-700.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:400 600;font-display:swap;src:url(/fonts/literata-italic-400-600.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/publicsans-400-800.woff2) format("woff2")}
:root{--font-head:"Public Sans",Arial,Helvetica,sans-serif;--font-ui:var(--font-head);--font-prose:"Literata",Georgia,serif;--font-body:var(--font-prose);--font-wm:var(--font-head);
  /* section colours (text-safe on white and on their tints) */
  --c-reviews:#8A1F5C;--t-reviews:#FBEFF5;--c-compare:#3F36B0;--t-compare:#EFEEFC;--c-guides:#175C34;--t-guides:#EAF5EE;--c-news:#0A4F8F;--t-news:#E8F1FA;
  --c-business:#6B4100;--t-business:#FFF4E0;--c-creators:#09564F;--t-creators:#E3F4F2;
  --bg:#FFFFFF;--surface:#FFFFFF;--text:#141414;--muted:#4A4A4A;--link:#1F3FA8;--kicker:#141414;--wm:#141414;--nav-ink:#141414;
  --line:#E3E3E3;--line-strong:#141414;--note-bg:#F6F5F2;--mark:#FFF0A8;--focus:#3F36B0;--nav-bg:rgba(255,255,255,.97);--subnav-bg:#FFFFFF;--foot-bg:#141414;--foot-ink:#F2F2F2;
  --btn:#141414;--btn-ink:#FFFFFF;--navy:#141414;--navy2:#1F3FA8;--sky:#F6F5F2;--sky-line:#D9D9D9;--em:#141414;--mint:#F6F5F2;
  --r:14px;--r-box:14px;--r-btn:999px;--r-img:12px;--shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.05);--wrap:1180px;
  --fs-body:17px;--fs-prose:18px;--lh:1.7;--measure:65ch;
  --h1:clamp(32px,6.2vw,52px);--h1-lh:1.08;--h1-ls:-.022em;--h2p:26px;
  --dek-font:400 19px/1.55 "Literata",Georgia,serif;--dek-ink:#333333;--pull-font:italic 500 26px/1.35 "Literata",Georgia,serif;color-scheme:light}
@media (min-width:900px){:root{--fs-prose:19px}}
/* section colour hooks */
.k-reviews{--c:var(--c-reviews);--t:var(--t-reviews)}.k-compare{--c:var(--c-compare);--t:var(--t-compare)}
.k-guides{--c:var(--c-guides);--t:var(--t-guides)}.k-news{--c:var(--c-news);--t:var(--t-news)}
.sec-reviews{--c:var(--c-reviews);--t:var(--t-reviews)}.sec-compare{--c:var(--c-compare);--t:var(--t-compare)}
.sec-guides{--c:var(--c-guides);--t:var(--t-guides)}.sec-news{--c:var(--c-news);--t:var(--t-news)}
h1,h2,h3{font-weight:800;letter-spacing:-.018em}
body{display:flex;flex-direction:column;min-height:100vh}main{flex:1 0 auto}
/* ---------- masthead ---------- */
.nav{border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.nav::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--c-reviews) 0 25%,var(--c-compare) 25% 50%,var(--c-guides) 50% 75%,var(--c-news) 75%)}
.nav .wrap{min-height:58px}
.wm{display:inline-flex;align-items:center;gap:7px;font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1}
.wm .wm-a{background:#141414;color:#FFFFFF;border-radius:7px;padding:4px 6px 5px;font-size:.86em;letter-spacing:-.02em}
.wm .wm-b{font-family:"Literata",Georgia,serif;font-style:italic;font-weight:500;font-size:1.08em;letter-spacing:-.01em}
.by{font-size:12px;margin-left:12px;text-decoration-color:#9A9A9A}
.nav-links a{font-weight:600}
.nav-links .main-link{background:#141414;color:#FFFFFF;border:0;font-weight:700}
.search-btn:hover{background:var(--note-bg)}
.subnav{border-bottom:1px solid var(--line)}
.subnav .wrap{gap:4px;padding:6px 0}
.subnav a{font:700 14px var(--font-ui);padding:7px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.subnav a[href="/reviews/"]::before,.subnav a[href="/compare/"]::before,.subnav a[href="/guides/"]::before,.subnav a[href="/news/"]::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot)}
.subnav a[href="/reviews/"]{--dot:var(--c-reviews)}.subnav a[href="/compare/"]{--dot:var(--c-compare)}.subnav a[href="/guides/"]{--dot:var(--c-guides)}.subnav a[href="/news/"]{--dot:var(--c-news)}
.subnav a[aria-current="page"],.subnav a:hover{background:var(--note-bg);text-decoration:none}
@media (min-width:900px){.subnav .wrap{justify-content:center}}
/* ---------- labels ---------- */
.kicker{font:800 12px/1.3 var(--font-ui);letter-spacing:.09em;margin:0 0 8px;color:var(--muted)}
.kicker a:first-child{display:inline-block;background:var(--c,#141414);color:#FFFFFF;padding:4px 9px 3px;border-radius:999px;text-decoration:none}
.kicker a+a,.kicker a:not(:first-child){color:var(--c,#141414);background:none;padding:0}
.meta{font:500 13.5px/1.45 var(--font-ui);color:var(--muted)}
.dek{font:400 17px/1.55 "Literata",Georgia,serif;color:#333333}
.dtag{border-radius:999px}
/* ---------- images ---------- */
.img,.thumb,.lt-img{display:block;overflow:hidden;border-radius:var(--r-img);background:var(--t,#F2F2F2)}
.img img,.thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s}
a.img:hover img,a.thumb:hover img{transform:scale(1.02)}
.noimg{display:grid;place-items:center;aspect-ratio:16/9;font:800 14px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--c,#141414)}
/* ---------- home bands ---------- */
.band{padding:40px 0}
@media (min-width:900px){.band{padding:56px 0}}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:22px}
.band-head h2{font-size:clamp(24px,3.2vw,32px);margin:0;position:relative;padding-left:16px}
.band-head h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:6px;border-radius:3px;background:var(--band-c,#141414)}
.band-head h2 a{color:inherit;text-decoration:none}
.band-head p{margin:0;color:var(--muted);font:400 16px/1.5 var(--font-ui);flex:1 1 280px}
.band-head .more{font:700 14px var(--font-ui);color:var(--band-c,#141414);text-decoration:none;white-space:nowrap;margin-left:auto}
.band-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:700px){.band-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.band-grid{grid-template-columns:repeat(3,1fr);gap:32px}.band-grid.with-img{grid-template-columns:1.1fr repeat(3,1fr)}}
.band-img{margin:0}.band-img img{display:block;width:100%;height:100%;min-height:200px;object-fit:cover;border-radius:var(--r-img)}
@media (max-width:999px){.band-img{display:none}}
.c5{display:flex;flex-direction:column;gap:12px}
.c5 h3{font-size:21px;line-height:1.2;margin:0}.c5 h3 a{color:var(--text)}
.c5 .dek{margin:2px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tint-compare{background:var(--t-compare);--band-c:var(--c-compare)}
.tint-business{background:var(--t-business);--band-c:var(--c-business)}
.tint-creators{background:var(--t-creators);--band-c:var(--c-creators)}
.tint-compare .c5,.tint-business .c5,.tint-creators .c5{background:#FFFFFF;border-radius:var(--r);padding:12px 12px 18px;box-shadow:var(--shadow)}
.tint-compare .c5-body,.tint-business .c5-body,.tint-creators .c5-body{padding:0 6px}
/* lead */
.lead5{padding-top:28px;padding-bottom:36px}
.lead5-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media (min-width:900px){.lead5-grid{grid-template-columns:1.45fr 1fr;gap:44px}}
.lead5 .img{border-radius:16px}.lead5 .img img{aspect-ratio:16/9}
.lead5 h2{font-size:clamp(30px,4.6vw,46px);line-height:1.06;margin:4px 0 12px;letter-spacing:-.025em}
.lead5 h2 a{color:var(--text)}
.lead5 .dek{font-size:20px;line-height:1.5}
.tops5{border-top:1px solid var(--line);--band-c:#141414}
/* latest */
.latest5{--band-c:#141414;border-top:1px solid var(--line)}
.lt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 40px}
@media (min-width:900px){.lt{grid-template-columns:1fr 1fr}}
.lt li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.lt-img img{width:96px;height:96px;object-fit:cover;display:block}
.lt-img .noimg{width:96px;height:96px;aspect-ratio:auto;font-size:10px}
.lt h3{font-size:18px;line-height:1.25;margin:0}.lt h3 a{color:var(--text)}
.lt .kicker{margin-bottom:6px}.lt .meta{margin-top:4px}
/* topics */
.topics5{background:#141414;color:#FFFFFF;--band-c:#FFFFFF}
.topics5 .band-head h2{color:#FFFFFF}
.tchips5{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tchips5 a{display:inline-block;padding:10px 16px;border-radius:999px;background:#262626;color:#FFFFFF;text-decoration:none;font:700 15px var(--font-ui)}
.tchips5 a:hover{background:#3A3A3A}.tchips5 a.all{background:#FFFFFF;color:#141414}
/* ---------- article ---------- */
.art-head{padding-top:30px}
.art-head h1{font-weight:800}
.art-head .kicker{margin-bottom:12px}
.byline{border-top:0;padding-top:4px}
.byline .av{background:var(--c,#141414)}
.art-hero{margin:22px 0 10px}
@media (min-width:900px){.art-hero{width:min(1080px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}}
.art-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
.art-hero figcaption{font:500 13px/1.4 var(--font-ui);color:var(--muted);margin-top:8px}
.prose h2{font-size:clamp(24px,3vw,28px);line-height:1.2;margin-top:1.9em;padding-top:14px;position:relative}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:5px;border-radius:3px;background:var(--c,#141414)}
.prose h3{font:800 20px/1.3 var(--font-head);margin-top:1.5em}
.prose strong{font-weight:700}
.prose a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul li::marker{color:var(--c,#141414)}
.prose blockquote{background:var(--t,#F6F5F2);border-left:5px solid var(--c,#141414);border-radius:0 12px 12px 0;font:400 16.5px/1.6 var(--font-ui);padding:14px 18px}
.prose .pull{border:0;border-left:6px solid var(--c,#141414);padding:6px 0 6px 20px;max-width:34ch;color:var(--c,#141414)}
/* boxes made from the post's own sections */
.box{border-radius:16px;padding:6px 22px 18px;margin:28px 0;position:relative}
.box .box-label{display:inline-block;margin:16px 0 0;font:800 12px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF;background:var(--c,#141414);padding:6px 10px 5px;border-radius:999px}
.box h2{margin-top:10px;padding-top:0}.box h2::before{display:none}
.kt{background:var(--t,#F6F5F2);border:1px solid color-mix(in srgb,var(--c,#141414) 22%,transparent)}
.whofor{background:#FFF4E0;border:1px solid #F0D9AE;--c:var(--c-business)}
.box>:last-child{margin-bottom:0}
@media (max-width:640px){.box{padding:4px 16px 14px;margin-left:-4px;margin-right:-4px}}
/* verdict box (reviews) */
.rbox{border:2px solid var(--c,#141414);border-radius:16px;box-shadow:none;padding:0;overflow:hidden}
.rbox-top{background:var(--c,#141414);color:#FFFFFF;padding:16px 20px}
.rbox-top .meta,.rbox-top h2,.rbox-top h2 a{color:#FFFFFF}
.rbox .verdict{font:500 19px/1.55 "Literata",Georgia,serif;padding:0 20px;margin:16px 0}
.rbox .facts{padding:0 20px}.rbox .facts div{background:var(--t,#F6F5F2);border:0}
.rbox .pc{padding:0 20px}.rbox>.meta:last-child{padding:0 20px 18px}
.rbox .tasks{margin:0 20px 14px}
.pc .pros{background:#EAF5EE}.pc .cons{background:#FBEFF5}.pc .pros h3{color:#175C34}.pc .cons h3{color:#8A1F5C}
/* tables */
.prose table,.cmp table{font:400 15.5px/1.5 var(--font-ui)}
.prose thead th,.cmp thead th{background:var(--c,#141414);color:#FFFFFF;border:0;padding:11px 12px}
.prose th,.prose td{padding:10px 12px}
.prose tbody tr:nth-child(even) td,.cmp tbody tr:nth-child(even)>*{background:#F7F7F5}
.prose table{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.cmp-scroll{border:0;box-shadow:0 0 0 1px var(--line);border-radius:12px}
.cmp h2{font-size:24px}
.cmp tbody th{color:var(--text)}.cmp .pick{color:var(--c,#141414)}
@media (max-width:640px){
  .cmp-scroll{box-shadow:none}
  .cmp tbody tr{border-radius:12px;border:1px solid var(--line);border-top:5px solid var(--c,#141414);box-shadow:none}
  .cmp tbody tr:nth-child(even)>*{background:none}
  .prose table.stack{display:block;overflow:visible;box-shadow:none;border-radius:0}
  .prose table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prose table.stack tbody,.prose table.stack tr,.prose table.stack td{display:block;width:100%}
  .prose table.stack tr{margin:0 0 12px;border:1px solid var(--line);border-top:5px solid var(--c,#141414);border-radius:12px;padding:8px 14px}
  .prose table.stack tbody tr:nth-child(even) td{background:none}
  .prose table.stack td{display:grid;grid-template-columns:40% 1fr;gap:10px;border:0;padding:4px 0}
  .prose table.stack td::before{content:attr(data-label);font:700 11.5px/1.5 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .prose table.stack td:first-child{display:block;font:800 18px/1.3 var(--font-head);padding-bottom:6px}
  .prose table.stack td:first-child::before{display:none}}
.toc{background:var(--note-bg);border:0;border-radius:14px;font-family:var(--font-ui)}
.toc summary{font-weight:800}
.tasks,.updlog,.sources,.author-box{border-radius:14px}
.sources{background:var(--note-bg);border:0;font-family:var(--font-ui)}
.disc{border:0;background:var(--note-bg);font-family:var(--font-ui)}
.appr,.tested{background:var(--t,#F6F5F2);color:var(--text);border-radius:999px;padding:4px 10px;font:600 13px var(--font-ui)}
.pill{background:var(--note-bg);color:var(--text);border-radius:999px}
.pill.vid-p{background:#141414;color:#FFFFFF}
.pill.sample-p{background:#FFF0A8;color:#4A3B00}
/* listing pages + cards */
.list-head{padding:30px 0 16px;border-bottom:1px solid var(--line);margin-bottom:24px}
.list-head .lead{font:400 19px/1.5 "Literata",Georgia,serif;color:#333333}
.card{border:0;box-shadow:var(--shadow);border-radius:var(--r)}
.card .thumb{border-radius:var(--r) var(--r) 0 0}
.card h3{font-size:20px;line-height:1.22}.card p{font:400 16px/1.5 "Literata",Georgia,serif}
.blk-head h2{font-size:24px}
.tcard a{border-radius:14px;box-shadow:var(--shadow);border:0;border-top:5px solid #141414}
.ct-page{border-radius:16px;box-shadow:var(--shadow);border:0}
.ct-dialog{border-radius:16px}
.ct-dialog .ct-box{border-top:5px solid #141414}
.chip,.tchips a,.tpill{border-radius:999px}
/* footer */
footer{background:#141414;color:#D6D6D6;border-top:0;margin-top:0;padding:30px 0 34px}
.foot-links{font:500 14px var(--font-ui);color:#D6D6D6}
.foot-links nav a{color:#F2F2F2;font-weight:600}
.foot-links span a{color:#FFFFFF}
@media (max-width:640px){.foot-links{flex-direction:column;align-items:flex-start;gap:14px}}
.search-box{--pagefind-ui-border-radius:12px;--pagefind-ui-primary:#141414}
/* phones: bands become swipeable rails so the page stays short and calm */
@media (max-width:699px){
  .band{padding:32px 0}
  .band-grid{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -16px;padding:2px 16px 10px;scrollbar-width:none}
  .band-grid::-webkit-scrollbar{display:none}
  .band-grid>*{scroll-snap-align:start}
  .c5 .dek{-webkit-line-clamp:2}
  .band-head{margin-bottom:16px}
  .band-head p{font-size:15px}}
/* listing + topic cards: section colour */
.card .kicker{margin:0 0 6px}
.tcard[class*="k-"] a{border-top-color:var(--c)}.tcard[class*="k-"] em{color:var(--c)}
.card .body p.kicker{font:800 12px/1.3 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.card .body p.kicker a{font:inherit}

/* =================== v6: navigation, sidebar, TOC, ads, contact, about =================== */
/* ---- type tuning for Literata (wider, taller x-height than Newsreader) ---- */
.dek{font-size:16.5px;line-height:1.55}
.lead5 .dek{font-size:18.5px}
.list-head .lead,.card p{font-size:16px}
.list-head .lead{font-size:18px}
.rbox .verdict{font-size:18px}
.wm .wm-b{font-weight:500;font-size:1.02em}
/* ---- section bar: explicit labels, obvious current page ---- */
.subnav .wrap{gap:6px;padding:7px 0}
.subnav a{font:700 14.5px var(--font-ui);padding:8px 14px;border-radius:999px;color:#141414;border:1.5px solid transparent}
.subnav a.k-reviews::before,.subnav a.k-compare::before,.subnav a.k-guides::before,.subnav a.k-news::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.subnav a:hover{background:var(--note-bg);text-decoration:none}
.subnav a[aria-current="page"]{background:var(--c,#141414);color:#FFFFFF;border-color:var(--c,#141414)}
.subnav a[aria-current="page"]::before{background:#FFFFFF!important}
.subnav .sn-home::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>') center/contain no-repeat}
.subnav .sn-tools,.subnav .sn-topics{margin-left:0}
@media (min-width:900px){.subnav .wrap{justify-content:center}.subnav .sn-tools{margin-left:14px;position:relative}.subnav .sn-tools::after{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:1px;background:var(--line)}}
/* ---- mobile menu ---- */
.menu-btn{display:none;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line);background:#FFFFFF;color:#141414;font:700 14.5px var(--font-ui);cursor:pointer}
.menu-btn[aria-expanded="true"]{background:#141414;color:#FFFFFF;border-color:#141414}
@media (max-width:1023px){.menu-btn{display:inline-flex}}
@media (max-width:420px){.menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.menu-btn{padding:0 10px}}
.site-menu{border-top:1px solid var(--line);background:#FFFFFF;max-height:calc(100vh - 64px);overflow:auto;box-shadow:0 18px 30px rgba(0,0,0,.08)}
.site-menu .wrap{padding:14px 0 22px}
.sm-h{font:800 12px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 0 8px}
.sm-top,.sm-more{list-style:none;margin:0;padding:0}
.sm-top a,.sm-more a{display:block;padding:11px 4px;font:700 16px var(--font-ui);color:#141414;text-decoration:none;border-bottom:1px solid var(--line)}
.sm-more{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.sm-more a{font-weight:600;font-size:15px}
@media (min-width:1024px){.site-menu{display:none!important}}
html.menu-open{overflow:hidden}
/* ---- section shortcuts (sidebar + menu) ---- */
.side-sc{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.side-sc a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--t);color:#141414;text-decoration:none;font:700 15.5px var(--font-ui)}
.side-sc a:hover{box-shadow:inset 0 0 0 1.5px var(--c)}
.side-sc .dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.side-sc .nm{flex:1}
.side-sc .cnt{min-width:28px;text-align:center;background:var(--c);color:#FFFFFF;border-radius:999px;padding:2px 8px;font:800 13px var(--font-ui)}
.sm-sc{grid-template-columns:1fr 1fr;margin:6px 0 4px}
/* ---- page + sidebar layout ---- */
.ws{display:block}
@media (min-width:1024px){
  .ws{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;width:calc(100% - 48px);max-width:1240px;margin:0 auto;align-items:start}
  .ws .ws-main .wrap{width:auto;max-width:none;margin:0}
  .ws-home .band{border-radius:20px;padding:30px 28px;margin:0 0 26px}
  .ws-home .lead5{padding:28px 0 26px}.ws-home .tops5,.ws-home .latest5{border-top:0;padding-left:0;padding-right:0;padding-top:10px}
  .ws-home .lead5-grid{grid-template-columns:1.25fr 1fr;gap:32px}
  .ws-home .lead5 h2{font-size:clamp(28px,3vw,38px)}
  .ws-home .band-grid,.ws-home .band-grid.with-img{grid-template-columns:repeat(3,1fr);gap:24px}
  .ws-home .band-img{display:none}
  .ws-home .topics5{margin-bottom:40px}
  .ws-home .lt{grid-template-columns:1fr}
  .ws-list .grid-in .grid{grid-template-columns:repeat(2,1fr)}
  .side{padding-top:28px;display:flex;flex-direction:column;gap:22px;align-self:stretch}
  .side-stick{position:sticky;top:84px;display:flex;flex-direction:column;gap:22px}}
@media (max-width:1023px){
  .ws-home .side,.ws-list .side{display:none}
  .ws-art .side{width:calc(100% - 32px);max-width:760px;margin:10px auto 0;display:flex;flex-direction:column;gap:18px}
  .ws-art .sb-sc{display:none}
  .grid-in{width:calc(100% - 32px);margin:0 auto}
  .lh-in{width:calc(100% - 32px);margin:0 auto}}
/* ---- sidebar blocks ---- */
.sb{background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:16px 16px 18px}
.sb h2{font:800 13px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px;color:#141414;display:flex;align-items:center;gap:8px}
.sb h2::before{content:"";width:5px;height:16px;border-radius:3px;background:#141414}
.sb-pk{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sb-pk li{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:start}
.sp-img{display:block;border-radius:10px;overflow:hidden;background:var(--t)}
.sp-img img{display:block;width:78px;height:56px;object-fit:cover}.sp-img .noimg{width:78px;height:56px;font-size:9px;aspect-ratio:auto}
.sp-k{margin:0 0 2px;font:800 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.sb-pk a{font:700 14.5px/1.3 var(--font-ui);color:#141414;text-decoration:none}.sb-pk a:hover{text-decoration:underline}
.sb-tp{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.sb-tp a{display:inline-block;padding:6px 11px;border-radius:999px;background:var(--note-bg);color:#141414;font:600 13.5px var(--font-ui);text-decoration:none}
.sb-tp a:hover{background:#ECEAE4}
.sb-more{font:700 14px var(--font-ui);color:#141414}
.sb-about{background:var(--note-bg);border:0;text-align:left}
.sb-ph img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;margin-bottom:10px;box-shadow:0 0 0 3px #FFFFFF}
.sb-about p{font:400 15px/1.55 var(--font-ui);margin:0 0 8px;color:#141414}
.sb-about .sb-links{margin:0;font-weight:700}.sb-about a{color:#141414}
.nl-side{display:block;background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:16px}
.nl-side h2{font-size:18px}.nl-side .nl-form{flex-direction:column}
/* ---- article: header + hero across, then TOC | text ---- */
.ws-art .art{padding-bottom:10px}
.ws-art .art-head{max-width:880px}
.ws-art .art-hero{width:auto;left:auto;transform:none;position:static;margin:20px 0 8px}
@media (max-width:1023px){.ws-art .art{width:calc(100% - 32px);max-width:760px;margin:0 auto}}
.art-flow{min-width:0}
.toc-side{display:none}
@media (min-width:1024px){.art-flow{max-width:700px}}
@media (min-width:1200px){
  .art-cols.has-toc{display:grid;grid-template-columns:190px minmax(0,1fr);gap:34px;align-items:start}
  .has-toc .art-flow>.toc{display:none}
  .toc-side{display:block;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;padding:6px 0 10px;font-family:var(--font-ui)}
  .ts-h{font:800 12px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;margin:16px 0 10px;color:var(--muted)}
  .toc-side ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  .toc-side a{display:block;padding:6px 0 6px 12px;margin-left:-2px;border-left:2px solid transparent;font:600 13.5px/1.35 var(--font-ui);color:#4A4A4A;text-decoration:none}
  .toc-side a:hover{color:#141414}
  .toc-side a[aria-current]{color:#141414;border-left-color:var(--c,#141414);font-weight:800}}
.byline .av,.author-box .av{padding:0;overflow:hidden;background:none}
.byline picture.av img,.author-box picture.av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.byline picture.av{width:36px;height:36px;border-radius:50%}
.author-box picture.av{width:56px;height:56px;border-radius:50%;flex:none}
.author-hero picture.av.big{width:96px;height:96px;border-radius:50%;overflow:hidden;flex:none}
.author-hero picture.av.big img{width:96px;height:96px;object-fit:cover;display:block}
/* ---- listing pages ---- */
.lh5{border-bottom:0;margin-bottom:6px;padding:30px 0 6px}
.lh5 h1{position:relative;padding-left:18px}
.lh5 h1::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:7px;border-radius:4px;background:var(--c,#141414)}
.lh5 .lead{max-width:62ch;margin:12px 0 10px}
.lh-meta{font:600 14px var(--font-ui);color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0}
.lh-cnt{background:var(--c,#141414);color:#FFFFFF;border-radius:999px;padding:3px 10px;font-weight:800}
.lh-how a{color:#141414;font-weight:700}
.lh5.k-reviews,.lh5.k-compare,.lh5.k-guides,.lh5.k-news{background:linear-gradient(var(--t),var(--t)) bottom/100% 0 no-repeat}
.ws-list .blk{padding-top:14px}
/* ---- ads (only rendered when ads.enabled is true) ---- */
.ad{margin:26px auto;text-align:center}
.ad-label{margin:0 0 6px;font:700 11px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:#4A4A4A}
.ad-box{width:100%;max-width:var(--ad-w);height:var(--ad-h);margin:0 auto;background:repeating-linear-gradient(135deg,#F6F5F2 0 12px,#EFEDE7 12px 24px);border:1px dashed #BDBAB2;border-radius:10px;display:grid;place-items:center;overflow:hidden}
.ad-ph{font:600 13px var(--font-ui);color:#4A4A4A}
@media (max-width:767px){.ad-box[style*="--ad-mh"]{max-width:var(--ad-mw);height:var(--ad-mh)}}
.ad-in-article .ad-box{max-width:336px;height:280px}
.side .ad{margin:0}
.desk-only{display:none}
@media (min-width:1024px){.desk-only{display:block}}
.band-ad{margin:0 auto 26px;padding:0 16px}
.ad-foot{padding:10px 0 4px}
.advertise{margin:0;font:600 13.5px var(--font-ui);color:#F2F2F2}
/* ---- contact: "How would you like to talk?" menu (same structure as useaifix.com) ---- */
.cm{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.cm[hidden]{display:none}
.cm-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.5);opacity:0;transition:opacity .2s}
.cm-sheet{position:relative;width:100%;max-width:420px;background:#FFFFFF;border-radius:22px;padding:20px 20px 18px;box-shadow:0 30px 70px rgba(0,0,0,.3);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s,transform .2s;outline:0}
.cm.show .cm-backdrop{opacity:1}.cm.show .cm-sheet{opacity:1;transform:none}
.cm-grip{display:none}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cm-title{margin:0;font:800 21px/1.25 var(--font-head);letter-spacing:-.015em;color:#141414}
.cm-sub{margin:4px 0 14px;font:400 14px/1.45 var(--font-ui);color:#4A4A4A}
.cm-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#F6F5F2;display:grid;place-items:center;cursor:pointer;color:#141414;flex:none}
.cm-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cm-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cm-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#F6F5F2;color:#141414;text-decoration:none;font:inherit;cursor:pointer;box-sizing:border-box}
a.cm-opt:hover,.cm-wa:hover{border-color:#141414;background:#FFFFFF}
.cm-opt strong{display:block;font:700 16px/1.3 var(--font-ui);color:#141414}
.cm-opt small{display:block;font:400 13.5px/1.4 var(--font-ui);color:#4A4A4A}
.cm-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#141414;color:#FFFFFF}
.cm-ic.wa{background:#175C34}.cm-ic.em{background:#3F36B0}
.cm-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cm-wa{padding:0;gap:0}
.cm-wa-link{display:flex;align-items:center;gap:14px;flex:1;padding:12px 8px 12px 14px;color:inherit;text-decoration:none;border-radius:16px 0 0 16px;min-width:0}
.cm-copy{flex:none;display:inline-flex;align-items:center;gap:6px;margin-right:10px;min-height:40px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:#FFFFFF;color:#141414;font:700 14px/1 var(--font-ui);cursor:pointer}
.cm-copy.done{background:#EAF5EE;border-color:#175C34;color:#175C34}
.cm-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cm-opt:focus-visible,.cm-wa-link:focus-visible,.cm-copy:focus-visible,.cm-x:focus-visible{outline:3px solid #3F36B0;outline-offset:2px}
html.cm-open{overflow:hidden}
@media (max-width:600px){
  .cm{align-items:flex-end;padding:0}
  .cm-sheet{max-width:none;border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%)}
  .cm.show .cm-sheet{transform:none}
  .cm-grip{display:block;width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 12px}}
@media (prefers-reduced-motion:reduce){.cm-sheet,.cm-backdrop{transition:none}}
/* ---- "Let's talk" cards (footer on every page, and the Contact page) ---- */
@property --ab-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.lt-sec{padding:34px 0 30px;background:#FFFFFF}
.lt-sec .fc{--ab-angle:0deg;width:calc(100% - 24px);max-width:1100px;margin:0 auto;padding:22px 24px;border:2px solid transparent;border-radius:24px;
  background:linear-gradient(#F6F5F2,#F6F5F2) padding-box,conic-gradient(from var(--ab-angle),var(--c-reviews),var(--c-compare),var(--c-guides),var(--c-news),var(--c-reviews)) border-box}
@media (prefers-reduced-motion:no-preference){.lt-sec .fc{animation:abspin 12s linear infinite}}
@keyframes abspin{to{--ab-angle:360deg}}
.fc-intro{margin-bottom:18px}
.fc-h{font:800 22px/1.25 var(--font-head);letter-spacing:-.015em;margin:0 0 6px;color:#141414}
.fc-intro p:not(.fc-h){margin:0;font:400 15px/1.5 var(--font-ui);color:#4A4A4A}
.fc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fc-card{background:#FFFFFF;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:18px;padding:18px 18px 16px;box-shadow:var(--shadow);min-width:0}
.fc-card.wa{--c:#175C34;--cw:#EAF5EE}.fc-card.em{--c:#3F36B0;--cw:#EFEEFC}.fc-card.cal{--c:#141414;--cw:#F0EFEB}
.fc-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cw);color:var(--c);margin-bottom:10px}
.fc-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-ic svg.fill{fill:currentColor;stroke:none}
.fc-k{margin:0 0 2px;font:700 12px var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:#4A4A4A}
.fc-v{margin:0;font:700 16px/1.4 var(--font-ui);color:#141414;overflow-wrap:anywhere}
.fc-btns{margin-top:14px;display:flex;gap:8px;flex-wrap:nowrap}
a.fc-go{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:999px;background:var(--c);border:1.5px solid var(--c);color:#FFFFFF;font:700 15px/1.2 var(--font-ui);text-decoration:none;text-align:center}
a.fc-go:hover{filter:brightness(1.15);color:#FFFFFF}
.fc-copy{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px;border-radius:999px;background:#FFFFFF;color:var(--c);border:1.5px solid var(--line);font:700 15px/1 var(--font-ui);cursor:pointer}
.fc-copy:hover{border-color:var(--c)}.fc-copy.done{background:var(--cw);border-color:var(--c)}
.fc-copy svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-go:focus-visible,.fc-copy:focus-visible{outline:3px solid #3F36B0;outline-offset:2px}
.fc-meta{margin-top:14px}
.fc-place{display:flex;gap:12px;align-items:center;background:#FFFFFF;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.fm-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#F0EFEB;color:#141414}
.fm-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-place address{margin:0;font:400 15px/1.5 var(--font-ui);font-style:normal;color:#141414}
.fm-k{display:block;font:700 12px var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:#4A4A4A;margin-bottom:2px}
@media (max-width:860px){.fc-cards{grid-template-columns:1fr;gap:12px}.fc-card{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;padding:16px}
  .fc-ic{grid-row:span 2;margin:0}.fc-card .fc-btns{grid-column:1/-1}}
@media (max-width:600px){.lt-sec .fc{padding:16px 14px;border-radius:20px}}
@media (max-width:520px){.fc-btns>*{flex:1 1 0;justify-content:center}}
@media (prefers-reduced-motion:no-preference){.fc-card .fc-ic{animation:fcPop 3.6s ease-in-out infinite}.fc-card.em .fc-ic{animation-delay:1.2s}.fc-card.cal .fc-ic{animation-delay:2.4s}}
@keyframes fcPop{0%,62%,100%{transform:none}70%{transform:translateY(-3px) scale(1.06)}78%{transform:none}}
.ct-hero{border-bottom:0}.ct-hero .btn{margin-top:6px}
/* ---- About page ---- */
.ab-hero{background:linear-gradient(180deg,#F6F5F2,#FFFFFF);padding:40px 0 34px;border-bottom:1px solid var(--line)}
.ab-hero-in{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media (min-width:860px){.ab-hero-in{grid-template-columns:260px 1fr;gap:44px;align-items:center}}
.ab-ph img{display:block;width:180px;height:180px;border-radius:24px;object-fit:cover;box-shadow:0 0 0 6px #FFFFFF,0 14px 30px rgba(0,0,0,.12)}
@media (min-width:860px){.ab-ph img{width:260px;height:260px}}
.ab-eyebrow{font:800 12.5px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:#3F36B0;margin:0 0 6px}
.ab-hero h1{margin:0;font-size:clamp(34px,5vw,50px)}
.ab-role{font:700 17px var(--font-ui);color:#4A4A4A;margin:6px 0 14px}
.ab-bio,.ab-what{font:400 18px/1.65 var(--font-prose);max-width:62ch;margin:0 0 12px}
.ab-q{margin:14px 0 16px;padding:4px 0 4px 18px;border-left:5px solid var(--c-compare);max-width:56ch}
.ab-q p{margin:0;font:italic 500 21px/1.45 var(--font-prose);color:#141414}
.ab-cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.ab-sec{padding:40px 0}
.ab-sec h2{font-size:clamp(24px,3vw,30px);margin:0 0 6px}
.ab-lead{margin:0 0 20px;color:#4A4A4A;font:400 16px var(--font-ui)}
.ab-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.ab-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.ab-cards{grid-template-columns:repeat(4,1fr)}}
.ab-cards a{display:flex;flex-direction:column;gap:10px;height:100%;padding:20px;border-radius:18px;background:var(--t);border-top:6px solid var(--c);color:#141414;text-decoration:none;box-sizing:border-box}
.ab-cards a:hover{box-shadow:0 0 0 2px var(--c) inset}
.ab-k{align-self:flex-start;background:var(--c);color:#FFFFFF;border-radius:999px;padding:5px 12px;font:800 13px var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.ab-t{font:400 16px/1.6 var(--font-prose);flex:1}
.ab-go{font:800 14.5px var(--font-ui);color:var(--c)}
.ab-how{background:#F6F5F2}
.ab-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:860px){.ab-steps{grid-template-columns:repeat(2,1fr)}}
.ab-steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;background:#FFFFFF;border-radius:16px;padding:18px;border:1px solid var(--line)}
.ab-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#141414;color:#FFFFFF;font:800 18px var(--font-ui)}
.ab-steps h3{margin:2px 0 6px;font-size:18px}
.ab-steps p{margin:0;font:400 16px/1.6 var(--font-prose)}
.ab-std{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:860px){.ab-std{grid-template-columns:1fr 1.2fr;align-items:center}}
.ab-std p{margin:0;color:#4A4A4A;font:400 16px/1.55 var(--font-ui)}
.ab-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ab-links a{display:inline-block;padding:10px 16px;border-radius:999px;border:1.5px solid #141414;color:#141414;font:700 15px var(--font-ui);text-decoration:none}
.ab-links a:hover{background:#141414;color:#FFFFFF}
.sb-pk li>div{line-height:1.3}
.site-menu .wrap{display:block;min-height:0}
.subnav::after{display:none}
@media (max-width:520px){.fc-btns>.fc-copy{flex:none}}
/* ---- v7 brand band above the footer (replaces "Let's talk") ---- */
.bb{position:relative;overflow:hidden;background:#FFFFFF;border-top:1px solid var(--line);padding:52px 0 48px;text-align:center}
.bb-strip{position:absolute;top:0;left:0;right:0;height:6px;overflow:hidden}
.bb-strip span{position:absolute;top:0;left:0;width:200%;height:100%;will-change:transform;
  background:linear-gradient(90deg,var(--c-reviews) 0 12.5%,var(--c-compare) 12.5% 25%,var(--c-guides) 25% 37.5%,var(--c-news) 37.5% 50%,var(--c-reviews) 50% 62.5%,var(--c-compare) 62.5% 75%,var(--c-guides) 75% 87.5%,var(--c-news) 87.5% 100%)}
.bb-in{display:flex;flex-direction:column;align-items:center;gap:10px}
.bb-logo{display:inline-flex;align-items:center;gap:12px;color:#141414;text-decoration:none;line-height:1}
.bb-a{position:relative;overflow:hidden;display:inline-block;background:#141414;color:#FFFFFF;border-radius:14px;padding:10px 14px 12px;font:800 46px/1 var(--font-head);letter-spacing:-.03em}
.bb-a::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-160%) skewX(-12deg);opacity:0}
.bb-n{font:italic 500 52px/1 var(--font-prose);letter-spacing:-.01em}
.bb-tag{margin:6px 0 0;max-width:36ch;font:400 18px/1.5 var(--font-prose);color:#333333}
.bb-by{margin:0}.bb-by a{font:700 14px var(--font-ui);color:#141414;text-underline-offset:3px}
@media (max-width:600px){.bb{padding:40px 0 36px}.bb-a{font-size:34px;border-radius:11px;padding:8px 11px 10px}.bb-n{font-size:39px}.bb-tag{font-size:16.5px}}
@media (prefers-reduced-motion:no-preference){
  .bb-strip span{animation:bbFlow 9s linear infinite}
  .bb.pre .bb-a,.bb.pre .bb-n,.bb.pre .bb-tag,.bb.pre .bb-by{opacity:0}
  .bb.pre .bb-a{transform:scale(.85)}.bb.pre .bb-n{transform:translateX(-14px)}.bb.pre .bb-tag,.bb.pre .bb-by{transform:translateY(8px)}
  .bb-a,.bb-n,.bb-tag,.bb-by{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .bb-n{transition-delay:.15s}.bb-tag{transition-delay:.3s}.bb-by{transition-delay:.42s}
  .bb.in .bb-a::after{animation:bbShine 4.5s ease-in-out .7s infinite}}
@keyframes bbFlow{to{transform:translateX(-50%)}}
@keyframes bbShine{0%{transform:translateX(-160%) skewX(-12deg);opacity:0}8%{opacity:1}30%{transform:translateX(330%) skewX(-12deg);opacity:1}31%,100%{transform:translateX(330%) skewX(-12deg);opacity:0}}
footer{border-top:0}
.nav-links .main-link[aria-current="page"]{color:#FFFFFF;box-shadow:0 0 0 3px #FFFFFF,0 0 0 5px #141414}

/* v23: AIFix mark next to "by AIFix" in the header, with the same animation as useaifix.com */
.nav .by{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.nav .by span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9A9A9A}
.nav .by:hover span{text-decoration-color:currentColor}
.nav .by .logo-mark{width:20px;height:20px;flex:none;display:block}
/* AIFix animated header logo (same on useaifix.com, shop and AI News): the three teal dots light up in turn, the lines redraw,
   then everything rests for ~6s. transform/stroke only; static with prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .nav .logo-mark circle{transform-box:fill-box;transform-origin:center}
  .nav .logo-mark circle:first-of-type{animation:lm-hub 7s ease-in-out infinite}
  .nav .logo-mark circle:nth-of-type(2){animation:lm-dot 7s ease-in-out infinite .15s}
  .nav .logo-mark circle:nth-of-type(3){animation:lm-dot 7s ease-in-out infinite .35s}
  .nav .logo-mark circle:nth-of-type(4){animation:lm-dot 7s ease-in-out infinite .55s}
  .nav .logo-mark path{stroke-dasharray:30;animation:lm-line 7s ease-in-out infinite}
  .nav a:hover .logo-mark circle:not(:first-of-type){animation-duration:2.4s}
}
@keyframes lm-dot{0%,12%,100%{transform:scale(1);fill:#14B8A6}5%{transform:scale(1.35);fill:#34A853}}
@keyframes lm-hub{0%,100%{transform:scale(1)}4%{transform:scale(.88)}9%{transform:scale(1)}}
@keyframes lm-line{0%,100%{stroke-dashoffset:0}3%{stroke-dashoffset:30}9%{stroke-dashoffset:0}}