/* =========================================================================
   Pillar pages (docs/pillar-redesign.md; markup: wp-plugin/payhoa-gable/pillar.php). Loaded after gable.css +
   home2.css + resources2.css, only on the ten pillar pages: the Resources article layout (.rs-read grid, serif prose,
   "On this page", side card) carries most of it. Prefix: pl-. Words come from WordPress as they are; everything here is
   layout. Template blocks are marked data-pl-tpl (tools/seo/pillar-parity.mjs reads the marks).
   ========================================================================= */

/* ---------- hero: the H1, the meta line, the page's opening photo ---------- */
.pl-hero .rs-post-copy { gap: 16px; container: plhero / inline-size; } /* the meta line stacks by the copy column's width, not the viewport's */
/* the crumb's last item is the page's own (long) title: resources2.css caps it at 42ch (~360 px), wider than the hero
   card on a phone, and the crumb row (a flex item of .rs-post-copy) grew to fit it: clipped mid-word by the card, the
   ellipsis out of sight. Keep the row in the column and let the last item shrink to it */
.pl-hero .rs-crumbs { max-width: 100%; }
.pl .rs-crumbs li:last-child { min-width: 0; max-width: 100%; }
.pl .rs-crumbs [aria-current] { max-width: 100%; }
.pl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 15px; color: var(--muted); }
.pl-meta-i { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* icon + label wrap as one (R2-6) */
/* Published, Updated (when a day or more later) and the reading time: when they no longer fit one line they stack, with no dots (a dot ending a line reads as a stray) */
@container plhero (max-width: 300px) { .pl-meta { flex-direction: column; align-items: flex-start; gap: 6px; } .pl-meta .rs-sep { display: none; } }
@container plhero (max-width: 540px) { .pl-meta.has-upd { flex-direction: column; align-items: flex-start; gap: 6px; } .pl-meta.has-upd .rs-sep { display: none; } }
.pl .pl-meta .rs-ico { width: 16px; height: 16px; color: var(--pb-700); }
/* target size (WCAG 2.2 2.5.8, R2-8): the crumb links and the phone "On this page" links were 18 px tall; 24 px+
   hit areas, the line boxes unchanged */
.pl .rs-crumbs a { display: inline-block; padding: 3px 0; margin: -3px 0; }
.pl .rs-toc-m li a { display: block; padding: 2px 0; }
.pl-hero-grid.is-solo { grid-template-columns: minmax(0, 880px); padding-right: 56px; }
.pl-hero-grid.is-solo .rs-h1 { font-size: clamp(36px, 3.6vw, 54px); }
.pl-hero-media { min-width: 0; }
.pl-hero-media .wp-block-image, .pl-hero-media figure { margin: 0; }
.pl-hero-media img { display: block; width: 100%; height: auto; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(34, 86, 211, .1), 0 30px 60px -34px rgba(24, 50, 140, .6); }
.pl .pl-hero-media img { padding: 0; } /* the site's `.wp-block-image img { padding: 25px 0 }` drew white bands inside the hero frame (B3) */
/* WordPress core styles `.wp-block-image .aligncenter` as display: table (shrink-to-fit). Inside it the photo's
   width: 100% has nothing to resolve against until the file arrives, so the figure painted ~90 px wide and the article
   jumped down when the photo loaded (mobile CLS 0.07–0.33, Review B5). A block figure keeps the photo's box from the
   first paint; the loaded layout is unchanged (the photo already filled the column) */
.pl .pl-hero-media figure, .pl .pl-hero-media figure > figcaption { display: block; }
.pl-hero-media figcaption { margin: 14px 4px 0; font-size: 15px; line-height: 1.5; color: var(--body); text-align: left; }

/* ---------- prose ---------- */
/* block-editor sizes typed into the page (style="font-size:28px") give way to the reading scale: resources2.css sets
   the prose h2 with !important, which beats an inline style; h3s get the same */
.gbl .pl-prose h3[style] { font-size: 22px !important; }
.gbl .pl-prose :is(.wp-block-image, figure) { margin: 2em 0; }
.gbl .pl-prose .wp-block-image figure { margin: 0; }
.gbl .pl-prose :is(figure.aligncenter, .aligncenter) { margin-left: auto; margin-right: auto; text-align: center; }
.gbl .pl-prose img { display: inline-block; }
.gbl .pl-prose figcaption, .gbl .pl-prose .wp-element-caption { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.gbl .pl-prose hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--line); }
/* a paragraph that is one <em> and nothing else (pillar.php adds .pl-note; an emphasised phrase inside a sentence stays inline) */
.gbl .pl-prose p.pl-note > em { display: block; padding: 22px 26px; border-radius: 18px; background: var(--bg); font-size: 17.5px; line-height: 1.65; color: var(--body); }
/* "5 Takeaways": the card takes a numbered list too */
.gbl .pl-prose .rs-kt ol { margin: 0; padding-left: 1.4em; }
.gbl .pl-prose .rs-kt ol > li { margin-bottom: .6em; padding-left: .3em; }
.gbl .pl-prose .rs-kt ol > li::marker { color: var(--pb-700); font-weight: 600; }
/* checklists (a check-icon list on the old layout) */
.gbl .pl-prose ul.is-checklist { padding-left: 0; margin-bottom: 1.6em; }
.gbl .pl-prose ul.is-checklist > li { padding: 0 0 0 38px; margin-bottom: .7em; }
.gbl .pl-prose ul.is-checklist > li::before { left: 0; top: .28em; width: 24px; height: 24px; border-radius: 50%; background: var(--pb-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%232256d3' d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: inset 0 0 0 1px var(--pb-100); }
.gbl .pl-prose h3 + ul.is-checklist { margin-top: .9em; }

/* ---------- the review band (P7), after the in-body CTA banner ---------- */
.pl-proof { margin: -0.6em 0 2.4em; }
/* a page with no in-body CTA banner (condo): the band closes the article, after the prose */
.rs-article > .pl-proof { margin: 2.4em 0 0; }
.gbl .pl-prose .pl-proof-in, .pl-proof-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-family: 'Proxima Nova', Verdana, Arial, sans-serif; font-size: 15.5px; line-height: 1.4; color: var(--body); text-align: center; }
.pl-proof-marks { display: inline-flex; align-items: center; gap: 12px; }
.gbl .pl-prose .pl-proof-marks img, .pl-proof-marks img { display: block; width: auto; height: 22px; border-radius: 0; }
.pl-proof-marks img[alt="G2"] { height: 26px; }
.pl-stars { display: inline-flex; gap: 2px; flex: none; }
.pl-stars svg { width: 16px; height: 16px; fill: #fbbf24; }
.pl .pl-rate-t strong { font-weight: 600; color: var(--ink); }
.pl-side-rate { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--pb-100); font-size: 13.5px; line-height: 1.4; color: var(--body); }
.pl-side-rate .pl-stars svg { width: 14px; height: 14px; }

/* ---------- customer quote: resources2.css (shared with posts, 2026-11-05) ---------- */

/* ---------- FAQ (P6): the page's own FAQ section as an accordion, in place ---------- */
.gbl .pl-prose .pl-faq { margin: 1.2em 0 2em; font-family: 'Proxima Nova', Verdana, Arial, sans-serif; }
.gbl .pl-prose .pl-faq-q { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.gbl .pl-prose .pl-faq .gbl-faq-q { font-size: 17.5px; padding: 20px 22px; text-align: left; }
.gbl .pl-prose .pl-faq .gbl-faq-a > div > :first-child { margin-top: 0; }
.gbl .pl-prose .pl-faq .gbl-faq-a p { padding: 0 22px 20px; margin: 0; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 17.5px; line-height: 1.65; color: var(--rs-read); }
.gbl .pl-prose .pl-faq .gbl-faq-a p + p { padding-top: 0; }

/* ---------- related guides + feature pages ---------- */
.gbl-home2 .pl-related.gbl-sec { padding: 80px 0 96px; margin-top: 40px; background: var(--bg); }
.pl-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
/* four guides read as 2 × 2, not four narrow columns whose kickers wrap unevenly (B4 critique) */
.pl-guides:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gbl a.pl-guide { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 24px 52px; border-radius: 20px; background: #fff; box-shadow: var(--rs-card); color: var(--ink); transition: box-shadow .25s, transform .25s var(--ease); }
.gbl a.pl-guide:hover { color: var(--ink); box-shadow: var(--rs-lift); transform: translateY(-2px); }
.pl-guide-t { font-size: 20px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.pl-guide-d { font-size: 15px; line-height: 1.55; color: var(--body); }
.pl .pl-guide .pl-go { position: absolute; left: 24px; bottom: 20px; width: 20px; height: 20px; color: var(--pb-600); transition: transform .2s var(--ease); }
.pl-guide:hover .pl-go { transform: translateX(4px); }
.pl-feats-w { margin-top: 48px; }
.gbl .pl-feats-h { margin: 0 0 16px; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pl-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gbl a.pl-feat { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--rs-card); color: var(--ink); transition: box-shadow .2s; }
.gbl a.pl-feat:hover { color: var(--ink); box-shadow: var(--rs-lift); }
.pl-feat span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-feat b { font-size: 16.5px; font-weight: 600; }
.pl-feat small { font-size: 14px; line-height: 1.4; color: var(--body); }
.pl .pl-feat .pl-go { width: 18px; height: 18px; color: var(--pb-600); transition: transform .2s var(--ease); }
.pl-feat:hover .pl-go { transform: translateX(3px); }
.pl :is(a.pl-guide, a.pl-feat):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .pl-hero-grid.is-solo { padding-right: 40px; }
}
@media (max-width: 1100px) {
  .pl-hero-grid.is-solo { padding: 56px 0 40px; }
  .pl-hero-media { max-width: 640px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .pl-hero-media { max-width: 520px; } /* stacked hero on a tablet: the photo no longer pushes the article below the fold (B4) */
}
@media (max-width: 900px) {
  .pl-feats { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pl-hero-grid.is-solo .rs-h1 { font-size: 34px; }
  .pl-meta { font-size: 14px; }
  .pl-hero-media img { border-radius: 18px; }
  .pl-hero-media figcaption { font-size: 14px; }
  .gbl-home2 .pl-related.gbl-sec { padding: 56px 0 64px; margin-top: 24px; }
  .pl-guides { gap: 14px; }
  .gbl a.pl-guide { padding: 20px 20px 48px; }
  .pl-guide-t { font-size: 18px; }
  .gbl .pl-prose ul.is-checklist > li { padding-left: 34px; }
  .gbl .pl-prose .pl-faq .gbl-faq-q { font-size: 16px; padding: 16px 18px; }
  .gbl .pl-prose .pl-faq .gbl-faq-a p { padding: 0 18px 18px; font-size: 16.5px; }
  .gbl .pl-prose p.pl-note > em { padding: 18px 18px; font-size: 16.5px; }
}
@media (max-width: 600px) {
  .pl-guides, .pl-guides:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .gbl .rs-h1, .pl-hero-grid.is-solo .rs-h1 { font-size: 30px; }
  .pl-proof-marks { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::before, .pl *::after { transition: none !important; animation: none !important; }
}
@media print {
  .pl-related, .pl-proof, .pl-side { display: none !important; }
}

/* ---------- CTA banner, condensed (round 2 lane T, T3) ----------
   promo.php's in-article banner (promo.css, shared with ~95 posts, not edited): 350 px at 1440/1024 and ~600 px on a
   phone. On pillar pages the scene is shown at 0.7 (zoom: the column is 221 = 316 × .7, so the scene lays out at the size
   it was drawn for, and every step and end state is the same) and the copy is tightened. `.pl aside.pmo .pmo-in` outranks
   promo.css's `aside.pmo .pmo-in`. Phone: the one-line description is hidden (it is not in the scene's end state; the
   scene's own text is aria-hidden and `.pmo-sr` still describes it). */
.pl aside.pmo .pmo-in { grid-template-columns: minmax(0, 1fr) 221px; gap: 22px; padding: 18px 22px; border-radius: 20px; }
.pl aside.pmo .pmo-in .pmo-stage { zoom: .7; }
.pl aside.pmo .pmo-in .pmo-k { margin-bottom: 6px; font-size: 12px; }
.pl aside.pmo .pmo-in .pmo-t { margin-bottom: 6px; font-size: 20px; }
.pl aside.pmo .pmo-in .pmo-d { margin-bottom: 12px; font-size: 14.5px; line-height: 1.45; }
.pl aside.pmo .pmo-in .pmo-act { gap: 10px 18px; }
.pl aside.pmo .pmo-in a.pmo-btn { min-height: 44px; }
.pl aside.pmo .pmo-in .pmo-n { margin-top: 8px; font-size: 12.5px; }
@container (max-width: 680px) {
  .pl aside.pmo .pmo-in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 20px 18px; }
  .pl aside.pmo .pmo-in .pmo-t { font-size: 19px; }
  .pl aside.pmo .pmo-in .pmo-d { display: none; }
  .pl aside.pmo .pmo-in .pmo-act { flex-direction: column; align-items: stretch; gap: 14px; }
  .pl aside.pmo .pmo-in a.pmo-more { justify-content: center; }
  .pl aside.pmo .pmo-in .pmo-stage { zoom: .7; height: 244px; }
}

/* A2: a list inside an approved FAQ answer (O14) is a block of its own, indented under the answer's paragraphs */
.gbl .pl-faq-sec .gbl-faq-a ul, .gbl .pl-faq-sec .gbl-faq-a ol { margin: 0; padding: 0 24px 22px 46px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.gbl .pl-faq-sec .gbl-faq-a ul { list-style: disc; }
.gbl .pl-faq-sec .gbl-faq-a ol { list-style: decimal; }
.gbl .pl-faq-sec .gbl-faq-a li + li { margin-top: 6px; }
@media (max-width: 768px) { .gbl .pl-faq-sec .gbl-faq-a ul, .gbl .pl-faq-sec .gbl-faq-a ol { padding: 0 18px 18px 40px; } }