/* Blog articles (/articles/<slug>/) + blog hub (/articles/) in the homepage-S design language (pt1102 phase 2a).
   Loaded only on /articles/ pages, after style.css + home-s.css; every rule is scoped by body.pt-art (set in base.njk),
   so /ideas/ (same seo.njk layout) and all other page types render exactly as before. CSS only: no markup inside <main> changed. */

body.pt-art{--pt-col:42rem;--pt-aside:18.75rem;--pt-r:20px;--pt-r-sm:14px;--pt-soft:#46504A;--pt-top:96px;
  --fern:var(--g);--evergreen:var(--g2);--muted:var(--mute);--paper:var(--cream);--linen:#F4F1EB;--clay:var(--g);--prose:var(--pt-col);
  background:#fff}
body.pt-art:where(:not(.pt-keep)) main{font-size:16px;line-height:1.6}
@media (max-width:620px){body.pt-art{--pt-top:76px}}
/* accent: homepage green; holiday-themed articles keep their theme accent (themes.css --t-acc / --t-eyebrow) */
body.pt-art{--pt-acc:var(--g);--pt-acc-h:var(--g2);--pt-eye:var(--g);--pt-link:var(--g);--pt-ul:var(--gm)}
body.pt-art.th{--pt-acc:var(--t-acc);--pt-acc-h:var(--t-acc-hover);--pt-eye:var(--t-eyebrow);--pt-link:var(--t-acc);--pt-ul:color-mix(in srgb,var(--t-acc) 35%,#fff)}

/* ---------- one gutter: content edges line up with the header logo / search and the footer ---------- */
body.pt-art:where(:not(.pt-keep)) main .wrap{max-width:calc(var(--wrap) + 2 * var(--hs-gut))!important;padding-left:var(--hs-gut)!important;padding-right:var(--hs-gut)!important}
/* right1105: on desktop the tool pages + /guides/<slug>/ hubs (body.pt-keep) use the same wrap, so their sections line up with the header too */
@media (min-width:1001px){body.pt-art.pt-keep main .wrap{max-width:calc(var(--wrap) + 2 * var(--hs-gut))!important;padding-left:var(--hs-gut)!important;padding-right:var(--hs-gut)!important}}
body.pt-art main .glow{display:none}
body.pt-art main h1,body.pt-art main h2{font-family:var(--hs-serif);font-weight:500;letter-spacing:-.018em;color:var(--ink)}
body.pt-art main .eyebrow{color:var(--pt-eye);font-size:12px;font-weight:600;letter-spacing:.14em}
body.pt-art main a{text-decoration-thickness:1px;text-underline-offset:.2em}

/* ---------- buttons: homepage pills ---------- */
body.pt-art:where(:not(.pt-keep)) main .btn{min-height:44px;border-radius:999px;background:var(--pt-acc);border:1.5px solid var(--pt-acc);color:#fff;box-shadow:none;font-weight:600;font-size:15px;letter-spacing:0;transform:none}
body.pt-art:where(:not(.pt-keep)) main .btn:hover{background:var(--pt-acc-h);border-color:var(--pt-acc-h);color:#fff;transform:none;box-shadow:none}
body.pt-art:where(:not(.pt-keep)) main .btn .arr{background:none;color:inherit;width:auto;height:auto}
body.pt-art:where(:not(.pt-keep)) main .btn-outline,body.pt-art:where(:not(.pt-keep)) main a.btn-outline{background:#fff;color:var(--g);border-color:var(--gm)}
body.pt-art:where(:not(.pt-keep)) main .btn-outline:hover{background:var(--gl);color:var(--g2);border-color:var(--gm)}

/* ---------- article hero: white, editorial, crumbs + serif H1 + lede + byline; product image on a soft rounded tile ---------- */
body.pt-art .article-hero{background:#fff!important;border-bottom:0;padding:clamp(28px,4vw,56px) 0 clamp(24px,3vw,40px);overflow:visible}
body.pt-art .article-hero::before,body.pt-art .article-hero::after{display:none!important}
/* hero1108 (Raheim): the hero uses the SAME tracks as .article-body below it (reading column + 1fr aside, same gap), so the
   H1/lede/divider span the reading column and the hero photo fills the aside track edge to edge, lined up with "On this page". */
body.pt-art .article-hero-grid{grid-template-columns:minmax(0,var(--pt-col)) minmax(var(--pt-aside),1fr);justify-content:start;gap:clamp(40px,4vw,56px);align-items:center}
@media (min-width:1280px){body.pt-art .article-hero-grid{--pt-col:46rem;--pt-aside:20rem}}
body.pt-art .article-hero-grid>.hero-product{width:100%;justify-self:stretch}
body.pt-art .article-hero-grid>.hero-pin{justify-self:end;width:min(100%,20rem)}
body.pt-art .article-hero .crumbs ol{font-size:13px;color:var(--mute);margin:0 0 18px;gap:6px}
body.pt-art .article-hero .crumbs li+li::before{content:"/";margin-right:6px;opacity:.45}
body.pt-art .article-hero .crumbs a{color:var(--mute)}
@media (min-width:561px){
  body.pt-art .article-hero .crumbs ol{flex-wrap:nowrap;min-width:0}
  body.pt-art .article-hero .crumbs li{flex:none;white-space:nowrap}
  body.pt-art .article-hero .crumbs li:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
body.pt-art .article-hero .crumbs a:hover{color:var(--g)}
body.pt-art .article-hero h1{font-size:clamp(2.1rem,3.7vw,3.4rem);line-height:1.06;margin:0 0 18px;max-width:none;text-wrap:pretty}
body.pt-art .article-hero .lede{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.55;color:var(--mute);max-width:none;margin:0}
body.pt-art .article-hero .byline{margin-top:24px;padding-top:20px;border-top:1px solid var(--line2);max-width:none;font-size:14px;color:var(--mute)}
body.pt-art .article-hero .byline .meta{font-size:13.5px;color:var(--mute)}
body.pt-art .article-hero .byline strong{color:var(--ink);font-weight:600}
body.pt-art .article-hero .byline a{color:inherit}
body.pt-art .article-hero .byline-author img{box-shadow:0 0 0 1px var(--gm)}
body.pt-art .article-hero .small{font-size:14px;color:var(--mute);margin:14px 0 0}
body.pt-art .article-hero .hero-product{margin:0;border-radius:24px;overflow:hidden;background:var(--cream);box-shadow:none;border:1px solid var(--line2);transform:none}
body.pt-art .article-hero .hero-product img{border-radius:0;box-shadow:none;transform:none;width:100%;height:auto}
body.pt-art .article-hero .hero-pin img{border-radius:18px;box-shadow:none;transform:none;border:1px solid var(--line2)}
body.pt-art .th-kicker{margin:0 0 14px}

/* ---------- body grid: reading column + sticky "On this page" ---------- */
/* gap1105 (Raheim): the tracks are capped, so space-between dumped all spare wrap width (228-308px at 1280-1920) into the
   middle. Now the sidebar sits right after the reading column with a fixed-feel gap; spare width (if any) goes to the right margin. */
/* right1105 (Raheim): the capped aside track (20rem) left 93-168px of empty page margin to the RIGHT of the sidebar at
   1280-1920, so the body row stopped short of the hero row / header edge. The aside track now takes the rest of the row
   (1fr, never under --pt-aside), so the sidebar ends exactly on the wrap's right edge = hero image right edge = header search
   edge, and left/right page margins match. Reading column stays capped (42rem, 46rem from 1280px); gap unchanged. */
body.pt-art .article-body{grid-template-columns:minmax(0,var(--pt-col)) minmax(var(--pt-aside),1fr);justify-content:start;gap:clamp(40px,4vw,56px);padding-top:clamp(16px,2vw,28px)}
@media (min-width:1280px){body.pt-art .article-body{--pt-col:46rem;--pt-aside:20rem}}  /* wider measure + aside floor only inside the two-column grid */
body.pt-art .article-body>div:first-child{min-width:0}

/* prose: comfortable measure (~70ch), calm rhythm */
body.pt-art .prose{max-width:var(--pt-col);font-size:17px;line-height:1.75;color:#2A322E}
body.pt-art .prose p,body.pt-art .prose ul,body.pt-art .prose ol{margin:0 0 1.15em}
body.pt-art .prose h2{font-size:clamp(1.6rem,2.3vw,2.05rem);line-height:1.15;margin:2.1em 0 .6em;scroll-margin-top:var(--pt-top)}
body.pt-art .prose h3{font-family:var(--hs-serif);font-weight:500;font-size:clamp(1.22rem,1.6vw,1.38rem);line-height:1.3;letter-spacing:-.01em;margin:1.8em 0 .45em;scroll-margin-top:var(--pt-top);color:var(--ink)}
body.pt-art .prose strong{color:var(--ink);font-weight:650}
body.pt-art .prose a:not(.btn){color:var(--pt-link);text-decoration-color:var(--pt-ul);text-decoration-thickness:1.5px}
body.pt-art .prose a:not(.btn):hover{color:var(--pt-acc-h);text-decoration-color:currentColor}
body:where(:not(.pt-keep)).pt-art .prose ul,body:where(:not(.pt-keep)).pt-art .prose ol{padding-left:1.4em}
body.pt-art .prose li{margin:.45em 0;padding-left:.2em}
body.pt-art .prose li::marker{color:var(--pt-acc)}
body.pt-art .prose ol>li::marker{font-weight:600;font-variant-numeric:tabular-nums}
body.pt-art .prose blockquote{background:var(--cream);border:1px solid var(--line2);border-left:3px solid var(--g);border-radius:0 var(--pt-r-sm) var(--pt-r-sm) 0;padding:18px 22px;color:var(--ink)}
body.pt-art .prose code{background:var(--linen)}
/* tables: hairline card, quiet header */
body.pt-art:where(:not(.pt-keep)) .prose table{display:table;width:100%;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:none;font-size:15px;line-height:1.55;margin:1.6em 0 1.8em}
body.pt-art:where(:not(.pt-keep)) .prose th{background:var(--cream);color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:13px 16px;border-bottom:1px solid var(--line)}
body.pt-art:where(:not(.pt-keep)) .prose td{padding:13px 16px;border-bottom:1px solid var(--line2);color:#2A322E}
body.pt-art:where(:not(.pt-keep)) .prose td:first-child{font-weight:600;color:var(--ink)}
body.pt-art:where(:not(.pt-keep)) .prose tr:last-child td{border-bottom:0}
/* task lists (legacy checklists) */
body.pt-art .prose li.task{margin-left:-1.4em}

/* ---------- sticky "On this page" ---------- */
body.pt-art .article-aside:not(#_)>.toc{top:var(--pt-top);max-height:calc(100vh - var(--pt-top) - 24px)}
body.pt-art .toc{background:#fff;border:1px solid var(--line);border-radius:var(--pt-r);box-shadow:none;padding:20px 20px 18px;font-size:14px}
body.pt-art .toc>p{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pt-eye)}
body.pt-art .toc ul{border-left:1px solid var(--line);margin:0 0 0 1px}
body.pt-art .toc li{margin:0}
body.pt-art .toc ul a{color:var(--mute);padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;line-height:1.4;text-decoration:none}
body.pt-art .toc ul a:hover{color:var(--ink);border-left-color:var(--pt-acc)}
body.pt-art .toc ul a.is-on{color:var(--ink);border-left-color:var(--pt-acc)}
body.pt-art .toc a.btn{margin-top:16px;font-size:14px;min-height:46px;padding:10px 16px}
body.pt-art .aside-card,body.pt-art .aside-tool{background:var(--cream);border:1px solid var(--line);border-radius:var(--pt-r);box-shadow:none;padding:18px 18px 12px;margin-top:16px}
body.pt-art:where(:not(.pt-keep)) .aside-h{font-size:12px!important;font-weight:600!important;letter-spacing:.14em;text-transform:uppercase;color:var(--pt-eye)!important;margin:0 0 10px!important}
body.pt-art .aside-card .mini,body.pt-art .aside-tool .mini{border-radius:12px;padding:8px;margin:0 -8px}
body.pt-art .aside-card .mini:hover,body.pt-art .aside-tool .mini:hover{background:#fff}
body.pt-art .mini img{border-radius:10px;background:#fff;border:1px solid var(--line2);box-shadow:none}
body.pt-art .mini b{font-weight:600;color:var(--ink)}
body.pt-art .mini small{color:var(--mute)}

/* ---------- in-article product boxes ("The tool for this guide", house ads, holiday offer) ---------- */
body.pt-art .hx-offer,body.pt-art .ha-mid,body.pt-art .ha-top{background:var(--cream);border:1px solid var(--line);border-radius:var(--pt-r);box-shadow:none;padding:16px}
body.pt-art:where(:not(.pt-keep)) .hx-offer,body.pt-art .ha-mid,body.pt-art .ha-top{max-width:var(--pt-col)}
body.pt-art .hx-offer::before{display:none}
body.pt-art .hx-offer-img,body.pt-art .ha-img{border-radius:var(--pt-r-sm);background:#fff;border:1px solid var(--line2)}
body.pt-art .hx-offer .hx-offer-eyebrow,body.pt-art .ha-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--g)}
body.pt-art .hx-offer .hx-offer-eyebrow{color:var(--hx-holly)}
body.pt-art .hx-offer .hx-offer-name,body.pt-art .ha-name{font-family:var(--hs-serif);font-weight:500;font-size:1.3rem;letter-spacing:-.01em;line-height:1.2}
body.pt-art .hx-offer .hx-offer-text,body.pt-art .ha-blurb{color:var(--mute);font-size:14.5px}
body.pt-art:where(:not(.pt-keep)) .hx-offer .hx-offer-actions .btn-buy{background:var(--hx-holly);border-color:var(--hx-holly)}
body.pt-art:where(:not(.pt-keep)) .hx-offer .hx-offer-actions .btn-outline{background:#fff;color:var(--g);border-color:var(--gm)}
body.pt-art .ha-more{color:var(--g);font-weight:600}
body.pt-art .ha-price{font-weight:600}

/* ---------- "Tools for this" / "From our shop" product grids ---------- */
body.pt-art .products{margin-top:56px;padding-top:40px;border-top:1px solid var(--line2)}
body.pt-art .products h2{font-size:clamp(1.6rem,2.3vw,2.05rem);line-height:1.15;margin:.35em 0 .5em!important}
body.pt-art .products .grid-3,body.pt-art .products .cards{gap:16px}
body:where(:not(.pt-keep)).pt-art .product-card{border:1px solid var(--line);border-radius:var(--pt-r);box-shadow:none;background:#fff;overflow:hidden}
body.pt-art .product-card:hover{box-shadow:none;transform:none;border-color:var(--gm)}
body.pt-art .product-card .thumb{border-radius:0;background:var(--cream)}
body.pt-art .product-card h3{font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
body.pt-art .product-card .card-format{color:var(--g)}

/* ---------- FAQ: the homepage accordion (numbered rows on hairlines, the open row becomes a cream card) ---------- */
body.pt-art:where(:not(.pt-keep)) .faq-wrap{margin-top:64px}
body.pt-art:where(:not(.pt-keep)) .faq-wrap h2{font-size:clamp(1.6rem,2.3vw,2.05rem);line-height:1.15;margin:0 0 20px}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq{display:block;margin:0;counter-reset:ptq;interpolate-size:allow-keywords}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details{counter-increment:ptq;margin:0;padding:0;background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;transition:background-color .25s,border-color .25s}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details:last-child{border-bottom:1px solid var(--line)}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details[open]{background:var(--cream);border-color:transparent;border-radius:18px}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details[open]+details{border-top-color:transparent}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details[open]:last-child{border-bottom-color:transparent}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary{display:grid;grid-template-columns:36px minmax(0,1fr) 38px;align-items:center;gap:0 12px;min-height:68px;padding:12px 14px 12px 18px;margin:0;list-style:none;cursor:pointer;border-radius:18px;font-size:16px;font-weight:500;line-height:1.4;color:var(--ink);transition:color .2s}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary::-webkit-details-marker{display:none}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary::marker{content:""}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary::before{content:counter(ptq,decimal-leading-zero);font:500 15px/1 var(--hs-serif);color:var(--g);letter-spacing:.02em}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details summary::after,body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details[open] summary::after{content:"";position:static;justify-self:end;width:38px;height:38px;box-sizing:border-box;border-radius:12px;border:1px solid var(--gm);font-size:0;line-height:0;color:transparent;transform:none;background:linear-gradient(var(--g),var(--g)) center/13px 2px no-repeat,linear-gradient(var(--g),var(--g)) center/2px 13px no-repeat,#fff;transition:background-size .25s ease,background-color .25s,border-color .25s}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details[open] summary::after{background:linear-gradient(#fff,#fff) center/13px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 0 no-repeat,var(--g);border-color:var(--g)}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary:hover{color:var(--g)}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary:hover::after{border-color:var(--g)}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details[open] summary{color:var(--g2)}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary:focus{outline:0}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary:focus-visible{outline:2px solid var(--g);outline-offset:2px}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details p{margin:0;padding:0 64px 22px 66px;font-size:15px;line-height:1.7;color:var(--pt-soft)}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details p a{color:var(--g);font-weight:600}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s ease,content-visibility .3s allow-discrete}
body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details[open]::details-content{block-size:auto}

/* ---------- email sign-up (inline) + legacy free-printable box: cream card like the homepage kit ---------- */
body.pt-art .optin.inline,body.pt-art .lead-magnet{background:var(--cream);border:1px solid var(--line);border-radius:24px;box-shadow:none;margin-top:56px}
body.pt-art:where(:not(:has(article.cmp))) :is(.optin.inline,.lead-magnet){padding:clamp(24px,3.5vw,40px)}
body.pt-art:has(article.cmp) .optin.inline{padding:1.8rem}
@media (min-width:900px){body.pt-art:has(article.cmp) .optin.inline{padding:1.2rem}}
body.pt-art .optin.inline::before,body.pt-art .optin.inline::after{display:none}
body.pt-art .optin.inline h2,body.pt-art .lead-magnet h2{font-size:clamp(1.55rem,2.3vw,2rem);line-height:1.15;margin:.55em 0 .4em}
body.pt-art .optin.inline .lede,body.pt-art .optin.inline .optin-copy>p:not(.chip):not(.small),body.pt-art .lead-magnet>p:not(.chip):not(.small){font-size:16px;line-height:1.6;color:var(--mute)}
body.pt-art .optin .chip,body.pt-art .lead-magnet .chip{box-shadow:none;border-color:var(--line);font-weight:500;font-size:13px}
body.pt-art .optin .chip .dot,body.pt-art .lead-magnet .chip .dot{background:var(--gl);color:var(--g)}
body.pt-art .optin .small,body.pt-art .lead-magnet .small{font-size:13px;color:var(--mute)}

/* ---------- sources + author ---------- */
body.pt-art .sources{border-top:1px solid var(--line2);margin-top:48px;padding-top:24px}
body.pt-art .sources h2{font-size:1.25rem;margin:0 0 10px}
body.pt-art .sources-list{color:var(--mute);font-size:14px}
body.pt-art .sources-list a{color:var(--g)}
body.pt-art .author-bio{background:var(--cream);border:1px solid var(--line);border-radius:var(--pt-r);padding:18px 20px;gap:16px;margin-top:28px}
body.pt-art .author-bio p{color:var(--mute);font-size:14.5px}
body.pt-art .author-bio b a{color:var(--ink)}
body.pt-art .author-bio p a{color:var(--g)}
body.pt-art .author-bio img{box-shadow:0 0 0 1px var(--gm)}

/* ---------- holiday blocks (themed pages keep their palette; shape follows the homepage cards) ---------- */
body.pt-art .th-cta{border-radius:24px;box-shadow:none}
body.pt-art .hx-next{border-top-color:var(--line2);padding-top:24px;margin-top:40px}
body.pt-art .hx-next .hx-next-h{font-weight:600;font-size:12px;color:var(--pt-eye)}
body.pt-art .hx-next ul{gap:10px}
body:where(:not(.pt-keep)).pt-art .hx-next a{border-radius:16px;border-color:var(--line);background:var(--cream);box-shadow:none;padding:14px 16px 14px 18px;transition:border-color .2s,background-color .2s}
body.pt-art .hx-next a:hover{border-color:var(--gm);background:#fff;box-shadow:none}
body.pt-art .hx-next b{font-weight:600}
body.pt-art .hx-next small{font-weight:500;color:var(--mute)}
body.pt-art .supplies-box,body.pt-art .prose .box{border-radius:var(--pt-r);box-shadow:none;background:var(--cream);border:1px solid var(--line)}
body.pt-art .aff-note{font-size:13px;color:var(--mute);background:var(--cream);border:1px solid var(--line2);border-radius:var(--pt-r-sm);padding:10px 14px;margin:0 0 24px;max-width:var(--pt-col)}
body.pt-art .aff-note a{color:inherit}
/* disc1103 (t1232u): the inline affiliate line placed by lib/affnote.js is deliberately quiet: one small italic muted line, no box. #5E6862 on the lightest-to-darkest page grounds (#fff..#F3EEE6) = 5.0-5.8:1, WCAG AA. */
body.pt-art .aff-note[data-aff-disclosure]{font-size:.82rem;font-style:italic;font-weight:400;line-height:1.45;color:var(--mute,#5E6862);background:none;border:0;border-radius:0;padding:0;margin:.25rem 0 .5rem;max-width:none}
body.pt-art .aff-note[data-aff-disclosure] a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:400}

/* ---------- legacy: Pinterest row ---------- */
body.pt-art .pins{margin-top:56px}
body.pt-art .pins h2{font-size:clamp(1.45rem,2vw,1.8rem);margin:0 0 16px}
body.pt-art .pin-row img{border-radius:var(--pt-r-sm);box-shadow:none;border:1px solid var(--line2)}

/* ---------- "Keep exploring" / "More guides" ---------- */
body.pt-art .related{margin-top:clamp(56px,7vw,104px);padding-top:0;padding-bottom:clamp(56px,7vw,96px);border-top:0}
body.pt-art .related .section-head{align-items:end;margin-bottom:28px}
body.pt-art .related .section-head h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;margin:.25em 0 0}
body.pt-art .related .section-head .btn-outline{min-height:44px}
body.pt-art .idea-grid{gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
body.pt-art .idea-card{background:var(--cream);border:1px solid var(--line);border-radius:18px;box-shadow:none;padding:18px 20px 20px;transition:border-color .2s,background-color .2s}
body.pt-art .idea-card:hover{transform:none;box-shadow:none;border-color:var(--gm);background:#fff}
body.pt-art .idea-card small{color:var(--g);font-weight:600;font-size:11.5px;letter-spacing:.14em;margin-bottom:6px}
body.pt-art .idea-card b{font-weight:600;font-size:16px;line-height:1.35;color:var(--ink)}
body.pt-art .related .article-card{border:1px solid var(--line);border-radius:var(--pt-r);box-shadow:none;overflow:hidden}
body.pt-art .related .article-card:hover{transform:none;box-shadow:none;border-color:var(--gm)}
body.pt-art .related .article-card .card-format{color:var(--g)}

/* ---------- mobile sticky "tool for this guide" bar: light, like the homepage header ---------- */
body.pt-art .sticky-buy{background:rgba(255,255,255,.97);color:var(--ink);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(28,36,32,.35)}
body.pt-art .sticky-buy :focus-visible{outline-color:var(--g)}
body.pt-art .gbar .gbar-link{color:var(--ink)}
body.pt-art .gbar .sb-text .gbar-k{color:var(--g)}
body.pt-art .gbar .sb-text small{color:var(--mute)}
body.pt-art .gbar img{border-radius:10px;border:1px solid var(--line2)}
body.pt-art .sticky-buy .sb-btn{background:var(--pt-acc);border-color:var(--pt-acc);color:#fff}
body.pt-art .gbar .sb-text .gbar-k{color:var(--pt-eye)!important}
body.pt-art .sticky-buy .sb-x,body.pt-art .sticky-buy button{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  body.pt-art{--pt-aside:16.5rem}
}
@media (max-width:1000px){
  body.pt-art .idea-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.pt-art .article-body{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  body.pt-art .article-body>div:first-child{max-width:var(--pt-col)}
  body.pt-art .article-hero-grid,body.pt-art .article-hero-grid:has(.hero-pin){grid-template-columns:minmax(0,1fr)}
  body.pt-art .article-hero .hero-product{max-width:28rem}
}
@media (max-width:700px){
  body.pt-art:where(:not(.pt-keep)) .prose table{display:block;width:auto;overflow-x:auto}
}
@media (max-width:560px){
  body.pt-art .article-hero{padding-top:20px}
  body.pt-art .article-hero h1{font-size:2rem;line-height:1.1}
  body.pt-art .prose{font-size:16.5px;line-height:1.72}
  body.pt-art .prose h2{font-size:1.6rem}
  body.pt-art .idea-grid{grid-template-columns:1fr;gap:10px}
  body.pt-art .idea-card{padding:14px 16px 16px}
  body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq summary{grid-template-columns:28px minmax(0,1fr) 38px;gap:0 8px;padding:12px 10px 12px 12px;font-size:15.5px}
  body.pt-art:where(:not(.pt-keep)) .faq-wrap .faq details p{padding:0 14px 20px 48px}
  body.pt-art .hx-offer,body.pt-art .ha-mid{padding:14px}
}
/* sticky bar text: one line each, no 4-line stack on phones */
body.pt-art .gbar .sb-text b,body.pt-art .gbar .sb-text small,body.pt-art .gbar .sb-text .gbar-k{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pt-art .gbar .sb-text .gbar-k{font-size:10.5px;font-weight:600;letter-spacing:.14em}
body.pt-art .sticky-buy .sb-x{border-color:var(--line);color:var(--ink);align-self:center;margin-top:0;margin-right:calc(8px - var(--hs-gut))}
body.pt-art .sticky-buy .sb-x:hover{background:var(--cream)}
/* header at 901-1100px: keep the four menu labels on one line (the shared header wraps "Shop by / goal" at 1024); the search box gives up the width */
@media (min-width:901px) and (max-width:1100px){
  body.pt-art .hs-hdr .hs-dd-b{white-space:nowrap;padding:0 10px}
  body.pt-art .hs-hdr .hs-search{flex:1 1 180px;min-width:0}
}

/* =========================== blog hub /articles/ =========================== */
body.pt-art .blog-hero{background:#fff!important;padding:clamp(28px,4vw,56px) 0 clamp(28px,3.5vw,44px);border:0}
body.pt-art .blog-hero::before,body.pt-art .blog-hero::after{display:none!important}
body.pt-art .blog-hero .crumbs ol{font-size:13px;color:var(--mute);margin:0 0 18px;gap:6px}
body.pt-art .blog-hero .crumbs a{color:var(--mute)}
body.pt-art .blog-hero .crumbs a:hover{color:var(--g)}
body.pt-art .blog-hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:1.05;margin:12px 0 16px;max-width:none}
body.pt-art .blog-hero h1 .accent{font-family:var(--hs-serif);font-weight:500;color:var(--g)}
body.pt-art .blog-hero .lede{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.55;color:var(--mute);max-width:40rem;margin:0}
body.pt-art .blog-hero .lede a{color:var(--g);text-decoration-color:var(--gm)}
/* hub cards: cream / white rounded cards, eyebrow + title, small arrow chip top-right */
body.pt-art:where(:not(.pt-keep)) .blog-hubs{gap:16px;margin-top:0}
body.pt-art:where(:not(.pt-keep)) .blog-hubs+.blog-hubs{margin-top:16px}
body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.pt-art:where(:not(.pt-keep)) .blog-hubs:not(.has-3){grid-template-columns:repeat(5,minmax(0,1fr))}
body.pt-art:where(:not(.pt-keep)) .hub-card{display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:20px 64px 22px 22px;border-radius:var(--pt-r);border:1px solid var(--line);background:#fff;box-shadow:none;transform:none;transition:border-color .2s,background-color .2s}
body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-card{background:var(--cream);padding:24px 72px 26px 26px;min-height:128px}
body.pt-art:where(:not(.pt-keep)) .hub-card:hover{transform:none;box-shadow:none;border-color:var(--gm);background:#fff}
body.pt-art:where(:not(.pt-keep)) .hub-k{color:var(--g);font-size:11.5px;font-weight:600;letter-spacing:.14em}
body.pt-art:where(:not(.pt-keep)) .hub-card b{font-weight:600;font-size:16px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-card b{font-family:var(--hs-serif);font-weight:500;font-size:1.32rem;line-height:1.25;letter-spacing:-.01em}
body.pt-art:where(:not(.pt-keep)) .hub-go:not(#_){top:18px;right:18px;transform:none;width:36px;height:36px;border-radius:12px;background:#fff;border:1px solid var(--gm);color:var(--g);transition:background-color .2s,border-color .2s,color .2s}
body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-go:not(#_){top:22px;right:22px}
body.pt-art:where(:not(.pt-keep)) .hub-go:not(#_)::before{width:14px;height:14px}
body.pt-art:where(:not(.pt-keep)) .hub-card:hover .hub-go:not(#_){transform:none;background:var(--g);border-color:var(--g);color:#fff}
/* filter pills */
body.pt-art .blog-list{padding-top:clamp(40px,5vw,64px)}
body.pt-art .blog-tools{margin-bottom:24px}
body.pt-art .topic{font-weight:500;font-size:14.5px;border-color:var(--line);color:var(--ink);padding:0 18px}
body.pt-art .topic:hover{border-color:var(--g);color:var(--g)}
body.pt-art .topic.is-on,body.pt-art .topic.is-on:hover{background:var(--g);border-color:var(--g);color:#fff}
body.pt-art .blog-count{color:var(--mute);font-size:14px}
/* post cards (same card the homepage "Plain-English guides" row uses) */
body.pt-art .blog-grid{gap:20px}
body.pt-art:where(:not(.pt-keep)) .post-card{border:1px solid var(--line);border-radius:var(--pt-r);box-shadow:none;overflow:hidden;background:#fff;transition:border-color .2s}
body.pt-art:where(:not(.pt-keep)) .post-card:hover{transform:none;box-shadow:none;border-color:var(--gm)}
body.pt-art:where(:not(.pt-keep)) .post-card .thumb{border-radius:0;background:var(--cream)}
body.pt-art:where(:not(.pt-keep)) .post-card .body{padding:16px 18px 20px}
body.pt-art:where(:not(.pt-keep)) .post-card .card-format{background:var(--gl);color:var(--g)}
body.pt-art:where(:not(.pt-keep)) .post-card h3{font-family:var(--sans);font-weight:600;font-size:16.5px;line-height:1.35;letter-spacing:-.01em;margin:0 0 6px}
body.pt-art:where(:not(.pt-keep)) .post-card h3 a{color:var(--ink)}
body.pt-art:where(:not(.pt-keep)) .post-card p{color:var(--mute);font-size:14px;line-height:1.55}
/* about + FAQ copy */
body.pt-art:where(:not(.pt-keep)) .hub-copy{padding-top:clamp(56px,7vw,96px)}
body.pt-art:where(:not(.pt-keep)) .hub-copy .prose h2{margin-top:0}
/* sign-up: the homepage kit card (cream, hairline, no gradient, image upright) */
body.pt-art .hb-signup-wrap .optin{background:var(--cream);border:1px solid var(--line);border-radius:24px;box-shadow:none;align-items:center;gap:clamp(24px,4vw,56px)}
body.pt-art:where(:not(:has(article.cmp))) .hb-signup-wrap .optin{padding:clamp(28px,4vw,48px)}
body.pt-art .hb-signup-wrap .optin::before,body.pt-art .hb-signup-wrap .optin::after{display:none}
body.pt-art .hb-signup-wrap .optin h2{font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.12}
body.pt-art .hb-signup-wrap .optin .lede{font-size:16.5px;line-height:1.6;color:var(--mute)}
body.pt-art .hb-signup-wrap .optin .chip{box-shadow:none;font-weight:500;font-size:13px}
body.pt-art .hb-signup-wrap .optin .chip .dot{background:var(--gl);color:var(--g)}
body.pt-art .hb-signup-wrap .optin-visual{background:var(--gl);border-radius:18px;padding:clamp(20px,3vw,36px)}
body.pt-art .hb-signup-wrap .optin-visual img{transform:rotate(-2deg);box-shadow:0 18px 40px -18px rgba(28,36,32,.35);border-radius:10px;max-width:min(100%,22rem);margin:0 auto}
/* shop band */
body.pt-art .shop-band{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
body.pt-art .shop-band .section-head{align-items:end;margin-bottom:28px}
body.pt-art .shop-band .section-head h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;margin:.25em 0 0}
body.pt-art .shop-band .grid-4{gap:16px}
@media (max-width:1100px){
  body.pt-art:where(:not(.pt-keep)) .blog-hubs:not(.has-3){grid-template-columns:repeat(6,minmax(0,1fr))}
  body.pt-art:where(:not(.pt-keep)) .blog-hubs:not(.has-3) .hub-card{grid-column:span 2}
  body.pt-art:where(:not(.pt-keep)) .blog-hubs:not(.has-3) .hub-card:nth-child(n+4){grid-column:span 3}
}
@media (max-width:1100px){
  body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-card{padding:20px 64px 22px 22px;min-height:0}
  body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-card b{font-family:var(--sans);font-weight:600;font-size:16.5px;line-height:1.35}
  body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-go:not(#_){top:18px;right:18px}
}
@media (max-width:760px){
  body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3,body.pt-art:where(:not(.pt-keep)) .blog-hubs:not(.has-3){grid-template-columns:1fr;gap:10px}
  body.pt-art:where(:not(.pt-keep)) .blog-hubs+.blog-hubs{margin-top:10px}
  body.pt-art:where(:not(.pt-keep)) .blog-hubs:not(.has-3) .hub-card,body.pt-art:where(:not(.pt-keep)) .blog-hubs:not(.has-3) .hub-card:nth-child(n+4){grid-column:auto}
  body.pt-art:where(:not(.pt-keep)) .hub-card,body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-card{padding:14px 60px 16px 16px;gap:4px;justify-content:center;min-height:72px}
  body.pt-art:where(:not(.pt-keep)) .hub-go:not(#_),body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-go:not(#_){top:50%;right:14px;transform:translateY(-50%);width:34px;height:34px;border-radius:11px}
  body.pt-art:where(:not(.pt-keep)) .hub-card:hover .hub-go:not(#_){transform:translateY(-50%)}
  body.pt-art:where(:not(.pt-keep)) .hub-card b,body.pt-art:where(:not(.pt-keep)) .blog-hubs.has-3 .hub-card b{font-size:15.5px}
}
body.pt-art.th main .btn-outline{color:var(--ink);border-color:var(--line)}
body.pt-art.th main .btn-outline:hover{background:var(--cream);color:var(--ink);border-color:var(--ink)}
@media (max-width:820px),(pointer:coarse){body.pt-art .ha-more{display:inline-flex;align-items:center;min-height:44px;margin:-10.5px 0}}
/* legacy "More guides" on phones: compact rows (pin thumb left, title right) instead of three full-screen pin cards */
@media (max-width:700px){
  body.pt-art .related .grid-3{gap:10px}
  body.pt-art .related .article-card{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center}
  body.pt-art .related .article-card .thumb{height:100%;min-height:112px;aspect-ratio:auto;border-radius:0}
  body.pt-art .related .article-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
  body.pt-art .related .article-card .body{padding:12px 16px}
  body.pt-art .related .article-card h3{font-size:15.5px;line-height:1.35;margin:4px 0 0}
}
/* kpstyle: seo.njk comparison under /articles/ loads articles.css only - same hero grid as ideas.css (660.8 + 256 at 1024) */
@media (min-width:1001px){body.pt-art .article-hero-grid.seo-hero-grid,body.pt-art .article-hero-grid.cmp-hero-grid{grid-template-columns:minmax(0,var(--pt-col)) minmax(var(--pt-aside),1fr);gap:clamp(40px,4vw,56px)}}
@media (max-width:1000px){body.pt-art .article-hero-grid.seo-hero-grid,body.pt-art .article-hero-grid.cmp-hero-grid{grid-template-columns:minmax(0,1fr)}}
/* hubs1104: /hubs/<slug>/ topic hubs (src/hubs/hub.njk) - article reading design, single hero column */
body.pt-art .topic-hub .hub-meta{color:var(--mute);margin:0}
body.pt-art .topic-hub .hub-kids,body.pt-art .topic-hub .hub-group,body.pt-art .topic-hub .hub-context,body.pt-art .topic-hub .hub-related,body.pt-art .topic-hub .hub-faq{margin-top:clamp(28px,3.5vw,44px)}
body.pt-art .topic-hub .hub-kids h2{margin:0 0 16px}
/* hubs-gap1105: /hubs/ index has no aside/answer block, so the stacked hero bottom padding + body padding-top + group margin made a ~130px void; one normal section gap instead */
body.pt-art .topic-hub.hub-index .article-hero{padding-bottom:0}
body.pt-art .topic-hub.hub-index .article-body{padding-top:0}
body.pt-art .topic-hub.hub-index .hub-group:first-child{margin-top:clamp(24px,3vw,40px)}
body.pt-art .topic-hub.hub-index .hub-group:first-child h2{margin-top:0}
body.pt-art .topic-hub .hub-list{list-style:none;padding:0;margin:0}
body.pt-art .topic-hub .hub-list li{padding:12px 0;border-top:1px solid var(--line);margin:0}
body.pt-art .topic-hub .hub-list li:first-child{border-top:0}
body.pt-art .topic-hub .hub-list a{font-weight:600}
body.pt-art .topic-hub .hub-d{display:block;color:var(--mute);font-size:.92em;line-height:1.45;margin-top:2px}
body.pt-art .topic-hub .hub-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--g);border:1px solid currentColor;border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px}
body.pt-art .topic-hub .hub-n{font-weight:400;color:var(--mute);font-size:.7em}
body.pt-art .topic-hub .lead-magnet{margin-top:clamp(28px,3.5vw,44px)}

/* ---------- right1105 (Raheim 4:25 AM CT): every section shares the header's left AND right edge ----------
   Before: copy blocks under the tool grids / hub grids sat in a centred 42-50rem column and the boxes in it (sign-up, offer,
   embed, "More free tools", tables) were centred at 50rem, so both edges jumped inward from the full-width grids above/below.
   Now: boxes, tables and grids span the whole wrap (= header edges); running text starts on the same left edge and keeps a
   comfortable measure (46rem, like the article reading column). Desktop only (>=1001px): phones/tablets unchanged. */
@media (min-width:1001px){
body.pt-art main .wrap.prose>*,body.pt-art main .wrap>.prose,body.pt-art main .wrap.hub-copy>.faq-wrap{margin-left:0!important;margin-right:0!important}
body.pt-art main .wrap.prose.calc-copy>:not(.wide,.card-grid,.grid-3,.grid-4),body.pt-art main .wrap.hub-copy>:is(.prose,.faq-wrap){max-width:min(46rem,100%)}
body.pt-art main .wrap.prose>:is(.tl-cta,.tl-optin,.tl-embed,.tl-other,.tl-scroll,table,.optin,.hb-signup-wrap,.hx-offer,.section-head,.wide,.card-grid,.grid-3,.grid-4,.policy-summary,.license-grid),
body.pt-art main .wrap.prose.calc-copy>:is(.tl-cta,.tl-optin,.tl-embed,.tl-other,.tl-scroll,table,.optin,.hb-signup-wrap,.hx-offer){max-width:none!important;width:100%}
body.pt-art main .wrap.prose>table,body.pt-art main .tl-scroll>table{width:100%}
/* text inside the now full-width boxes keeps the reading measure */
body.pt-art main :is(.tl-optin,.tl-embed)>:is(h2,p,form,.eo-wrap,.capture-form,.btn-row),body.pt-art main .tl-cta>div{max-width:46rem}
body.pt-art main .wrap.prose>.policy-summary{padding-right:max(22px,calc(100% - 42rem))}
}
@media (min-width:1001px){
/* offer pages: the "Why I made this" card spans the wrap like the cards above/below it (its text keeps the measure) */
body.pt-sale main .of-why{max-width:none}
body.pt-sale main .of-why>div{max-width:46rem}
}
/* stepbadge_20261112: numbered step cards keep their own left gutter; the generic .prose li reset (padding-left:.2em) was sliding text under the badge */
body.pt-art .prose .steps-light li,body.pt-keep .prose .steps-light li{padding-left:3.6rem;min-height:3.2rem}
body.pt-art .prose .steps-light li::before,body.pt-keep .prose .steps-light li::before{left:1rem}