/* zen-blog.css v2 (deploy-pack/zen-blog-shop-20261004)
   One calm layer for /blog, /shop, /pro and /deals. Everything is scoped to body.zn so it
   cannot touch the homepage, the service pages or their zen-pages.css. Same tokens and
   rhythm as the 2026-10-04 homepage cleanup: kicker labels, 56-72px bands, glass cards,
   one primary action per band, accordions that keep the text in the DOM.
   Light mode: theme.css repaints text; we only set backgrounds/borders there. */

.zn{--zn-gold:#fbbc04;--zn-gold-dark:#e5a800;--zn-ink:#0a2a30;--zn-band:rgba(0,0,0,.14);--zn-card:rgba(255,255,255,.05);--zn-line:rgba(255,255,255,.12);--zn-muted:rgba(255,255,255,.68);--zn-radius:16px}
html[data-theme="light"] .zn{--zn-band:rgba(15,79,92,.045);--zn-card:rgba(255,255,255,.72);--zn-line:rgba(15,79,92,.16);--zn-muted:#5b6b70}

/* ---------- shared pieces ---------- */
.zn .zn-kicker{display:inline-block;font:700 .7rem/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--zn-gold) !important;margin:0 0 12px;padding:6px 12px;border:1px solid rgba(251,188,4,.35);border-radius:999px;background:rgba(251,188,4,.08)}
.zn details.zn-faq,.zn details.zn-more{border-radius:14px}
.zn details.zn-faq summary,.zn details.zn-more summary{list-style:none;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.zn details summary::-webkit-details-marker{display:none}
.zn details.zn-faq summary::after,.zn details.zn-more summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 1.25rem/1 'Montserrat',sans-serif;color:var(--zn-gold)}
.zn details[open].zn-faq summary::after,.zn details[open].zn-more summary::after{content:"\2212"}

/* phone: one sticky element (the bottom Book bar); the floating quote pill and app pill
   stack over the content on small screens, so they rest */
@media(max-width:768px){body.zn #zb-quote-trigger,body.zn #zb-app-bonus{display:none !important}}

/* ======================================================================
   BLOG POSTS
   ====================================================================== */
.zn-blog-post .article-hero{padding:56px 0 24px}
.zn-blog-post .article-hero h1{font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.22;max-width:820px;margin:0 auto 12px}
.zn-blog-post .article-hero .meta{font-size:.84rem}
.zn-blog-post .zpi-hero{margin-top:22px}
.zn-blog-post .content .container,.zn-blog-post article>section>.container{max-width:760px}
.zn-blog-post .content{padding:12px 0 48px}
.zn-blog-post .content p{font-size:1.04rem;line-height:1.78;margin-bottom:18px}
.zn-blog-post .content h2{font-size:1.45rem;margin:44px 0 12px;line-height:1.3}
.zn-blog-post .content h3{font-size:1.12rem;margin:24px 0 8px}
.zn-blog-post .content ul,.zn-blog-post .content ol{line-height:1.7}
.zn-blog-post .content table{display:block;overflow-x:auto;font-size:.94rem;border:1px solid var(--zn-line);border-radius:12px}
.zn-blog-post .content th,.zn-blog-post .content td{padding:10px 14px}
.zn-blog-post .tldr{padding:16px 20px;border-radius:14px;margin:18px 0 8px}
.zn-blog-post .amzn-disclosure{margin:14px 0 22px;font-size:.8rem;padding:10px 14px;border-radius:10px}

/* trust row + first Book block: one quiet strip instead of two boxes */
.zn-blog-post .zomg-trust{gap:6px 18px;padding:10px 14px;margin:18px 0 10px;background:transparent;border:0;border-top:1px solid var(--zn-line);border-bottom:1px solid var(--zn-line);border-radius:0}
.zn-blog-post .zomg-trust .ts{font-size:.78rem;font-weight:600}
.zn-blog-post .zomg-trust .ts .v{font-size:.9rem}
.zn-blog-post .zomg-bookblock{margin:14px 0 6px;padding:14px 18px;border-radius:14px;border-color:rgba(251,188,4,.25);align-items:center}
.zn-blog-post .zomg-bookblock-text strong{font-size:1rem;margin-bottom:2px}
.zn-blog-post .zomg-bookblock-text span{font-size:.86rem}
.zn-blog-post .zomg-bookblock a{padding:9px 16px;font-size:.86rem}

/* product picks: Amazon stays exactly as it is; the card gets calmer edges and the partner
   button sits as a quiet second action after it */
.zn-blog-post .amzn-card{padding:18px 20px 16px;margin:22px 0;border-radius:var(--zn-radius);border-color:rgba(251,188,4,.22);background:var(--zn-card)}
.zn-blog-post .amzn-card .amzn-title{font-size:1.02rem}
.zn-blog-post .amzn-card .amzn-blurb{font-size:.92rem;margin-bottom:10px}
.zn-blog-post .amzn-card .amzn-cta{padding:9px 16px;font-size:.88rem}
.zn-blog-post .amzn-card .zomg-partner-cta{padding:9px 14px;font-size:.84rem;background:transparent;color:inherit !important;border:1px solid var(--zn-line);margin-left:6px}
html[data-theme="light"] .zn-blog-post .amzn-card .zomg-partner-cta{color:var(--zn-ink) !important}
.zn-blog-post .zomg-partner,.zn-blog-post .duurs-cta{padding:16px 18px;margin:18px 0;border-radius:14px;font-size:.92rem}
.zn-blog-post .zomg-partner .zp-head,.zn-blog-post .duurs-cta .dc-head{font-size:.98rem}
.zn-blog-post .zq4-measure{margin:22px 0;padding:16px 18px;background:var(--zn-card);border-color:var(--zn-line)}
.zn-blog-post .zq4-measure h3{font-size:1rem}
.zn-blog-post .zq4-measure p,.zn-blog-post .zq4-measure ul{font-size:.92rem}
.zn-blog-post .zomg-bounty{margin:20px 0 26px;padding:14px 16px;border:1px solid var(--zn-line);background:var(--zn-card);border-radius:14px}
.zn-blog-post .zomg-bounty-head{font-size:.95rem;margin-bottom:10px}
.zn-blog-post .zomg-bounty-item{padding:12px;background:transparent;border:1px solid var(--zn-line)}
.zn-blog-post .zomg-bounty-item strong{font-size:.9rem}
.zn-blog-post .zomg-bounty-item span{font-size:.82rem;margin-bottom:8px}
.zn-blog-post .zomg-bounty-item a{font-size:.82rem;padding:6px 12px}
.zn-blog-post .zomg-cta{padding:20px 22px;margin:32px 0;border-radius:var(--zn-radius)}
.zn-blog-post .zomg-cta[data-keep-color],.zn-blog-post .zomg-cta[data-keep-color] h3,.zn-blog-post .zomg-cta[data-keep-color] p{color:#fff !important}
.zn-blog-post .zomg-cta[data-keep-color] p{color:rgba(255,255,255,.88) !important}
.zn-blog-post .zomg-cta[data-keep-color] a{color:#0a2a30 !important;background:#fbbc04}
.zn-blog-post .zomg-cta h3{font-size:1.08rem}
.zn-blog-post .zomg-cta p{font-size:.95rem;margin-bottom:12px}

/* FAQ as accordions */
.zn-blog-post .faq{margin:40px 0 24px}
.zn-blog-post .faq>h2{margin-bottom:12px}
.zn-blog-post details.zn-faq{border:1px solid var(--zn-line);background:var(--zn-card);padding:0 !important;margin:0 0 10px}
.zn-blog-post details.zn-faq summary{padding:14px 44px 14px 18px}
.zn-blog-post details.zn-faq summary h3{margin:0 !important;font-size:.98rem !important;line-height:1.4}
.zn-blog-post .zn-faq-a{padding:0 18px 16px}
.zn-blog-post .zn-faq-a p{margin:0 0 8px;font-size:.96rem;line-height:1.7}
.zn-blog-post .zn-faq-a p:last-child{margin-bottom:0}

/* keep reading: see-also + related guides as compact link cards */
.zn-blog-post .zomg-seealso{margin:26px 0;padding:14px 18px;border-radius:12px;background:var(--zn-card);border-left-width:3px}
.zn-blog-post .zomg-seealso strong{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.zn-blog-post .zomg-seealso ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.zn-blog-post .zomg-seealso li{font-size:.9rem;line-height:1.45;margin:0}
.zn-blog-post .zomg-related{margin:0 auto 8px !important;max-width:760px;padding:18px 20px 12px !important;background:transparent !important;border:0 !important;border-top:1px solid var(--zn-line) !important;border-radius:0 !important}
.zn-blog-post .zomg-related h3{font-size:.78rem !important;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px !important}
.zn-blog-post .zomg-related ul{list-style:none;padding:0 !important;margin:0 !important;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.zn-blog-post .zomg-related li{font-size:.9rem;line-height:1.45;margin:0}
@media(max-width:600px){.zn-blog-post .zomg-seealso ul,.zn-blog-post .zomg-related ul{grid-template-columns:1fr}}

/* Amazon cross-sell grid: same links, tighter */
.zn-blog-post .zomg-cross{margin:28px 0;padding:18px 20px;border-radius:var(--zn-radius);background:var(--zn-card);border-color:var(--zn-line)}
.zn-blog-post .zomg-cross h2{font-size:1.1rem;margin:0 0 4px}
.zn-blog-post .zomg-cross .sub{font-size:.84rem;margin-bottom:12px}
.zn-blog-post .zomg-cross-grid{gap:8px}
.zn-blog-post .zomg-cross-item{padding:10px 12px;background:transparent;border-color:var(--zn-line)}
.zn-blog-post .zomg-cross-item .ti{font-size:.9rem}
.zn-blog-post .zomg-cross-item .bl{font-size:.8rem;margin-bottom:6px}
.zn-blog-post .zomg-cross-item a{font-size:.8rem;padding:4px 10px}

/* "Get it installed": the second Book block, the cta-box and the Duurs card become one band
   with one primary button; the others read as quiet rows */
.zn-blog-post .zn-install{margin:36px 0 8px;padding:20px 20px 6px;border-radius:var(--zn-radius);background:var(--zn-band);border:1px solid var(--zn-line)}
.zn-blog-post .zn-install .zomg-bookblock{margin:0 0 12px;background:linear-gradient(135deg,#0f4f5c,#1a6b7d)}
.zn-blog-post .zn-install .cta-box,html[data-theme="light"] .zn-blog-post .zn-install .cta-box{background:transparent !important;box-shadow:none !important;padding:6px 0 14px;margin:0;text-align:left;border-bottom:1px solid var(--zn-line);border-radius:0}
.zn-blog-post .zn-install .cta-box h3{font-size:.98rem;margin-bottom:2px}
.zn-blog-post .zn-install .cta-box p{font-size:.88rem;margin-bottom:8px}
.zn-blog-post .zn-install .cta-box .btn-gold{background:transparent;color:var(--zn-gold);padding:0;font-size:.9rem}
html[data-theme="light"] .zn-blog-post .zn-install .cta-box .btn-gold{color:#8a6a00}
.zn-blog-post .zn-install .duurs-cta{margin:14px 0 14px;background:transparent;border:0;padding:0;color:inherit !important}
.zn-blog-post .zn-install .duurs-cta *{color:inherit !important}
.zn-blog-post .zn-install .duurs-cta .dc-head{font-size:.95rem}
.zn-blog-post .zn-install .duurs-cta .dc-body{font-size:.88rem;opacity:.85}
.zn-blog-post .zn-install .duurs-cta .duurs-cta-btn{background:transparent;border:1px solid var(--zn-line);padding:8px 14px;font-size:.86rem}
.zn-blog-post .zn-install .duurs-cta .duurs-cta-btn,.zn-blog-post .zn-install .duurs-cta .duurs-cta-btn *{color:inherit !important}
html[data-theme="light"] .zn-blog-post .zn-install .duurs-cta,html[data-theme="light"] .zn-blog-post .zn-install .duurs-cta *{color:var(--zn-ink) !important}

/* the old plain blog footer sits above the app section: a single slim line */
.zn-blog-post article+footer{padding:18px 20px 6px;font-size:.84rem;opacity:.85}
.zn-blog-post article+footer p{margin:0 0 4px}
.zn-blog-post article+footer p[style]{margin-top:4px !important;font-size:.78rem}

/* legacy posts (section > article, no .content) */
.zn-blog-post section>article{max-width:760px;margin:0 auto;line-height:1.78}
.zn-blog-post section>article p{font-size:1.04rem;margin-bottom:18px}
.zn-blog-post section>article h2{margin:44px 0 12px;font-size:1.45rem}

@media(max-width:768px){
  .zn-blog-post .article-hero{padding:36px 0 18px}
  .zn-blog-post .content h2{margin-top:36px}
  .zn-blog-post .zomg-trust{gap:4px 14px;padding:8px 10px}
  .zn-blog-post .zomg-bookblock{padding:14px}
  .zn-blog-post .zomg-bookblock-buttons{width:100%}
  .zn-blog-post .zomg-bookblock a{flex:1;text-align:center}
  .zn-blog-post .amzn-card .zomg-partner-cta{margin:10px 0 0}
  .zn-blog-post .zn-install{padding:16px 16px 4px}
}

/* ======================================================================
   BLOG HUBS (/blog and /blog/topics-*)
   ====================================================================== */
.zn-blog-hub section{margin:40px 0}
.zn-blog-hub .section-title{margin:44px 0 16px}
.zn-blog-hub .section-title h2{font-size:1.35rem}
.zn-blog-hub .post-grid{gap:10px}
.zn-blog-hub .post-card{border-radius:12px;flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
.zn-blog-hub .post-card-vis{height:44px;width:44px;flex:0 0 44px;border-radius:10px;font-size:1.3rem}
.zn-blog-hub .post-card-vis img{width:44px;height:44px;object-fit:cover;border-radius:10px}
.zn-blog-hub .post-card-title{padding:0;font-size:.9rem;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.zn-blog-hub .post-card{min-width:0}
.zn-blog-hub .post-grid,.zn-blog-hub .picks-grid,.zn-blog-hub .tiles-grid{min-width:0}
.zn-blog-hub .post-grid>*,.zn-blog-hub .picks-grid>*,.zn-blog-hub .tiles-grid>*{min-width:0}
.zn-blog-hub details.zn-more{margin-top:12px;border:1px solid var(--zn-line);background:var(--zn-band);padding:0}
.zn-blog-hub details.zn-more summary{padding:14px 48px 14px 18px;font:700 .88rem/1.3 'Montserrat',sans-serif}
.zn-blog-hub details.zn-more .post-grid{padding:4px 12px 14px}
.zn-blog-hub details.zn-more .zn-more-close,.zn-blog-hub details[open].zn-more .zn-more-open{display:none}
.zn-blog-hub details[open].zn-more .zn-more-close{display:inline}
.zn-blog-hub .topics-hero{padding:48px 0 12px}
.zn-blog-hub .topics-hero h1{font-size:clamp(1.7rem,3.6vw,2.4rem)}
@media(max-width:768px){.zn-blog-hub section{margin:28px 0}.zn-blog-hub .section-title{margin:28px 0 12px}}

/* ======================================================================
   SHOP
   ====================================================================== */
.zn-shop section{padding:52px 0}
.zn-shop .hero{padding:56px 0 40px}
.zn-shop .hero h1{font-size:clamp(1.8rem,4vw,2.7rem)}
.zn-shop .hero p.subtitle{font-size:1.05rem;margin-bottom:22px}
.zn-shop .hero-stats{gap:14px;margin-bottom:26px}
.zn-shop .hero-stats .stat{padding:12px 18px;border:1px solid var(--zn-line);border-radius:14px;background:var(--zn-card);min-width:120px}
.zn-shop .hero-stats .stat-num{font-size:1.4rem}
.zn-shop .hero-stats .stat-label{font-size:.78rem}
.zn-shop h2{font-size:clamp(1.3rem,2.6vw,1.8rem)}
.zn-shop .section-sub{margin-bottom:26px;font-size:.98rem}
.zn-shop .service-grid,.zn-shop .product-grid{gap:16px}
.zn-shop .service-card,.zn-shop .product-card{padding:22px 20px;border-radius:var(--zn-radius);text-align:left}
.zn-shop .service-card:hover,.zn-shop .product-card:hover{transform:translateY(-3px)}
.zn-shop .service-card .icon{font-size:1.6rem;margin-bottom:8px}
.zn-shop .service-card h3{font-size:1.02rem}
.zn-shop .service-card p{font-size:.88rem}
.zn-shop .service-card .price{font-size:1.05rem}
.zn-shop .city-grid{gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.zn-shop .city-grid a{padding:9px 12px;font-size:.84rem;border-radius:999px}
.zn-shop .faq-list{max-width:760px}
.zn-shop .faq-q{padding:16px 0;font-size:.98rem}
.zn-shop .faq-a{font-size:.92rem}
.zn-shop .tax-credit{padding:22px}
.zn-shop .bottom-cta{padding:56px 0}
@media(max-width:768px){.zn-shop section{padding:40px 0}.zn-shop .hero{padding:40px 0 30px}.zn-shop .hero-stats .stat{min-width:calc(50% - 7px);padding:10px 12px}}

/* ======================================================================
   PRO (recruiting)
   ====================================================================== */
.zn-pro section{padding:56px 20px}
.zn-pro .hero{min-height:0;padding:72px 20px 48px}
.zn-pro .hero-container{gap:40px}
.zn-pro .hero h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.zn-pro .hero-subtitle{font-size:1.05rem;margin-bottom:24px}
.zn-pro .hero-stats{gap:12px;margin-bottom:28px}
.zn-pro .stat{padding:14px 16px}
.zn-pro .stat-value{font-size:1.4rem}
.zn-pro .section-title{font-size:clamp(1.3rem,2.6vw,1.8rem)}
.zn-pro .section-subtitle{font-size:.98rem;margin-bottom:26px}
.zn-pro .content-grid,.zn-pro .pay-grid,.zn-pro .trades-grid,.zn-pro .regions-grid,.zn-pro .steps-grid{gap:16px}
.zn-pro .content-card,.zn-pro .pay-card{padding:22px 20px;border-radius:var(--zn-radius)}
.zn-pro .content-card h3,.zn-pro .pay-card h3{font-size:1.02rem}
.zn-pro .content-card li,.zn-pro .content-card p,.zn-pro .pay-card p{font-size:.92rem}
.zn-pro .demand-banner,.zn-pro .info-banner{padding:20px 22px}
.zn-pro .cta-bottom{padding:64px 20px}
@media(max-width:768px){.zn-pro section{padding:40px 16px}.zn-pro .hero{padding:48px 16px 32px}}

/* ======================================================================
   DEALS
   ====================================================================== */
.zn-deals .article-hero{padding:56px 0 24px}
.zn-deals .content .container{max-width:860px}
.zn-deals .content h2{font-size:1.45rem;margin:40px 0 12px}
.zn-deals .content p{line-height:1.75}
.zn-deals .zomg-cross-grid{gap:10px}
.zn-deals .zomg-cross-item{padding:12px 14px;background:var(--zn-card);border-color:var(--zn-line)}

/* app section after the content: a little less air so the page does not run on */
.zn .zapp{padding-top:48px;padding-bottom:48px}

/* the post template closes .container right after the FAQ, so the keep-reading, cross-sell and
   install blocks sit directly in section.content: keep them in the article column */
.zn-blog-post .content>:not(.container){max-width:720px;margin-left:auto;margin-right:auto;box-sizing:border-box}
@media(max-width:800px){.zn-blog-post .content>:not(.container){margin-left:16px;margin-right:16px}}