/*
 * Front-end and editor styles. Ported from the shared clickable prototype (design/).
 * Colours and fonts come from theme.json, so a brand is a style variation, not a CSS fork.
 * Proof type (Measured or Method) is a site setting, printed as data-proof on <html>.
 */
:root{
  --bg:var(--wp--preset--color--bg); --surface:var(--wp--preset--color--surface); --ink:var(--wp--preset--color--ink);
  --muted:var(--wp--preset--color--muted); --line:var(--wp--preset--color--line); --star:var(--wp--preset--color--star);
  --accent:var(--wp--preset--color--accent); --accent-soft:var(--wp--preset--color--accent-soft);
  --pop:var(--wp--preset--color--pop); --pop-soft:var(--wp--preset--color--pop-soft);
  --delta-better:var(--wp--preset--color--better); --delta-worse:var(--wp--preset--color--worse);
  --chrome-bg:#2a2d30; --chrome-fg:#f2f2ef; --chrome-line:#45494d;
  --f-display:var(--wp--preset--font-family--display); --f-body:var(--wp--preset--font-family--body); --f-hand:var(--f-display);
  --radius:4px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}
/* Dark: values per brand live in theme.json settings.custom.dark */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:var(--wp--custom--dark--bg); --surface:var(--wp--custom--dark--surface); --ink:var(--wp--custom--dark--ink); --muted:var(--wp--custom--dark--muted);
  --line:var(--wp--custom--dark--line); --star:var(--wp--custom--dark--star); --accent:var(--wp--custom--dark--accent); --accent-soft:var(--wp--custom--dark--accent-soft);
  --pop:var(--wp--custom--dark--pop); --pop-soft:var(--wp--custom--dark--pop-soft); --delta-better:var(--wp--custom--dark--better); --delta-worse:var(--wp--custom--dark--worse);
  --chrome-bg:#0f1011; --chrome-line:#2e3134; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:var(--wp--custom--dark--bg); --surface:var(--wp--custom--dark--surface); --ink:var(--wp--custom--dark--ink); --muted:var(--wp--custom--dark--muted);
  --line:var(--wp--custom--dark--line); --star:var(--wp--custom--dark--star); --accent:var(--wp--custom--dark--accent); --accent-soft:var(--wp--custom--dark--accent-soft);
  --pop:var(--wp--custom--dark--pop); --pop-soft:var(--wp--custom--dark--pop-soft); --delta-better:var(--wp--custom--dark--better); --delta-worse:var(--wp--custom--dark--worse);
  --chrome-bg:#0f1011; --chrome-line:#2e3134; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.65 var(--f-body);letter-spacing:.005em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.005em}
b,strong{font-weight:500}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:16px}
@media (min-width:700px){.wrap{padding-inline:28px}}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.hand{font-family:var(--f-display);font-style:italic;font-weight:400;color:var(--accent)}
.tnum{font-variant-numeric:tabular-nums lining-nums}

/* Placeholder images: gradient tiles with grain, as in Jodi's prototype */
.ph{background:linear-gradient(135deg,var(--a,#e4e6e7),var(--b,#aeb4b8));border-radius:var(--radius);aspect-ratio:var(--r,4/3);position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.45),transparent 55%)}
.ph::before{content:"";position:absolute;inset:0;opacity:.3;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.t1{--a:#ecebe7;--b:#c9c6bf}.t2{--a:#e4e6e7;--b:#aeb4b8}.t3{--a:#f0eee9;--b:#d3cdc2}
.t4{--a:#e8ebe5;--b:#b9c3b2}.t5{--a:#e9e7e3;--b:#bdb7ad}.t6{--a:#f2f2f0;--b:#cfd1d0}
:root[data-theme="dark"] .ph{filter:brightness(.7) saturate(.9)}
:root[data-theme="dark"] .ph.photo{filter:brightness(.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph{filter:brightness(.7) saturate(.9)}:root:not([data-theme="light"]) .ph.photo{filter:brightness(.9)}}


/* Real images. Photo: our own photography fills the frame. Product: manufacturer shot on white, contained. */
.ph.photo,.ph.product{background-repeat:no-repeat;background-position:center}
.ph.photo{background-size:cover;background-color:var(--line)}
.ph.photo::before,.ph.photo::after,.ph.product::before,.ph.product::after{display:none}
.ph.product{background-color:#fff;background-size:contain;background-origin:content-box;padding:6%}
:root[data-theme="dark"] .ph.product{filter:brightness(.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ph.product{filter:brightness(.9)}}
.img-note{font-size:13px;color:var(--muted);margin:-28px 0 28px}

/* Lately strip (Measured) */
.ticker{background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13px;overflow:hidden;white-space:nowrap}
.ticker .wrap{display:flex;gap:14px;align-items:center;height:36px}
.ticker b{background:var(--pop);color:var(--bg);padding:2px 8px;border-radius:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex:none;position:relative;z-index:1}
.ticker-lane{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 40px),transparent)}
.ticker-track{display:flex;width:max-content;animation:tick var(--tick-dur,40s) linear infinite}
.ticker-track span{padding-right:40px;white-space:nowrap}
.ticker-track span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* Data strip (Method) */
.datastrip{background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13px}
.datastrip .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;min-height:36px;padding-block:6px}
.datastrip span{color:var(--muted)}
.datastrip b{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:6px}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:68px}
.logo{font-family:var(--f-display);font-size:30px;font-style:italic;letter-spacing:.01em;white-space:nowrap}
.logo i{color:var(--pop);font-style:normal}
.nav{display:flex;gap:22px;font-size:15px;font-weight:500}
.nav a{color:var(--muted)}.nav a:hover{color:var(--ink)}
.head-tools{margin-left:auto;display:flex;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
@media (max-width:860px){.nav{display:none}}


/* Top note: the affiliate disclosure, first thing on the page */
.topnote{background:color-mix(in srgb,var(--ink) 4%,var(--bg));border-bottom:1px solid var(--line);font-size:14px;line-height:1.5;text-align:center}
.topnote .wrap{padding-block:11px}
.topnote a{font-weight:600;white-space:nowrap;margin-left:4px}
.topnote a:hover{color:var(--accent)}

/* Header: one row. Categories open from a labelled button next to the logo */
.cat-toggle{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;flex:none}
.cat-toggle:hover,.cat-toggle[aria-expanded="true"]{border-color:var(--ink)}
.cat-toggle .gi{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.6}
.cat-toggle .chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.cat-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* Main menu: spaced caps like the Categories button, centred between logo group and tools */
.site-head .nav{flex:1;justify-content:center;gap:26px}
.site-head .nav a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site-head .nav a:hover,.site-head .nav a[aria-current="page"]{color:var(--ink)}
.site-head .head-tools{margin-left:0}
@media (max-width:1140px){.site-head .nav{gap:16px}.site-head .nav a{letter-spacing:.07em}}
@media (max-width:980px){.site-head .nav{display:none}.site-head .head-tools{margin-left:auto}.catnav .more-links{display:flex;flex-wrap:wrap;gap:6px 20px;grid-column:1/-1;padding-top:14px}.catnav .more-links a{border:0;padding:4px 0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}}

@media (max-width:600px){.site-head > .wrap{gap:12px}.site-head .logo{font-size:24px}}
@media (max-width:440px){:root[data-proof="method"] .cat-toggle > span{display:none}:root[data-proof="method"] .cat-toggle{padding:0 11px}}
@media (max-width:420px){.cat-toggle{padding:0 10px}.cat-toggle .chev{display:none}}
.catnav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-block:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s linear .18s;z-index:30}
:root.cats-open .catnav{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.site-head .catnav .wrap{display:grid;height:auto;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 32px;padding-block:18px 22px}
@media (max-width:860px){.site-head .catnav .wrap{grid-template-columns:1fr 1fr;gap:0 16px}}
@media (max-width:420px){.site-head .catnav .wrap{grid-template-columns:1fr}}
.catnav a{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding-block:12px;border-bottom:1px solid var(--line)}
.catnav a:hover,.catnav a[aria-current="page"]{color:var(--accent)}
.ci{width:24px;height:24px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ci .f{fill:var(--pop);fill-opacity:.32}
.catnav a.all{color:var(--accent)}
.catnav a .chev{display:none}
.catnav .more-links{display:none}
@media (max-width:860px){.catnav .more-links{display:flex;flex-wrap:wrap;gap:6px 20px;grid-column:1/-1;padding-top:14px}.catnav .more-links a{border:0;padding:4px 0;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}}
@media (prefers-reduced-motion:reduce){.catnav,:root.cats-open .catnav,.cat-toggle .chev{transition:none}}
/* Cards: nothing sits on the photo. Label under the frame, score or price on the same line */
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.card-top .tag{margin-top:0}
.card-top .score{width:40px;height:40px;box-shadow:none}
.card-top .score span{font-size:15px}
.card-top .price-chip{background:none;box-shadow:none;padding:0;font-size:19px}

/* Statement hero: text left, a visual from this month's work right */
.st-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:56px;align-items:center}
@media (max-width:900px){.st-grid{grid-template-columns:1fr;gap:32px}}
.st-text{display:grid;gap:18px}
.hero-note{font-size:14px;line-height:1.55;color:var(--muted);border-left:3px solid var(--pop);padding-left:14px;max-width:56ch;margin-top:4px}
.hero-note a{color:var(--ink);font-weight:600;white-space:nowrap;margin-left:4px}
.hero-visual{margin:0;position:relative;padding:0 0 44px 0}
.hero-visual .ph{--r:1/1;border-radius:0}
.hero-visual.product .ph{--r:1/1;border:1px solid var(--line)}
.hv-card{position:absolute;left:-28px;bottom:0;width:min(290px,86%);background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -12px rgba(0,0,0,.22);padding:16px 18px;display:grid;gap:6px}
@media (max-width:900px){.hv-card{left:12px}}
.hv-card .kicker{margin:0;font-size:11px}
.hv-card b{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.15}
.hv-card .hv-line{font-size:14px;color:var(--muted)}
.hv-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:4px}
.hv-bar i{display:block;height:100%;width:var(--w,50%);background:var(--pop)}
.hv-spark{width:100%;height:44px;margin-top:4px}
.hv-spark polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hv-spark circle{fill:var(--pop)}
.hero-visual figcaption{position:absolute;right:0;bottom:12px;font-size:12px;color:var(--muted)}
@media (max-width:900px){.hero-visual{padding-bottom:0}.hv-card{position:relative;left:auto;bottom:auto;width:auto;margin:-40px 12px 0}.hero-visual figcaption{position:static;text-align:right;margin-top:8px}}

/* Statement hero */
.statement{padding-block:40px 28px;display:grid;gap:18px}
.hello{font-size:22px;line-height:1.3}
.statement h1{font-size:clamp(34px,4.8vw,58px);line-height:1.05;max-width:22ch}
.not-tested{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--accent);max-width:30ch}
.lede{font-size:19px;line-height:1.6;color:var(--muted);max-width:58ch}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:2px;font:500 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--bg)}
.link-more{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}

/* Hero category proof cards: the one bold element */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:8px 40px}
@media (max-width:860px){.cats{grid-template-columns:1fr}}
.cat{display:grid;border-top:1px solid var(--line)}
.cat .ph{--r:3/2;border-radius:0;transition:transform .4s ease}
.cat:hover .ph{transform:scale(1.015)}
.cat-body{display:grid;gap:12px;padding:16px 0 0;align-content:start}
.cat-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cat-name{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);line-height:1.4}
@media (prefers-reduced-motion:reduce){.cat .ph{transition:none}}
.fact{display:grid;gap:4px;border-left:3px solid var(--fact-rule,var(--pop));padding-left:14px}
.fact-label{font-size:13px;color:var(--muted)}
.fact-num{font-family:var(--f-display);font-size:clamp(40px,4.4vw,54px);line-height:1;font-variant-numeric:lining-nums;letter-spacing:-.01em}
.fact-num small{font-size:.42em;margin-left:4px;color:var(--muted);font-family:var(--f-body);font-weight:400;letter-spacing:0}
.fact-vs{font-size:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.delta{font-weight:500;font-variant-numeric:tabular-nums}
.delta.worse{color:var(--delta-worse)}.delta.better{color:var(--delta-better)}
:root[data-proof="method"] .fact{--fact-rule:var(--muted)}
.cat-foot{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
/* What we measured: question, icon + answer, claim against result, one-line verdict */
.fact-q{font-family:var(--f-display);font-size:21px;line-height:1.25;color:var(--ink);max-width:24ch}
.fact-main{display:flex;align-items:center;gap:14px}
.fact-ico{width:48px;height:48px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.cmp{display:grid;border-top:1px solid var(--line)}
.cmp-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.cmp-row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.fact-verdict{font-size:14px;font-weight:500}
.fact-verdict.worse{color:var(--delta-worse)}.fact-verdict.better{color:var(--delta-better)}
.cats .cat-foot{border-top:0;padding-top:0}


/* Evidence badge: dot plus label, readable in both themes */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ev,var(--pop))}
.badge.tracking{--ev:var(--muted)}
.badge.researched{--ev:var(--star)}

/* Disclosure */
.disclosure{border-block:1px solid var(--line);padding-block:18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;align-items:baseline}
.disclosure b{font-size:13px;letter-spacing:.06em}
.disclosure p{font-size:16px;max-width:90ch}
@media (max-width:600px){.disclosure{grid-template-columns:1fr}}

/* Section heads */
.sec{padding-block:56px}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-head h2{font-size:clamp(26px,3vw,34px)}
.sec-head a{font-size:14px;font-weight:500;color:var(--accent)}
/* Centred editorial head: serif title with an arrow that is the "see all" link */
.sec-head.center{flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:36px}
.sec-head.center h2{font-size:clamp(32px,4vw,48px)}
.sec-head.center h2 a{font-size:inherit;font-weight:inherit;color:var(--ink);display:inline-flex;align-items:center;gap:14px}
.sec-head .arr{width:.62em;height:.62em;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;flex:none}
.sec-head h2 a:hover .arr{transform:translateX(4px)}
.sec-head.center .filters{justify-content:center}
/* Card labels: spaced caps sitting between image and headline */
.kicker{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.4}
.byline{font-size:14px;color:var(--muted)}

/* Picks: numbered because the order is the editor's ranking */
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media (max-width:760px){.picks{grid-template-columns:1fr}}
.pick{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.pick .n{font-size:30px;font-weight:300;color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.pick h3{font-family:var(--f-body);font-size:17px;line-height:1.3;font-weight:500;margin-top:2px}
.pick:hover h3{color:var(--accent)}
.price{font-family:var(--f-display);font-size:24px;white-space:nowrap;font-variant-numeric:lining-nums}

/* Score ring */
.score{--s:80;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--s)*1%),var(--line) 0);position:relative;flex:none}
.score::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.score span{position:relative;font-family:var(--f-display);font-size:17px}

/* Letter + desk (Measured) */
.letter{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start}
.letter-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;align-items:start}
.letter-body > .letter-text:first-child{grid-column:1/-1} /* no editor photo yet: the text takes the full width instead of the 96px photo column */
.letter-body .ph{--r:3/4;border:6px solid var(--surface);border-bottom-width:22px;box-shadow:0 6px 18px rgba(43,31,23,.18);transform:rotate(-3deg);border-radius:2px}
.letter-body p{font-family:var(--f-display);font-size:21px;line-height:1.5;margin:0 0 14px;max-width:56ch}
.sig{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--muted)}
.sig .hand{font-size:32px;font-weight:400;display:inline-block;transform:rotate(-4deg)}
.desk{position:relative;background:var(--surface);border:1px solid var(--line);padding:24px 26px 18px;transform:rotate(.8deg);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.desk h3{font-family:var(--f-hand);font-style:italic;font-size:22px;color:var(--accent);margin-bottom:6px}
.desk ul{list-style:none;margin:0;padding:0}
.desk li{padding-block:10px;border-bottom:1px dashed var(--line);display:grid;gap:2px}
.desk li:last-child{border-bottom:0}
.desk li b{font-size:15px}
.desk li .hand{color:var(--muted);font-size:16px}
.desk::after{content:"";position:absolute;width:104px;height:104px;right:10px;top:-30px;border-radius:50%;border:5px solid var(--accent);opacity:.12;pointer-events:none}
@media (max-width:860px){.letter{grid-template-columns:1fr;gap:32px}.desk{transform:none}}
@media (max-width:520px){.letter-body{grid-template-columns:1fr}.letter-body .ph{width:88px}}

/* Method card (Method) */
.method-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:860px){.method-card{grid-template-columns:1fr;gap:32px}}
.steps{list-style:none;margin:20px 0 0;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding-block:14px;border-top:1px solid var(--line);font-size:17px}
.steps li::before{content:counter(s);font-family:var(--f-display);font-size:26px;line-height:1;color:var(--accent)}
.who{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:10px}
.who h3{font-size:24px}
.who p{color:var(--muted);font-size:15px}
.who .ph-line{color:var(--ink);font-weight:500}

/* Latest grid */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font:400 14px/1.4 var(--f-body);cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.card{display:flex;flex-direction:column;gap:10px}
.card .ph{transition:transform .4s ease}
.card:hover .ph{transform:scale(1.02)}
.card .ph .score,.card .ph .price-chip{position:absolute;right:12px;bottom:12px;z-index:1;box-shadow:var(--shadow)}
.price-chip{background:var(--surface);border-radius:999px;padding:6px 12px;font-family:var(--f-display);font-size:18px;line-height:1.2}
.card h3{font-size:25px;line-height:1.18}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card .ph{border-radius:0}
.card .tag{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--muted)}
.feature{grid-column:span 2}
.feature .ph{--r:16/9}
.feature h3{font-size:28px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:1fr}.feature{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.card .ph{transition:none}}

/* Long read (Measured) */
.long{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.long .ph{--r:5/4}
.long h2{font-size:clamp(32px,4.2vw,52px);margin:14px 0 18px}
.long p{font-size:18px;color:var(--muted);margin:0 0 22px;max-width:46ch}
@media (max-width:860px){.long{grid-template-columns:1fr;gap:28px}}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;text-align:center}
.stats .num{font-family:var(--f-display);font-size:clamp(40px,4.6vw,56px);line-height:1;color:var(--accent);font-variant-numeric:lining-nums}
.stats p{margin:10px auto 0;font-size:14px;color:var(--muted);max-width:24ch}
.stats-src{margin-top:24px;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* Fresh row: a compact, image-led strip between the category bar and the statement */
.fresh{padding-block:32px 0}
.fresh-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.fr{display:flex;flex-direction:column;gap:6px;min-width:0}
.fr .ph{--r:16/9;border-radius:0;transition:transform .4s ease}
.fr:hover .ph{transform:scale(1.02)}
.fr .kicker{margin-top:6px;font-size:11px}
.fr h3{font-size:21px;line-height:1.22}
.fr:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fr .byline{font-size:13px}
@media (max-width:860px){.fresh-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}.fr{scroll-snap-align:start}.fresh-row::-webkit-scrollbar{display:none}}
@media (prefers-reduced-motion:reduce){.fr .ph{transition:none}}
.fresh + .statement{border-top:1px solid var(--line);margin-top:30px}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding-block:48px 96px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-grid h4{font-family:var(--f-body);color:var(--ink);font-size:14px;font-weight:500;margin:0 0 12px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-grid .logo{color:var(--ink);font-size:26px}
.foot-disc{margin-top:12px;max-width:52ch}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}


/* Latest articles strip */
.arts{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:1000px){.arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.arts{grid-template-columns:1fr}}
.art{display:flex;flex-direction:column;gap:8px;min-width:0}
.art .ph{aspect-ratio:auto;height:clamp(180px,17vw,230px)}
.art-type{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.art h3{font-size:24px;line-height:1.18}
.art.lead h3{font-size:30px}
.art .ph{border-radius:0}
.art p{font-size:15px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pinned{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pinned::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pop)}

/* Featured pick: one reusable box for homepage, articles and reviews */
.fpick{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,auto);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--pop);border-radius:var(--radius);padding:24px}
.fpick .ph{--r:1/1}
.fp-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.fp-label{font-family:var(--f-display);font-style:italic;font-size:20px;color:var(--accent)}
.fpick h3{font-size:30px;margin:8px 0 8px}
.fp-why{font-size:16px;max-width:52ch}
.fp-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:12px;font-size:14px;color:var(--muted)}
.fp-fact b{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--ink);font-variant-numeric:lining-nums}
.fp-buy{display:grid;gap:10px;justify-items:start;min-width:200px}
.fp-buy .price{font-size:30px}
.fp-note{font-size:12px;color:var(--muted)}
.stars{color:var(--star);letter-spacing:2px;font-size:15px}
@media (max-width:860px){.fpick{grid-template-columns:120px minmax(0,1fr)}.fp-buy{grid-column:1/-1;min-width:0}}
@media (max-width:520px){.fpick{grid-template-columns:1fr}.fpick .ph{max-width:200px}}

/* Anchored products pill and drawer (Jodi's component, tokenised) */
.love-tab{position:fixed;left:50%;transform:translateX(-50%);white-space:nowrap;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:12px 20px 12px 16px;font:500 13px/1 var(--f-body);letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.22);transition:transform .2s,opacity .2s}
.love-tab .dot{width:9px;height:9px;border-radius:50%;background:var(--pop)}
.love-tab:hover{transform:translate(-50%,-2px)}
.love-scrim{position:fixed;inset:0;z-index:45;background:rgba(20,21,22,.4);opacity:0;pointer-events:none;transition:opacity .3s}
.love-panel{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(400px,100%);background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);visibility:hidden;transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s linear .38s;display:flex;flex-direction:column;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px))}
:root.love-open .love-scrim{opacity:1;pointer-events:auto}
:root.love-open .love-panel{transform:none;visibility:visible;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
:root.love-open .love-tab{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.love-panel,.love-scrim,.love-tab{transition:none}}
.love-head{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.love-head h2{font-size:30px;margin-top:4px}
.love-head p{margin-top:6px;font-size:14px;color:var(--muted)}
.love-list{overflow-y:auto;flex:1;display:grid;align-content:start}
.love-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding-block:16px;border-bottom:1px solid var(--line);align-items:center}
.love-item .ph{--r:1/1}
.love-item b{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1.2}
.love-item .hand{display:block;font-size:16px;color:var(--muted);margin-top:2px}
.love-item .meta2{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.love-item .row2{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px}
.love-item .row2 a{color:var(--accent);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.love-foot{padding-top:16px;font-size:12px;color:var(--muted)}
/* Products pill on phones: a small round button in the corner, shown only after the first screen and hidden near the footer */
.love-tab .lt-ico{display:none}
@media (max-width:700px){
  .love-tab{left:auto;right:16px;width:52px;height:52px;padding:0;justify-content:center;border-radius:50%;transform:translateY(16px);opacity:0;pointer-events:none}
  .love-tab:hover{transform:none}
  .love-tab .lt-ico{display:block}
  .love-tab .lt-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .love-tab .dot{position:absolute;top:11px;right:11px;width:8px;height:8px;box-shadow:0 0 0 2px var(--ink)}
  :root.pill-ready .love-tab{opacity:1;transform:none;pointer-events:auto}
  :root.love-open .love-tab{opacity:0;pointer-events:none}
}




/* ===== Inner pages ===== */
.crumbs{font-size:13px;color:var(--muted);padding-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.page-head{max-width:900px;padding-block:20px 32px;display:grid;gap:14px}
.page-head h1{font-size:clamp(34px,5vw,56px);line-height:1.06}
.deck{font-family:var(--f-display);font-style:italic;font-size:21px;color:var(--muted);max-width:60ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:14px;color:var(--muted)}
.byline a{color:var(--ink);font-weight:500}
.hero-img{border-radius:var(--radius);background:var(--line) center/cover no-repeat;aspect-ratio:21/9;max-width:100%}
.caption{font-size:13px;color:var(--muted);margin-top:8px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-block:32px 72px;align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:32px}}
.side{position:sticky;top:130px;display:grid;gap:24px}
@media (max-width:960px){.side{position:static}}
.prose{font-size:18px;line-height:1.75;max-width:68ch;display:grid;gap:20px}
.prose h2{font-size:30px;margin-top:16px}
.prose.dropcap > p:first-of-type::first-letter{font-family:var(--f-display);float:left;font-size:72px;line-height:.85;padding:6px 10px 0 0;color:var(--accent)}
.prose blockquote{margin:12px 0;padding-left:24px;border-left:2px solid var(--pop);font-family:var(--f-display);font-size:27px;line-height:1.35}
.prose figure{margin:8px 0}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:8px}
.box{border-top:2px solid var(--ink);padding-top:14px}
.box h3{font-family:var(--f-body);font-size:14px;font-weight:500;margin-bottom:10px}
.box ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px}
.next{display:grid;gap:14px}
.next a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.next .ph{--r:1/1}
.next b{font-family:var(--f-display);font-weight:400;font-size:17px;line-height:1.25;display:block}
.next small{font-size:12px;color:var(--muted)}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;font-size:13px;color:var(--muted)}
tr:last-child td{border-bottom:0}
.listing-head{display:grid;gap:14px;padding-block:20px 8px;max-width:820px}
.listing-head h1{font-size:clamp(34px,5vw,54px)}
.listing-head p{font-size:18px;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:20px;border-bottom:1px solid var(--line);margin-bottom:32px}
.sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.sort select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.pager{display:flex;gap:8px;justify-content:center;padding-block:40px 72px}
.pager a,.pager span{min-width:38px;height:38px;padding-inline:10px;display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--surface)}
.pager span[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.avatar{border-radius:50%;background:var(--pop-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--f-display);flex:none}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;background:var(--surface)}
.note-ph{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);padding:10px 14px}
.inner-main{padding-bottom:24px}



/* ===== WordPress additions ===== */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph.product > img{object-fit:contain;padding:6%;background:#fff}
.ph.photo::before,.ph.photo::after,.ph.product::before,.ph.product::after{z-index:1}
.ph[data-source="ai"]::after{content:"AI illustration";display:block;position:absolute;inset:8px auto auto 8px;background:rgba(20,21,22,.72);color:#f2f2ef;font:600 10px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:3px;z-index:2}
:root[data-proof="method"] .ph[data-source="ai"]::after{content:"Mit KI erstellt"}
.hb-ai-label{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wp-site-blocks > main{display:block}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Template parts render their children straight into the page, so the header stays sticky */
.hb-header-part{display:contents}
.wp-site-blocks > *{margin-block-start:0}
.wp-site-blocks{padding:0}
/* Archive grids built from core blocks */
.hb-archive .grid{list-style:none;margin:0;padding:0}
.hb-archive .grid > li{display:grid;gap:8px;align-content:start}
.hb-archive .wp-block-post-featured-image{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.hb-archive .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.hb-archive .wp-block-post-title{font-size:21px;line-height:1.25}
.hb-archive .tag a{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hb-archive .card-meta{font-size:13px;color:var(--muted);gap:12px}
.author-head{display:grid;gap:14px}
.author-head .wp-block-avatar img{border-radius:50%}
.sec-title{font-size:clamp(26px,3vw,34px);margin:40px 0 20px}
/* Core blocks inside the prototype's sections */
.hero-links.wp-block-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.hero-links .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:2px;font:500 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;background:var(--accent);color:var(--bg)}
.hero-links .is-style-link .wp-block-button__link{background:none;color:var(--ink);padding:0 0 3px;border-radius:0;font-size:12px;letter-spacing:.18em;border-bottom:1px solid var(--ink)}
.letter-body .is-style-polaroid{margin:0}
.letter-body .is-style-polaroid img{aspect-ratio:3/4;object-fit:cover;border:6px solid var(--surface);border-bottom-width:22px;box-shadow:0 6px 18px rgba(43,31,23,.18);transform:rotate(-3deg);border-radius:2px}
.letter-body .eyebrow + p{margin-top:12px}
.method-card ol.steps{margin:0}
.statement h1.wp-block-heading{font-size:clamp(34px,4.8vw,58px);line-height:1.05;max-width:22ch}
.prose > * + *{margin-top:1em}
.method-card h2{font-size:clamp(26px,3vw,34px)}
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
/* Under 600px WordPress lets its admin bar scroll away, so the header sticks at the very top for logged-in staff too. */
@media (max-width:600px){.admin-bar .site-head{top:0}}
/* Preferred source on Google: official badge, swapped for the dark version in dark mode */
.pref-source{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:18px 22px;margin:40px 0 8px;max-width:820px}
.pref-source p{font-size:15px;line-height:1.5;color:var(--muted);flex:1 1 280px}
.pref-source a{flex:none;line-height:0}
.pref-source img{width:225px;height:auto}
.pref-source .gps-dark{display:none}
:root[data-theme="dark"] .pref-source .gps-light{display:none}
:root[data-theme="dark"] .pref-source .gps-dark{display:inline}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pref-source .gps-light{display:none}:root:not([data-theme="light"]) .pref-source .gps-dark{display:inline}}

/* Uploaded logo image, with an optional dark-mode version (Settings > Site profile).
   OneClearWinner's flag sits above the wordmark, so the image is nudged up 3px to centre the wordmark on the menu */
.logo{display:inline-flex;align-items:center;line-height:1}
.logo-img{display:block;height:40px;width:auto;position:relative;top:-3px}
.site-foot .logo-img{height:36px;top:0}
.logo-on-dark{display:none}
:root[data-theme="dark"] .logo-on-dark{display:block}
:root[data-theme="dark"] .logo-on-light:has(+ .logo-on-dark){display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-on-dark{display:block}:root:not([data-theme="light"]) .logo-on-light:has(+ .logo-on-dark){display:none}}
@media (max-width:600px){.site-head .logo-img{height:32px;top:-2px}}
/* Link from a review to the live comparison page */
.compare-live{display:block;margin-top:12px;font-size:14px;font-weight:500;color:var(--accent)}

/* Pick card and Trending now (homepage, picks and trends first) */
.pk .cat-body{gap:10px}
.pk-kicker{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pk-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pk-name{font-family:var(--f-display);font-size:30px;line-height:1.1}
.pk-why{font-size:16px;line-height:1.55}
.pk-how{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.pk-how b{font-weight:600;color:var(--ink)}
.pk-links{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;margin-top:4px}
.pk-compare{font-size:14px;font-weight:500;color:var(--accent);white-space:nowrap}
.trend-sub{font-size:16px;color:var(--muted)}
#trending .pick h3{font-family:var(--f-display);font-weight:400;font-size:20px}

/* About page (pattern hb/page-about): the site's own page header, prose, photo frame and stats row */
.prose .about-photo{margin:8px 0}
.prose .about-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius,4px)}
.prose .about-stats{border-block:1px solid var(--line);padding-block:32px}
.stats:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.prose .about-stats .stats{grid-template-columns:1fr;gap:24px}}
.prose .about-links{list-style:none;padding:0;display:grid;gap:0}
.prose .about-links li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.prose .about-links a{color:var(--ink);font-weight:600}

/* Contact page and hb/contact-form */
.contact-banner{margin:24px 0 40px}
.contact-banner img{width:100%;height:auto;aspect-ratio:16/5;object-fit:cover;object-position:50% 30%}
.contact-cols{gap:48px;margin-bottom:64px}
.contact-cols h1{font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin-bottom:12px}
.contact-cols p{font-size:17px;line-height:1.6;color:var(--muted)}
.contact-form form{display:grid;gap:14px}
.contact-form .cf-field{display:grid;gap:6px;margin:0}
.contact-form label{font-size:14px;font-weight:500;color:var(--ink)}
.contact-form input,.contact-form textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,6px);padding:10px 12px;width:100%}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.contact-form .cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .cf-note{padding:14px 16px;border-radius:var(--radius,6px);font-size:16px}
.contact-form .cf-ok{background:var(--pop-soft);color:var(--better)}
.contact-form .cf-err{background:var(--accent-soft);color:var(--worse)}
@media (max-width:781px){.contact-cols{gap:20px}.contact-banner img{aspect-ratio:16/7}}

/* Site pages: team cards, cookie tables */
.prose .lede{font-size:20px;line-height:1.6;color:var(--muted)}
.prose .muted{font-size:14px;color:var(--muted)}
.prose .team-grid{gap:16px;margin:0}
.prose .team-card{border:1px solid var(--line);border-radius:var(--radius,6px);background:var(--surface);padding:18px 20px;display:grid;align-content:start;gap:6px}
.prose .team-card h3{font-size:20px;margin:0}
.prose .team-card p{font-size:15px;line-height:1.55;margin:0}
.prose .team-editor{border-left:2px solid var(--pop);padding-left:22px;display:grid;gap:12px}
.prose .team-editor h3{font-size:26px;margin:0}
/* Team photos: round head-and-shoulders portraits, the same size on every card */
/* Photos: one fixed size per role, whatever size was picked or dragged in the editor (!important beats the
   inline width WordPress saves on a resized image). A card with no photo yet keeps the same space, so the names
   in a row still line up. */
.prose .team-photo{margin:0 0 4px;width:72px!important;max-width:none!important;height:72px}
.prose .team-photo img{display:block;width:72px!important;height:72px!important;max-width:none!important;border-radius:50%;object-fit:cover;object-position:50% 30%;background:var(--line)}
.prose .team-photo-editor{width:112px!important;height:112px}
.prose .team-photo-editor img{width:112px!important;height:112px!important}
.prose .team-grid:has(.team-photo) .team-card > :first-child:not(.team-photo){margin-top:76px}
/* The team page uses the full content width: three cards side by side need it. */
.prose:has(.team-grid){max-width:none}
.prose:has(.team-grid) > :not(.team-grid):not(.team-editor){max-width:68ch}
.prose .cookie-table{margin:0;overflow-x:auto}
.prose .cookie-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose .cookie-table th,.prose .cookie-table td{border-bottom:1px solid var(--line);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.prose .cookie-table th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.prose .cookie-table td:first-child{font-family:ui-monospace,Menlo,monospace;font-size:14px;white-space:nowrap}

/* Categories nav bar (assets/js/site.js adds cats-bar when it fits, cats-bar-tight to drop the icons) */
:root.cats-bar .site-head .cat-toggle{display:none}
:root.cats-bar .site-head .catnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border-bottom:0;border-top:1px solid var(--line);transition:none}
:root.cats-bar .site-head .catnav .wrap{display:flex;flex-wrap:nowrap;height:auto;align-items:center;justify-content:space-between;gap:20px;padding-block:0;grid-template-columns:none}
:root.cats-bar .site-head .catnav .wrap > a{flex:none;border:0;padding-block:12px;gap:8px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
:root.cats-bar .site-head .catnav .wrap > a .ci{width:18px;height:18px}
:root.cats-bar .site-head .catnav .wrap > a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
:root.cats-bar .site-head .catnav .more-links{display:none!important}
:root.cats-bar-tight .site-head .catnav .wrap > a .ci{display:none}
:root.cats-bar-tight .site-head .catnav .wrap{gap:16px}

/* Icon sets per design (hb_icon() picks the set) */
svg.ic-lucide{fill:none!important;stroke-width:1.75}
svg.fact-ico.ic-lucide{stroke-width:1.4}
svg.ic-ph{stroke:none!important}
svg.ci.ic-ph,svg.gi.ic-ph{fill:var(--accent)!important}
svg.fact-ico.ic-ph{fill:var(--ink)!important}
.prose .cookie-table thead{border:0}
.prose .cookie-table :is(th,td){border-width:0 0 1px;border-style:solid;border-color:var(--line)}

/* Cookie consent banner (inc/consent.php): Accept and Reject look the same */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 20px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius,6px);box-shadow:0 18px 40px -16px rgba(0,0,0,.35)}
.consent[hidden]{display:none}
.consent p{flex:1 1 320px;margin:0;font-size:15px;line-height:1.5}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.consent-btns{display:flex;gap:10px;flex:none}
.consent-btn{background:var(--accent);color:var(--bg);min-width:112px}

/* Image block option "Amazon button" (inc/image-buy.php): the image in a frame, a full-width button under it */
.wp-block-image.has-buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,4px);padding:10px;display:grid;gap:10px}
.wp-block-image.has-buy img{border-radius:calc(var(--radius,4px) - 2px);width:100%;height:auto}
.wp-block-image.has-buy .img-buy-btn{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;padding:13px 18px;background:var(--accent);color:var(--bg);border-radius:var(--radius,4px);font:600 13px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.wp-block-image.has-buy .img-buy-btn:hover{filter:brightness(1.08)}
.wp-block-image.has-buy .img-buy-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.img-buy-note{font-size:12px;color:var(--muted);text-align:center;margin-top:-4px}
.wp-block-image.has-buy figcaption{margin:0;padding:0 2px}

/* Header tools: Google preferred-source badge and the disclosure "i" (blocks/site-header) */
.site-head .head-tools{align-items:center;gap:8px}
.pref-mini{flex:none;line-height:0;display:inline-block}
.pref-mini img{height:auto}
.pref-mini .gps-dark{display:none}
:root[data-theme="dark"] .pref-mini .gps-light{display:none}
:root[data-theme="dark"] .pref-mini .gps-dark{display:inline}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pref-mini .gps-light{display:none}:root:not([data-theme="light"]) .pref-mini .gps-dark{display:inline}}
.site-head .pref-mini.in-head{margin-right:6px}
.site-head .pref-mini.in-head img{width:112px}
.info-btn[aria-expanded="true"],.info-btn:hover{border-color:var(--ink)}
.disc-pop{position:fixed;inset:auto;margin:0;width:min(340px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--pop);border-radius:var(--radius,4px);box-shadow:0 14px 30px -12px rgba(0,0,0,.28);padding:14px 16px;font:400 14px/1.55 var(--f-body);text-align:left}
.disc-pop b{font-weight:600}
.disc-pop a{font-weight:600;white-space:nowrap;color:var(--accent)}
.disc-pop:not(:popover-open):not(.open){display:none}
@media (max-width:600px){.site-head .head-tools{gap:6px}.site-head .icon-btn{width:34px;height:34px}.site-head .pref-mini.in-head{margin-right:2px}.site-head .pref-mini.in-head img{width:86px}.site-head .cat-toggle > span{display:none}.site-head .cat-toggle{padding:0 10px;height:34px}}
@media (max-width:480px){.site-head > .wrap{gap:8px}.site-head #theme{display:none}}
@media (max-width:400px){.site-head .cat-toggle .chev{display:none}.site-head .pref-mini.in-head img{width:80px}}
@media (max-width:360px){.site-head .head-tools a.icon-btn[href*="?s="]{display:none}}

/* Proof cards section with no card left (all still [placeholders]): hide the empty section. */
.cats:not(:has(.cat)){display:none}

/* ---------- Category hub (blocks/category-hub, from the mockup's category-hub.html) ---------- */
.hub-head{display:grid;gap:14px;padding-block:18px 26px;border-bottom:1px solid var(--line)}
.hub-head .kicker{margin:0}
.hub-head h1{font-size:clamp(40px,6vw,72px);line-height:1}
.hub-head h1 .hub-page{font-size:.4em;color:var(--muted);font-weight:400}
.hub-head .deck{font-size:19px;color:var(--muted);max-width:62ch;margin:0}
.hub-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hub-tabs a{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--ink)}
.hub-tabs a:hover{border-color:var(--ink)}
.hub-tabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hub-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:36px;border-bottom:1px solid var(--line)}
@media (max-width:860px){.hub-lead{grid-template-columns:1fr;gap:22px}}
.hub-lead .ph{--r:4/3;border-radius:var(--radius)}
.hub-lead-body{display:grid;gap:14px}
.hub-lead-body .award{font-family:var(--f-display);font-style:italic;font-size:20px;color:var(--accent)}
.hub-lead-body h2{font-size:clamp(32px,4vw,48px);line-height:1.05;margin:0}
.hub-lead-body h2 a{color:inherit}
.hub-lead-body .why{font-size:18px;line-height:1.55;margin:0}
.hub-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:14px;color:var(--muted)}
.hub-fact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;border-left:3px solid var(--pop);padding-left:14px}
.hub-fact b{font-family:var(--f-display);font-weight:400;font-size:30px}
.hub-fact span{font-size:14px;color:var(--muted)}
.hub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:4px}
.hub-sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-bottom:20px}
.hub-sec-head h2{margin:0}
.hub-sec-head a{font-size:14px;font-weight:500;color:var(--accent)}
.hub-awards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:860px){.hub-awards{grid-template-columns:1fr}}
.hub-aw{display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--ink);padding-top:14px}
.hub-aw .label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hub-aw .ph{--r:3/2;border-radius:var(--radius)}
.hub-aw h3{font-size:24px;margin:0}
.hub-aw h3 a{color:inherit}
.hub-aw p{font-size:15px;color:var(--muted);margin:0}
.hub-aw .links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;margin-top:auto}
.hub-aw .links a{color:var(--accent);font-weight:500}
.hub-guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
@media (max-width:1000px){.hub-guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hub-guides{grid-template-columns:1fr}}
.hub-guide{display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.hub-guide .ph{--r:4/3;border-radius:var(--radius)}
.hub-guide .kicker{margin-top:6px}
.hub-guide h3{font-size:20px;line-height:1.25;margin:0}
.hub-guide:hover h3,.hub-row:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hub-guide .by{font-size:13px;color:var(--muted)}
.hub-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:start}
.hub-split-solo{grid-template-columns:1fr}
@media (max-width:900px){.hub-split{grid-template-columns:1fr}}
.hub-latest{display:grid}
.hub-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;padding-block:20px;border-top:1px solid var(--line);align-items:start;color:var(--ink)}
@media (max-width:560px){.hub-row{grid-template-columns:110px minmax(0,1fr);gap:14px}}
.hub-row .ph{--r:4/3;border-radius:var(--radius)}
.hub-row h3{font-size:22px;line-height:1.2;margin:4px 0 6px}
.hub-row p{font-size:15px;color:var(--muted);margin:0}
.hub-row .meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:var(--muted);margin-top:8px}
.hub-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;font-size:15px}
.hub-pager a,.hub-pager span{padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.hub-pager .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hub-side{display:grid;gap:26px;position:sticky;top:92px}
@media (max-width:900px){.hub-side{position:static}}
.hub-tester{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:20px;display:grid;gap:10px}
.hub-tester .kicker{margin:0}
.hub-tester .hub-who{display:flex;gap:14px;align-items:center}
.hub-tester .hub-avatar{border-radius:50%;width:56px;height:56px}
.hub-tester b{font-size:17px}
.hub-tester .role{font-size:14px;color:var(--muted)}
.hub-tester p{font-size:15px;margin:0}
.hub-tester .stat{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);border-left:3px solid var(--pop);padding-left:12px}
.hub-tester .stat b{font-family:var(--f-display);font-weight:400;font-size:24px;color:var(--ink)}
.hub-tester a,.hub-method a{color:var(--accent);font-weight:500;font-size:14px}
.hub-method{background:var(--pop-soft,var(--surface));border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:10px}
.hub-method h3{font-size:20px;margin:0}
.hub-method ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14px}