/*
Theme Name: Client Magnet
Description: A fast personal brand and blog theme built to turn readers into clients. Your offers inside every post, product reviews, comparisons, training landing pages and standalone pages, with no page builder needed. Works with the Client Magnet Toolkit plugin.
Version: 1.0.2
Author: Iyanu Taiwo
Requires PHP: 7.4
Text Domain: client-magnet
*/

/* Fonts: hosted with the theme, nothing loaded from Google. Poppins for headings and buttons, Montserrat to read. */
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(assets/fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(assets/fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(assets/fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(assets/fonts/montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(assets/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-latin-700-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --brand-50:#f0fdf4;--brand-100:#dcfce7;--brand-200:#bbf7d0;--brand-300:#86efac;--brand-400:#4ade80;--brand-500:#22c55e;
  --brand-600:#16a34a;--brand-700:#15803d;--brand-800:#166534;--brand-900:#14532d;
  --deep:#07100c;--deep-2:#0c1a14;--deep-line:#1c2c24;--deep-text:#c5d3cb;
  --bg:#fff;--bg-soft:#f4f7f5;--card:#fff;--text:#0c1410;--ink:#26322b;--muted:#5b6b62;--line:#e3e9e5;--link:#15803d;
  --btn-bg:var(--brand-400);--btn-text:#052e16;--btn-hover:var(--brand-300);
  --shadow:0 1px 2px rgb(7 16 12/.04),0 10px 30px -14px rgb(7 16 12/.14);
  --font:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;--head:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs:17px;--r:18px;--hh:72px;
}
html.dark{
  --bg:#07100c;--bg-soft:#0b1712;--card:#0c1a14;--text:#f1f5f2;--ink:#cfdad3;--muted:#8fa398;--line:#1c2c24;--link:#4ade80;
  --shadow:none;
}
@media(max-width:600px){:root{--fs:16px;--hh:64px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px);background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 50%,var(--deep) 50%,var(--deep) 100%)}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs)/1.75 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,iframe{max-width:100%;height:auto}
a{color:var(--link)}
::selection{background:rgb(74 222 128/.3)}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.2;margin:0 0 .5em;color:var(--text);text-wrap:balance;letter-spacing:-.015em}
p{text-wrap:pretty}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 18px}}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;color:#000;padding:8px 12px;z-index:100;border-radius:8px}
:focus-visible{outline:3px solid var(--brand-400);outline-offset:3px}
.center{justify-content:center}

/* ---------- Buttons, labels, social ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--btn-bg);color:var(--btn-text)!important;font:600 15px/1.2 var(--head);padding:14px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 10px 24px -12px rgb(34 197 94/.6)}
.btn:hover{background:var(--btn-hover);transform:translateY(-1px)}
.btn svg{flex:none;transition:transform .15s}.btn:hover svg{transform:translateX(2px)}
.btn-ghost{background:transparent;color:var(--text)!important;border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-block{width:100%;padding:16px}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);margin-bottom:14px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
html.dark .eyebrow{color:var(--brand-400)}
.badge{display:inline-block;align-self:flex-start;font:600 11px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--brand-100);color:var(--brand-800)}
html.dark .badge{background:rgb(74 222 128/.12);color:var(--brand-400)}
.social{display:flex;flex-wrap:wrap;gap:8px}
.social a{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.social a:hover{color:var(--text);border-color:var(--brand-400);background:var(--bg-soft)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgb(255 255 255/.86);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgb(7 16 12/.35)}
html.dark .site-header{background:rgb(7 16 12/.82)}
.head-in{display:flex;align-items:center;gap:20px;height:var(--hh)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex:none}
.brand-mark{width:30px;height:30px;border-radius:9px;display:block}
.brand b{font:700 18px/1 var(--head);letter-spacing:-.01em;white-space:nowrap}
.brand-img{max-height:40px;width:auto;display:block}
.nav{flex:1;display:flex;justify-content:center}
.nav ul{list-style:none;margin:0;padding:0}
.nav>ul{display:flex;gap:2px}
.nav li{position:relative}
.nav a{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;font:500 14.5px var(--head);color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{color:var(--text);background:var(--bg-soft)}
.nav .menu-item-has-children>a::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-2px,-2px);opacity:.7}
.nav .sub-menu{position:absolute;top:100%;left:50%;min-width:240px;padding:8px;margin-top:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 48px -20px rgb(7 16 12/.35);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .15s,transform .15s,visibility .15s}
.nav .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu,.nav li.open>.sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav .sub-menu a{border-radius:10px;padding:10px 12px;color:var(--ink)}
.head-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;background:none;border:1px solid transparent;color:var(--muted);cursor:pointer;border-radius:12px}
.theme-toggle:hover{background:var(--bg-soft);color:var(--text)}
.theme-toggle .i-moon,html.dark .theme-toggle .i-sun{display:none}
html.dark .theme-toggle .i-moon{display:block}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu-btn span{display:block;width:17px;height:1.8px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}
.m-menu{position:fixed;inset:var(--hh) 0 0;overflow-y:auto;background:var(--bg);padding:12px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:24px;animation:cmag-in .2s ease-out}
@keyframes cmag-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.m-menu ul{list-style:none;margin:0;padding:0}
.m-menu a:not(.btn){display:block;padding:15px 4px;border-bottom:1px solid var(--line);font:600 18px var(--head);color:var(--text);text-decoration:none}
.m-menu .sub-menu{padding-left:14px}
.m-menu .sub-menu a:not(.btn){font:500 16px var(--head);color:var(--muted);padding:12px 4px}
.m-foot{display:flex;flex-direction:column;gap:18px;margin-top:auto}
html.menu-open{overflow:hidden}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-500),var(--brand-300))}
.site-header.slim .head-in{justify-content:space-between}
@media(max-width:980px){.nav{display:none}.menu-btn{display:flex}}
@media(min-width:981px){.m-menu{display:none!important}}
@media(max-width:600px){.head-cta{display:none}.brand b{font-size:17px}}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:600px){.admin-bar .site-header{top:0}}

/* ---------- Dark green hero (blog, topics, search) ---------- */
.lhero{position:relative;overflow:hidden;background:var(--deep);color:#f1f5f2;text-align:center;padding:84px 0 56px}
.lhero.compact{padding:60px 0 40px}
.lhero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 90% at 50% -25%,rgb(74 222 128/.28),transparent 70%),radial-gradient(30% 55% at 100% 110%,rgb(74 222 128/.12),transparent 70%)}
.lhero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255/.04) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 80% at 50% 0,#000,transparent 80%);mask-image:radial-gradient(70% 80% at 50% 0,#000,transparent 80%)}
.lhero .wrap{position:relative;z-index:1}
.lhero .eyebrow{color:var(--brand-300)}
.lhero h1{color:#fff;font-size:clamp(34px,5.6vw,60px);line-height:1.08;max-width:860px;margin:0 auto 16px;letter-spacing:-.025em}
.lhero.compact h1{font-size:clamp(28px,4.4vw,44px)}
.lhero .lead{color:var(--deep-text);max-width:620px;margin:0 auto 28px;font-size:18px}
.lhero .lead p{margin:0}
.s-form{display:flex;gap:8px;max-width:560px;margin:0 auto}
.s-form input{flex:1;min-width:0;padding:15px 20px;border:1px solid #24382d;border-radius:999px;background:#0c1a14;color:#fff;font:400 16px var(--font)}
.s-form input::placeholder{color:#6f8478}
.s-form input:focus{outline:2px solid var(--brand-400);outline-offset:0;border-color:var(--brand-400)}
.s-form .btn{padding:14px 24px;box-shadow:none}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0}
.chip{padding:8px 15px;border:1px solid #24382d;border-radius:999px;font:500 13.5px var(--head);color:var(--deep-text);text-decoration:none;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--brand-400);color:#fff}
.chip.on{background:var(--brand-400);border-color:var(--brand-400);color:#052e16}
@media(max-width:600px){.lhero{padding:56px 0 40px}.lhero .lead{font-size:16px}.s-form .btn{padding-inline:18px}}

/* ---------- Lists of posts ---------- */
.sec-head{margin-bottom:20px}
.sec-head h2{font-size:clamp(24px,2.8vw,30px);margin:0 0 4px}
.sec-head p{margin:0;color:var(--muted)}
.mag{padding:56px 0 8px}
.mag-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:stretch}
.mag-side{display:flex;flex-direction:column;gap:24px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0 0}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);border-color:var(--brand-400);box-shadow:0 22px 40px -24px rgb(7 16 12/.4)}
.card .thumb{aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.card:hover .thumb img{transform:scale(1.03)}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h2,.card h3{font-size:18px;line-height:1.3;margin:0}
.card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.card .meta{margin-top:auto;padding-top:4px;font-size:12.5px;color:var(--muted)}
.card.feature{flex-direction:column}
.card.feature .body{padding:24px 26px 28px}
.card.feature h2{font-size:clamp(22px,2.4vw,28px)}
.card.row{flex:1;flex-direction:row}
.card.row .thumb{width:40%;aspect-ratio:auto;min-height:140px;flex:none}
.card.row .body{justify-content:center}
.card.row h3{font-size:16.5px}
.play-dot{position:absolute;inset:0;display:grid;place-items:center}
.play-dot i{width:56px;height:56px;border-radius:50%;background:rgb(7 16 12/.72);display:grid;place-items:center}
.play-dot i::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.topics{padding:56px 0 0}
.topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.topic{--ac:var(--brand-500);display:flex;flex-direction:column;gap:4px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.topic:hover{border-color:var(--ac);transform:translateY(-2px)}
.topic .ti{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac);margin-bottom:10px}
.topic b{font:600 16px var(--head)}
.topic span{font-size:13px;color:var(--muted)}
.shelf{padding:56px 0 72px}
.shelf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.shelf-head h2{font-size:clamp(24px,2.8vw,30px);margin:0}
.more-link{text-align:center;margin:36px 0 0}
.band{padding:48px 0 0}
.empty{padding:56px 0 80px}
.empty-in{text-align:center;max-width:560px;margin:0 auto 28px}
.empty-in h2{font-size:clamp(24px,3vw,32px)}
.empty-in p{color:var(--muted);margin:0}
.results{padding-top:36px;padding-bottom:72px}
.results .grid{margin-top:0}
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:44px 0 0}
.pager a,.pager span{padding:10px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font:500 14px var(--head);color:var(--text)}
.pager .current{background:var(--brand-400);border-color:var(--brand-400);color:#052e16}
@media(max-width:980px){.mag-grid{grid-template-columns:minmax(0,1fr)}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}.card.row .thumb{width:36%;min-height:112px}.mag,.topics,.shelf{padding-top:40px}}

/* ---------- Pages ---------- */
.page-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:64px 0 44px}
.page-head .wrap{max-width:808px}
.page-head h1{font-size:clamp(32px,4.6vw,50px);margin:0}
.page-head .lead{margin:14px 0 0;color:var(--muted);font-size:18px}
.page-wrap{max-width:808px;padding-top:44px;padding-bottom:80px}
.page-wrap.standalone{padding-top:56px}
.builder-content{width:100%}
.builder-page main{overflow-x:clip}

/* ---------- Post ---------- */
.post-wrap{display:grid;grid-template-columns:minmax(0,720px) 272px;gap:64px;justify-content:center;padding-top:40px;padding-bottom:80px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:500 13px var(--head);color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--text)}
.post h1{font-size:clamp(30px,4.2vw,48px);line-height:1.1;letter-spacing:-.025em;margin:14px 0 20px}
.byline{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-size:14px;line-height:1.35}
.byline>span{display:flex;flex-direction:column;gap:2px}
.by-name{font:600 14px var(--head);color:var(--text);text-decoration:none}
.by-name:hover{color:var(--link)}
.by-meta{font-size:13px;color:var(--muted)}
.av{border-radius:50%;object-fit:cover;flex:none;display:block}
.av-i{display:inline-grid;place-items:center;border-radius:50%;background:var(--brand-100);color:var(--brand-800);font-family:var(--head);font-weight:700;flex:none}
html.dark .av-i{background:rgb(74 222 128/.14);color:var(--brand-400)}
.edit-link{margin:-12px 0 20px}
.edit-link a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font:500 13px var(--head);color:var(--text);text-decoration:none}
.edit-link a::before{content:"\270E"}
.cover{margin:0 0 30px;aspect-ratio:1200/630;border-radius:22px;overflow:hidden;background:var(--deep);border:1px solid var(--line)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover-svg{display:block;width:100%;height:100%}
.thumb .cover-svg{position:absolute;inset:0}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:20px;overflow:hidden;margin:0 0 28px}
.video button{all:unset;cursor:pointer;display:block;width:100%;height:100%;position:relative}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.video .play-dot i{width:76px;height:76px;background:var(--brand-400);box-shadow:0 0 0 10px rgb(74 222 128/.25)}
.video .play-dot i::after{border-left-color:#052e16;border-top-width:13px;border-bottom-width:13px;border-left-width:21px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.quick{font-size:var(--fs);line-height:1.7;color:var(--ink);border:1px solid var(--brand-200);border-radius:var(--r);padding:20px 22px;margin:0 0 30px;background:linear-gradient(180deg,var(--brand-50),rgb(240 253 244/0))}
html.dark .quick{border-color:#1d4a32;background:linear-gradient(180deg,#0d2318,rgb(13 35 24/0))}
.quick b{display:table;font:700 11px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;padding:6px 10px;border-radius:999px;background:var(--brand-100);color:var(--brand-800)}
html.dark .quick b{background:rgb(74 222 128/.14);color:var(--brand-400)}
.disclose{font-size:13.5px;line-height:1.55;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:-8px 0 24px}

/* Body copy */
.entry{color:var(--ink)}
.entry>*{margin-top:0}
.entry p,.entry ul,.entry ol,.entry blockquote,.entry figure,.entry table,.entry pre{margin:0 0 1.35em}
.entry li{margin-bottom:.55em}
.entry h2{font-size:clamp(25px,2.7vw,31px);line-height:1.2;margin:2.2em 0 .7em;scroll-margin-top:calc(var(--hh) + 20px)}
.entry h3{font-size:clamp(19px,1.8vw,22px);font-weight:600;margin:1.9em 0 .55em;scroll-margin-top:calc(var(--hh) + 20px)}
.entry h4{font-size:var(--fs);font-weight:600;margin:1.6em 0 .5em}
.entry>h2:first-child,.entry>h3:first-child{margin-top:.4em}
.entry a{text-decoration-thickness:1px;text-underline-offset:3px}
.entry strong{color:var(--text)}
.entry img{border-radius:16px}
.entry figure img{border:1px solid var(--line)}
.entry figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.entry blockquote{border-left:3px solid var(--brand-400);padding:4px 0 4px 20px;color:var(--text);font:500 calc(var(--fs) + 1px)/1.65 var(--head)}
.entry table,.vs table{width:100%;border-collapse:collapse;font:400 15px/1.55 var(--font)}
.entry th,.vs th{font:600 12px/1.3 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft);text-align:left}
.entry th,.entry td,.vs th,.vs td{border-bottom:1px solid var(--line);padding:13px 14px;vertical-align:top;text-align:left}
.entry pre,.entry code{background:var(--bg-soft);border-radius:8px;font-size:14px}
.entry code{padding:2px 6px}.entry pre{padding:16px;overflow:auto}.entry pre code{padding:0}
.entry .wp-block-image,.entry figure{margin-left:0;margin-right:0}
.entry .wp-block-button__link{display:inline-block;background:var(--btn-bg);color:var(--btn-text);font:600 15px var(--head);padding:14px 22px;border-radius:999px;text-decoration:none}
.entry .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:16px}
.vs{overflow-x:auto;margin:0 0 28px;border:1px solid var(--line);border-radius:var(--r)}
.vs th:nth-child(2),.vs td:nth-child(2){background:var(--brand-50);font-weight:600;color:var(--text)}
html.dark .vs th:nth-child(2),html.dark .vs td:nth-child(2){background:rgb(74 222 128/.07)}
.verdict{border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;margin:32px 0;background:var(--bg-soft)}
.verdict h2{margin:0 0 .5em;font-size:24px}
.verdict p{margin:0 0 1em}
.verdict .btn{margin-top:6px}
@media(max-width:600px){.entry h2{font-size:24px}.entry h3{font-size:19px}}

/* Product review */
.rv-box{border:1px solid var(--line);border-radius:22px;padding:22px 24px;margin:0 0 30px;background:var(--card);box-shadow:var(--shadow)}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.rv-label{display:block;font:600 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rv-head strong{font:700 22px/1.25 var(--head)}
.rv-score{display:flex;align-items:baseline;gap:3px}
.rv-score b{font:700 34px/1 var(--head)}
.rv-score>span{font:500 15px var(--head);color:var(--muted);margin-right:8px}
.stars{display:inline-flex;gap:2px;align-self:center}
.stars i{width:16px;height:16px;background:var(--line);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.3 6.9.9-5 4.8 1.2 6.9L12 17.6 5.9 20.9 7.1 14l-5-4.8 6.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.3 6.9.9-5 4.8 1.2 6.9L12 17.6 5.9 20.9 7.1 14l-5-4.8 6.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
.stars i.f{background:#f59e0b}
.stars i.h{background:linear-gradient(90deg,#f59e0b 50%,var(--line) 50%)}
.rv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.rv-facts div{background:var(--bg-soft);border-radius:12px;padding:12px 14px}
.rv-facts dt{font:600 11px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rv-facts dd{margin:2px 0 0;font-size:15px;color:var(--text)}
.rv-box .btn{width:100%}
.rv-pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0}
.rv-pc>div{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.rv-pc h2{font-size:18px!important;margin:0 0 12px!important}
.rv-pc ul{list-style:none;margin:0;padding:0}
.rv-pc li{position:relative;padding-left:28px;margin-bottom:10px;font-size:15.5px;line-height:1.55}
.rv-pros li::before{content:"";position:absolute;left:2px;top:6px;width:14px;height:8px;border-left:2.5px solid var(--brand-600);border-bottom:2.5px solid var(--brand-600);transform:rotate(-45deg)}
.rv-cons li::before{content:"";position:absolute;left:3px;top:11px;width:13px;height:2.5px;border-radius:2px;background:#dc2626}
.rv-pros{background:linear-gradient(180deg,var(--brand-50),transparent)}
html.dark .rv-pros{background:linear-gradient(180deg,rgb(74 222 128/.07),transparent)}
@media(max-width:600px){.rv-pc{grid-template-columns:1fr}}

/* Offers inside and after posts, in the sidebar and in bands. Always light text on the dark green. */
.offer{position:relative;overflow:hidden;border-radius:22px;background:var(--deep);color:var(--deep-text);padding:28px;margin:2.2em 0;display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center;justify-content:space-between}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(380px 220px at 0 0,rgb(74 222 128/.26),transparent 70%),radial-gradient(260px 180px at 100% 100%,rgb(74 222 128/.12),transparent 70%);pointer-events:none}
.offer>*{position:relative}
.offer-copy{flex:1 1 320px}
.offer strong{display:block;font:700 20px/1.3 var(--head);color:#fff;margin-bottom:6px;text-wrap:balance}
.offer p{margin:0;font-size:15.5px;line-height:1.6;color:var(--deep-text)!important}
.offer .btn-ghost{color:#fff!important;border-color:#2b4235}.offer .btn-ghost:hover{background:#12241b}
.offer-end{padding:34px;margin-top:40px}
.offer-end strong{font-size:23px}
.offer-side{flex-direction:column;align-items:stretch;padding:22px;margin:0;border-radius:var(--r)}
.offer-side .offer-copy{flex:none}
.offer-side strong{font-size:18px}
.offer-side .btn{width:100%}
.offer-band{padding:40px;margin:0}
.offer-band strong{font-size:clamp(22px,2.6vw,28px)}
@media(max-width:600px){.offer{padding:24px}.offer .btns,.offer .btn{width:100%}.offer-band{padding:28px 24px}}

/* FAQ */
.faq{margin:40px 0}
.faq h2{font-size:clamp(23px,2.6vw,28px)}
.faq details{border:1px solid var(--line);border-radius:16px;margin-bottom:10px;background:var(--card);transition:border-color .15s}
.faq details[open]{border-color:var(--brand-300)}
html.dark .faq details[open]{border-color:#1d4a32}
.faq summary{cursor:pointer;padding:17px 20px;font:600 var(--fs)/1.45 var(--head);color:var(--text);list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-top:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:11px}
.faq details>div{padding:0 20px 18px;color:var(--ink)}
.faq details>div p{margin:0 0 10px}.faq details>div p:last-child{margin:0}

/* Author */
.author{display:flex;gap:18px;align-items:flex-start;margin-top:40px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.author .av{width:72px;height:72px}
.author-label{display:block;font:600 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.author b{display:block;font:700 18px/1.3 var(--head);color:var(--text);margin-top:2px}
.author-role{display:block;font-size:14px;color:var(--link);margin-top:2px}
.author p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
.author .social{margin-top:14px}
@media(max-width:600px){.author{flex-direction:column}}

/* Sidebar and contents */
.side{position:relative}
.side-in{position:sticky;top:calc(var(--hh) + 24px);display:flex;flex-direction:column;gap:22px}
.admin-bar .side-in{top:calc(var(--hh) + 56px)}
.toc{font-size:14px}
.toc b{display:block;font:700 11px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;line-height:1.4;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--text);font-weight:600;border-left-color:var(--brand-400)}
.toc-m{display:none;border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:0 0 28px;background:var(--card)}
.toc-m summary{cursor:pointer;font:600 15px var(--head);list-style:none;display:flex;justify-content:space-between;align-items:center}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"";width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.toc-m[open] summary::after{transform:rotate(-135deg)}
.toc-m ol{margin:12px 0 0;padding-left:18px;font-size:15px}.toc-m li{margin-bottom:8px}.toc-m a{color:var(--muted);text-decoration:none}
.related{background:var(--bg-soft);border-top:1px solid var(--line);padding:56px 0 72px}
.related h2{font-size:clamp(24px,2.8vw,30px)}
@media(max-width:1060px){.post-wrap{grid-template-columns:minmax(0,720px);gap:0}.side{display:none}.toc-m{display:block}}
@media(max-width:600px){.post-wrap{padding-top:26px}.post h1{font-size:clamp(28px,8vw,36px)}}

/* Sticky phone button: beside the chat bubble (60px, 24px from the bottom right), never on top of it.
   Shows after the top of the post and hides near the end, where the big offer is. */
.sticky-cta{display:none}
@media(max-width:760px){
  .sticky-cta{display:block;position:fixed;left:16px;right:100px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:60;transform:translateY(140%);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s;pointer-events:none}
  .sticky-cta.on{transform:none;opacity:1;pointer-events:auto}
  .sticky-cta .btn{width:100%;height:56px;border-radius:18px;font-size:15.5px;box-shadow:0 14px 30px -10px rgb(7 16 12/.5)}
}

/* ---------- Footer (dark green in both themes) ---------- */
.site-footer{background:var(--deep);color:var(--deep-text);font-size:14.5px;padding:0 0 calc(28px + env(safe-area-inset-bottom));margin-top:0}
.foot-band{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:40px;border-radius:26px;background:var(--deep-2);border:1px solid var(--deep-line);transform:translateY(-40px);margin-bottom:-8px}
.foot-band::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 240px at 0 0,rgb(74 222 128/.24),transparent 70%);pointer-events:none}
.foot-band>*{position:relative}
.foot-band>div{flex:1 1 360px}
.foot-band .eyebrow{color:var(--brand-300);margin-bottom:10px}
.foot-band strong{display:block;font:700 clamp(22px,2.6vw,28px)/1.25 var(--head);color:#fff;text-wrap:balance}
.foot-band p{margin:8px 0 0;color:var(--deep-text)}
.site-footer:not(:has(.foot-band)){padding-top:64px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding-top:24px}
.foot-brand .brand{color:#fff;margin-bottom:6px}
.foot-brand .role{font:500 14px var(--head);color:var(--brand-300);margin:4px 0 12px}
.foot-brand p{max-width:360px;margin:0 0 18px;line-height:1.65}
.site-footer h4{color:#fff;font:600 13px var(--head);letter-spacing:.12em;text-transform:uppercase;margin:6px 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin-bottom:10px}
.site-footer a{color:var(--deep-text);text-decoration:none;transition:color .15s}.site-footer a:hover{color:#fff}
.site-footer .social a{border-color:var(--deep-line);color:var(--deep-text)}
.site-footer .social a:hover{border-color:var(--brand-400);color:#fff;background:var(--deep-2)}
.legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;border-top:1px solid var(--deep-line);margin-top:44px;padding-top:22px;font-size:13px;color:#8fa398}
.legal ul{display:flex;flex-wrap:wrap;gap:18px}
.legal li{margin:0}
.legal .disclosure{flex-basis:100%;margin:6px 0 0;font-size:12.5px;line-height:1.6;color:#6f8478;max-width:820px}
.site-footer.slim{padding-top:8px}
.site-footer.slim .legal{margin-top:0;border-top:0}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:600px){.foot-band{padding:28px 24px;transform:translateY(-28px)}.foot-band .btn{width:100%}.legal{flex-direction:column;align-items:flex-start}}

/* ---------- Misc ---------- */
.notfound{text-align:center;padding:100px 0 110px}
.notfound h1{font-size:clamp(32px,5vw,52px)}
.notfound p{color:var(--muted);margin:0 0 24px}
.cmag-shot{margin:1.8em 0 2.2em}
.cmag-shot img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 40px -24px rgb(7 16 12/.35)}
.cmag-shot figcaption{margin-top:12px;font-size:14px;color:var(--muted);text-align:center}
.cmag-shot a{display:block;cursor:zoom-in}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* 1.0.1: the phone menu stays closed until opened; a white logo image turns dark on light backgrounds */
.m-menu[hidden]{display:none!important}
.site-header .brand-img,.tp-top .brand-img{filter:brightness(0)}
html.dark .site-header .brand-img,html.dark .tp-top .brand-img{filter:none}
/* 1.0.2: the frosted header made the open phone menu as small as the header itself; drop the effect while it is open */
html.menu-open .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
.m-menu .social a{display:grid;padding:0;border:1px solid var(--line);border-radius:12px}