/* =========================================================
 * AI Homepage Builder — Frontend Styles (Refactored)
 * - Removes duplicate rules
 * - Fixes Latest Posts card alignment (CSS grid + clamps)
 * - Polishes Latest Posts CTA to look like a button
 * - Keeps Astra/Elementor-safe overrides (scoped to .ahb-* sections)
 * ======================================================= */

/* =========================
   HERO / GLOBAL SECTIONS
   ========================= */

.ahb-hero-section { text-align: center; }

/* Lead magnet background */
.ahb-lead-magnet-section {
  background: linear-gradient(135deg, #f5f9ff, #eef7ff);
}

/* Round hero image corners */
.ahb-hero-section .wp-block-image img { border-radius: 12px; }

/* Remove big top gap on hero blocks */
.wp-block-group.ahb-hero-section { margin-top: 0 !important; }

/* Remove big top gap on hub + subhub hero blocks */
.wp-block-group.ahb-hero-split{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hero heading + text */
.ahb-hero-section h1 {
  font-size: clamp(2.2rem, 3vw, 2.7rem);
  line-height: 1.2;
}
.ahb-hero-section p.has-medium-font-size {
  font-size: 1rem;
  max-width: 540px;
}

/* About tagline */
.ahb-about-tagline {
  font-size: 0.95rem;
  margin-top: 4px;
  margin-bottom: 14px;
}
.ahb-about-tagline a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   QUICKSTART BAR
   ========================= */

.ahb-quickstart-bar {
  margin-top: -10px;
  border-top: 1px solid rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
.ahb-quickstart-bar .ahb-quickstart-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.ahb-quickstart-bar .ahb-quickstart-pill .wp-block-button__link {
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 1.05rem;
  font-weight: 600;
}
.ahb-quickstart-bar .wp-block-buttons { flex-wrap: wrap; }

/* =========================
   STICKY MOBILE CTA BAR
   ========================= */

.ahb-sticky-mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: #0f63d8;
  color: #fff;
  display: none;
  z-index: 999;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.18);
}
.ahb-sticky-mobile-cta.is-visible {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ahb-sticky-mobile-cta a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.ahb-sticky-mobile-cta__close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  margin-left: 12px;
  padding: 0;
  cursor: pointer;
}
@media (min-width: 783px) {
  .ahb-sticky-mobile-cta { display: none !important; }
}

/* =========================
   TRUST ROW
   ========================= */

.ahb-trust-row {
  border-top: 1px solid rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  background: #ffffff;
}
.ahb-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  font-size: 0.85rem;
  margin: 0;
  padding-left: 0;
}
.ahb-trust-list li { list-style: none; }
.ahb-trust-list li::before {
  content: "✓ ";
  color: #15803d;
  font-weight: 600;
}
@media (max-width: 600px) {
  .ahb-trust-list { justify-content: flex-start; }
}

/* =========================
   BASE CARD LAYOUT (equal height)
   ========================= */

.ahb-featured-topics-section .ahb-silo-card,
.ahb-top-guides-section .ahb-guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make Gutenberg columns stretch each card to equal height */
.ahb-featured-topics-section .wp-block-columns,
.ahb-top-guides-section .wp-block-columns,
.ahb-top-picks-section .wp-block-columns {
  align-items: stretch;
}
/* Each column becomes a flex container so the card can fill it */
.ahb-featured-topics-section .wp-block-column,
.ahb-top-guides-section .wp-block-column,
.ahb-top-picks-section .wp-block-column {
  display: flex;
}

/* Core cards should behave like full-height flex columns */
.ahb-silo-card,
.ahb-guide-card,
.ahb-top-picks-section .ahb-top-pick-card,
.ahb-aff-card,
.ahb-latest-card,
.ahb-nextstep-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push common CTA rows to bottom */
.ahb-guide-card .wp-block-buttons,
.ahb-top-picks-section .ahb-top-pick-link-wrap,
.ahb-aff-card__cta,
.ahb-latest-card__more,
.ahb-nextstep-card .wp-block-buttons {
  margin-top: auto;
}

/* =========================
   TOPIC CARDS (Featured topics)
   ========================= */

.ahb-silo-card {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  text-align: left;
}
.ahb-silo-card .ahb-topic-icon img {
  max-width: 100%;
  border-radius: 999px;
  margin-bottom: 12px;
}
.ahb-silo-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.ahb-silo-card p { font-size: 0.95rem; }

/* Make entire topic card clickable (if you output .ahb-topic-card-link) */
.ahb-silo-card a.ahb-topic-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.ahb-silo-card a.ahb-topic-card-link:hover { text-decoration: none; }

/* =========================
   TOP GUIDES (cards + thumbs + CTA)
   Supports:
   - old 3-column columns layout
   - Query Loop layout
   ========================= */

.ahb-guide-card {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  gap: 12px;
}
.ahb-guide-card h3 { margin: 0; }
.ahb-guide-card p { margin: 0; }

/* Old "3 columns" mode */
.ahb-top-guides-section .wp-block-columns { align-items: stretch; }
.ahb-top-guides-section .wp-block-column { display:flex; }
.ahb-top-guides-section .wp-block-column > .wp-block-group.ahb-guide-card { flex: 1; }

/* Query Loop mode grid */
.ahb-top-guides-section .wp-block-query.ahb-top-guides-query .wp-block-post-template.ahb-top-guides-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:24px;
  list-style:none;
  padding:0;
  margin:24px 0 0;
}
.ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post{
  display:flex;
  flex:1 1 calc(33.333% - 24px);
}
.ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post > .ahb-guide-card{ flex:1; }
@media (max-width: 900px){
  .ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post{ flex:1 1 calc(50% - 24px); }
}
@media (max-width: 600px){
  .ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post{ flex:1 1 100%; }
}

/* Thumbnails — enforce a consistent 220px for attention */
.ahb-guide-card__thumb,
.ahb-top-guides-section .ahb-guide-card figure.wp-block-post-featured-image{
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 12px 0 !important;
  display: block !important;
  background: #f1f5f9;
}
.ahb-guide-card__thumb > a,
.ahb-top-guides-section .ahb-guide-card figure.wp-block-post-featured-image > a{
  display:block;
  width:100%;
  height:100%;
}
.ahb-guide-card__image,
.ahb-top-guides-section .ahb-guide-card figure.wp-block-post-featured-image img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}
.ahb-guide-card__thumb--placeholder{
  width:100%;
  height:220px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
}

/* Make read-more look like a button (theme-safe) */
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more,
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more__link,
.ahb-top-guides-section .ahb-guide-card a.wp-block-read-more,
.ahb-top-guides-section .ahb-guide-card .wp-block-post-excerpt__more-link,
.ahb-guide-card .ahb-guide-card__more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--wp--preset--color--primary, #0b5fff);
  color: #fff !important;
  text-decoration: none !important;
}
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more:hover,
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more__link:hover,
.ahb-top-guides-section .ahb-guide-card a.wp-block-read-more:hover,
.ahb-top-guides-section .ahb-guide-card .wp-block-post-excerpt__more-link:hover,
.ahb-guide-card .ahb-guide-card__more a:hover {
  filter: brightness(0.95);
}

/* =========================
   TOP PICKS (homepage strip)
   ========================= */

.ahb-top-picks-section .ahb-top-pick-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  padding: 16px;
}
.ahb-top-picks-section .ahb-top-pick-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
}
.ahb-top-picks-section .ahb-top-pick-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}
.ahb-top-picks-section .ahb-top-pick-link {
  font-size: 0.9rem;
  font-weight: 600;
}

/* =========================
   LATEST ARTICLES (Latest Posts cards)
   Fixes alignment: CSS grid + clamps + button CTA
   ========================= */

.ahb-latest-posts-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
@media (max-width: 1024px){
  .ahb-latest-posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .ahb-latest-posts-grid{ grid-template-columns: 1fr; }
}

.ahb-latest-card{
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  padding: 16px;

  /* neutralize old flex sizing if any legacy CSS exists */
  flex: initial !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box;
}

.ahb-latest-card__thumb{
  height: 220px;
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
}
.ahb-latest-card__thumb > a{
  display:block;
  width:100%;
  height:100%;
}
.ahb-latest-card__image{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit: cover;
  object-position: center;
}

.ahb-latest-card__title{
  font-size: 1rem;
  margin: 0 0 6px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}
.ahb-latest-card__excerpt{
  font-size: 0.9rem;
  margin-bottom: 10px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.1em;
}

/* CTA polish: render the "View details" link as a button.
   Supports both:
   - <a class="ahb-latest-card__more">
   - <p class="ahb-latest-card__more"><a ...></a></p>
*/
a.ahb-latest-card__more,
.ahb-latest-card__more a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;

  border: 1px solid rgba(0,0,0,.08);
  background: var(--wp--preset--color--primary, #0b5fff);
  color: #fff !important;

  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
a.ahb-latest-card__more:hover,
.ahb-latest-card__more a:hover{
  filter: brightness(0.95);
  text-decoration: none !important;
}
a.ahb-latest-card__more:focus,
.ahb-latest-card__more a:focus{
  outline: 2px solid rgba(11,95,255,0.35);
  outline-offset: 2px;
}

/* Astra underline/shadow kill-switch inside AHB card sections */
body .ahb-latest-posts-section .ahb-latest-posts-grid a,
body .ahb-top-guides-section a,
body .ahb-top-picks-section a{
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
body .ahb-latest-posts-section .ahb-latest-posts-grid a:hover,
body .ahb-top-guides-section a:hover,
body .ahb-top-picks-section a:hover{
  opacity: 0.92;
}

/* =========================
   NEXT STEP THUMBNAILS
   ========================= */

.ahb-card-thumb {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 12px 0;
  background: rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ahb-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ahb-card-thumb--fallback {
  height: 220px;
  color: rgba(17,24,39,0.55);
}
.ahb-card-thumb--fallback .ahb-fallback-icon {
  width: 62px;
  height: 62px;
}
.ahb-nextstep-card h3 { margin-top: 0; }

/* =========================
   STARTER GUIDES GRID (reuses latest grid spacing)
   ========================= */

.ahb-starter-guides-grid { margin-top: 16px; row-gap: 32px; }

.ahb-starter-badge {
  display: inline-block;
  margin: 8px 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef2ff;
  color: #3730a3;
}

/* =========================
   AFFILIATE PRODUCTS STRIP (Top 3)
   ========================= */

.ahb-aff-products-section {
  padding: 40px 0;
  background: #f8fafc;
}
.ahb-aff-products-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.ahb-aff-products-heading {
  text-align: center;
  font-size: 2rem;
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}
.ahb-aff-products-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #ff9900;
}

.ahb-aff-products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}

/* Card */
.ahb-aff-card {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  padding: 16px 18px;
  text-align: center;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .ahb-aff-card { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 700px) {
  .ahb-aff-card { flex: 0 0 100%; max-width: 100%; }
}

/* Thumb: fixed height, centered image (no stretching) */
.ahb-aff-card__thumb {
  height: 240px;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ahb-aff-card__thumb a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.ahb-aff-card__thumb img.ahb-aff-card__image {
  display: block;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Badge */
.ahb-aff-card__badge {
  display: inline-block;
  margin: 6px 0 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef2ff;
  color: #3730a3;
}

/* Predictable content heights */
.ahb-aff-card__title {
  font-size: 1.1rem;
  margin: 8px 0 6px;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}
.ahb-aff-card__spec {
  margin: 4px 0 8px;
  font-size: 0.95rem;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
}
.ahb-aff-card__desc {
  font-size: 0.9rem;
  margin: 0 0 12px;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.1em;
}

/* CTA pinned to bottom */
.ahb-aff-card__cta {
  margin-top: auto;
  padding-top: 10px;
}
.ahb-aff-card__button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ff9900;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.ahb-aff-card__button:hover { filter: brightness(0.96); }

/* Micro-trust note */
.ahb-aff-products-note {
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 14px;
}

/* =========================================================
 * Phase 3 — freshness signals, FAQ accordions, TL;DR,
 * comparison table, related-siblings cards.
 * ======================================================= */

.ahb-last-updated {
  margin: 6px 0 14px;
  font-size: 13px;
  color: #6b7280;
}
.ahb-last-updated time { font-variant-numeric: tabular-nums; }

.ahb-ftc-disclosure {
  margin: 8px 0 16px;
  padding: 8px 12px;
  border-left: 3px solid #facc15;
  background: #fffbeb;
  color: #713f12;
  font-size: 13px;
  border-radius: 4px;
}
.ahb-ftc-disclosure a { color: inherit; text-decoration: underline; }

.ahb-tldr {
  margin: 18px 0 24px;
  padding: 16px 18px;
  border-left: 4px solid #2271b1;
  background: #f0f6ff;
  border-radius: 6px;
}
.ahb-tldr h2 {
  margin: 0 0 6px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
}
.ahb-tldr p { margin: 0; }

.ahb-faq-accordion .wp-block-details {
  margin: 6px 0;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: #fff;
  transition: box-shadow .15s ease;
}
.ahb-faq-accordion .wp-block-details[open] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ahb-faq-accordion .wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.ahb-faq-accordion .wp-block-details summary::-webkit-details-marker { display: none; }
.ahb-faq-accordion .wp-block-details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  color: #2271b1;
  transition: transform .15s ease;
}
.ahb-faq-accordion .wp-block-details[open] summary::after {
  content: '–';
}

/* Comparison table */
.ahb-comparison-table-wrap {
  margin: 24px 0;
  scroll-margin-top: 80px;
}
.ahb-comparison-table-wrap .ahb-comparison-table__intro {
  margin: 0 0 12px;
  font-size: 14px;
  color: #50575e;
}
.ahb-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ahb-comparison-table caption {
  caption-side: bottom;
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
  text-align: left;
}
.ahb-comparison-table th,
.ahb-comparison-table td {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.ahb-comparison-table thead th {
  background: #f6f7f7;
  font-weight: 600;
  color: #1d2327;
}
.ahb-comparison-table__product { min-width: 180px; }
.ahb-comparison-table__thumb img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 6px;
}
.ahb-comparison-table__name a {
  font-weight: 600;
  text-decoration: none;
}
.ahb-comparison-table__cta .button {
  display: inline-block;
  padding: 8px 12px;
  background: #2271b1;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ahb-comparison-table thead { display: none; }
  .ahb-comparison-table tbody tr {
    display: block;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
  }
  .ahb-comparison-table td {
    display: block;
    border: 0;
    padding: 4px 0;
  }
  .ahb-comparison-table td::before {
    content: attr(data-label) " ";
    font-weight: 600;
    color: #6b7280;
  }
}

/* Related-siblings cards */
.ahb-related-siblings {
  margin: 32px 0;
}
.ahb-related-siblings__heading {
  margin: 0 0 12px;
}
.ahb-related-siblings__card {
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  background: #fff;
  height: 100%;
}
.ahb-related-siblings__title a { text-decoration: none; }
.ahb-related-siblings__excerpt {
  margin: 6px 0 0;
  font-size: 13px;
  color: #50575e;
}

/* =========================================================
 * Phase 4 — byline, author box, methodology panel.
 * Lead-magnet styles live inline within the wp:html block.
 * ======================================================= */

.ahb-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ahb-byline__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f4f6;
  display: block;
}
.ahb-byline__body { min-width: 0; }
.ahb-byline__name {
  margin: 0;
  font-size: 14px;
  color: #1f2937;
}
.ahb-byline__updated {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.ahb-author-box {
  margin: 28px 0;
  padding: 18px 22px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #f9fafb;
}
.ahb-author-box h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.ahb-author-box__avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  float: left;
  margin: 0 16px 8px 0;
  background: #f3f4f6;
}
.ahb-author-box__intro { margin: 0 0 6px; }
.ahb-author-box__bio   { margin: 0 0 10px; color: #1f2937; font-size: 14px; }
.ahb-author-box__credentials {
  margin: 8px 0 6px 18px;
  padding: 0;
  color: #374151;
  font-size: 13px;
}
.ahb-author-box__website { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 640px) {
  .ahb-author-box__avatar img { float: none; display: block; margin: 0 0 10px; }
}

.ahb-methodology {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
  border-radius: 6px;
  scroll-margin-top: 80px;
}
.ahb-methodology h2 { margin: 0 0 8px; font-size: 20px; }
.ahb-methodology__criteria {
  margin: 8px 0 0 18px;
  font-size: 14px;
  color: #1f2937;
}
.ahb-methodology__effort {
  margin: 10px 0 0;
  font-size: 13px;
  color: #4b5563;
}

/* =====================================================================
   PHASE 5 VISUAL POLISH PASS
   --------------------------------------------------------------------
   Design tokens, hover treatments, section backgrounds, heading accents,
   authority-block icons, accordion polish, comparison-table polish,
   lead-magnet polish, typography rhythm.
   All rules live at the END of the file so the cascade lets them
   override earlier hardcoded values. New components should target the
   tokens below rather than hardcoding their own.
   ===================================================================== */

:root {
  /* Corner radii */
  --ahb-radius-card:   14px;
  --ahb-radius-pill:   999px;
  --ahb-radius-thumb:  12px;
  --ahb-radius-button: 8px;

  /* Shadows */
  --ahb-shadow-card:        0 6px 18px rgba(0, 0, 0, 0.06);
  --ahb-shadow-card-hover:  0 10px 28px rgba(0, 0, 0, 0.10);
  --ahb-shadow-inset:       0 1px 0 rgba(255, 255, 255, 0.4) inset;

  /* Section background palette */
  --ahb-bg-base:   #ffffff;
  --ahb-bg-soft:   #f7f9fc;
  --ahb-bg-accent: #f0f4fa;

  /* Accent palette — semantic. The orange is reserved for "this is
     commercial / convert here" (Top Picks, comparison table, primary
     CTAs). The secondary blue is for navigation / informational UI
     (TOC active state, FAQ accordion toggle, author byline link).
     Green and amber are reserved for trust and warning signaling. */
  --ahb-accent-color:      #ff9900;  /* commercial / primary */
  --ahb-accent-color-rgb:  255, 153, 0;
  --ahb-accent-secondary:  #0b5fff;  /* navigation / info */
  --ahb-accent-success:    #15803d;  /* trust ✓ etc. */
  --ahb-accent-warning:    #b45309;  /* mistakes / warnings */
}

/* =====================================================
   Card radii + hover treatment
   ===================================================== */
.ahb-nextstep-card,
.ahb-guide-card,
.ahb-silo-card,
.ahb-aff-card,
.ahb-latest-card,
.ahb-top-pick-card {
  border-radius: var(--ahb-radius-card);
  box-shadow: var(--ahb-shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ahb-nextstep-card:hover,
.ahb-guide-card:hover,
.ahb-silo-card:hover,
.ahb-latest-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ahb-shadow-card-hover);
}
/* Affiliate cards: keep CTAs stable (no lift) so the click target
   doesn't shift under the cursor; just deepen the shadow. */
.ahb-aff-card:hover {
  box-shadow: var(--ahb-shadow-card-hover);
}

.ahb-card-thumb,
.ahb-card-thumb--fallback {
  border-radius: var(--ahb-radius-thumb);
}

/* =====================================================
   Section background tints — targeted via existing
   block-level classes rather than wrapper additions.
   ===================================================== */
.ahb-aff-products-section,
.ahb-aff-products-section--quick {
  background: var(--ahb-bg-accent);
  padding: 56px 16px;
  border-radius: var(--ahb-radius-card);
  margin: 32px 0;
}
.ahb-methodology {
  background: var(--ahb-bg-soft);
  padding: 32px 24px;
  border-radius: var(--ahb-radius-card);
  margin: 32px 0;
}
.ahb-authority-blocks {
  background: var(--ahb-bg-base);
  padding: 48px 16px;
}
.ahb-faq-accordion,
.wp-block-group.ahb-faq-accordion {
  background: var(--ahb-bg-soft);
  padding: 40px 16px;
  border-radius: var(--ahb-radius-card);
  margin: 32px 0;
}
.ahb-lead-magnet-section {
  background: var(--ahb-bg-accent);
}

@media (max-width: 700px) {
  .ahb-aff-products-section,
  .ahb-aff-products-section--quick,
  .ahb-authority-blocks,
  .ahb-faq-accordion {
    padding: 40px 12px;
  }
}

/* =====================================================
   Section heading accents
   ----------------------------------------------------
   Round 2 fix: replaced the previous over-specific
   selector chain. Now matches ANY h2 inside an
   .ahb-section wrapper, plus the existing block-class
   patterns from Round 1 as a safety net for sections that
   never wear the .ahb-section class. The :not()
   exclusions skip headings that already have their own
   icon-circle treatment (authority headings) or are part
   of a structurally-specific layout (Top Picks heading).
   ===================================================== */
.ahb-section h2:not(.ahb-authority-heading),
.ahb-aff-products-section > .ahb-aff-products-inner > .ahb-aff-products-heading,
.ahb-methodology > h2,
.ahb-faq-accordion > h2,
.ahb-faq-accordion > .wp-block-group__inner-container > h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  text-align: center;
  margin: 0 0 32px;
  position: relative;
  padding-bottom: 16px;
}
.ahb-section h2:not(.ahb-authority-heading)::after,
.ahb-aff-products-section > .ahb-aff-products-inner > .ahb-aff-products-heading::after,
.ahb-methodology > h2::after,
.ahb-faq-accordion > h2::after,
.ahb-faq-accordion > .wp-block-group__inner-container > h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  border-radius: var(--ahb-radius-pill);
  background: var(--ahb-accent-color);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* =====================================================
   Authority block icon-circle headings
   ----------------------------------------------------
   PHP renders <h2 class="ahb-authority-heading
   ahb-authority-heading--<kind>">. Each variant gets its
   own inline-SVG icon so the system is asset-free and
   survives plugin uninstall (CSS stays in uploads/).
   ===================================================== */
.ahb-authority-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  margin: 40px 0 20px;
  text-align: center;
}
.ahb-authority-heading::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: var(--ahb-radius-pill);
  background-color: var(--ahb-accent-color);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  flex-shrink: 0;
}
.ahb-authority-heading--key-terms::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M4 4h16v4H4zm0 6h16v4H4zm0 6h10v4H4z'/></svg>");
}
.ahb-authority-heading--checklist::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
}
.ahb-authority-heading--mistakes::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2L1 21h22L12 2zm0 4l9 15H3L12 6zm-1 5v5h2v-5h-2zm0 6v2h2v-2h-2z'/></svg>");
}
.ahb-authority-heading--protips::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 21h6v-1H9v1zm3-19a7 7 0 00-4 12.7V18h8v-3.3A7 7 0 0012 2z'/></svg>");
}
.ahb-authority-heading--methodology::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 11H7v6h2v-6zm4-2h-2v8h2V9zm4-4h-2v12h2V5zM5 19h14v2H5v-2z'/></svg>");
}

/* =====================================================
   Quick Checklist — custom checkboxes
   ----------------------------------------------------
   Targets ul.ahb-quick-checklist emitted by
   render_authority_blocks's list_block helper.
   ===================================================== */
.ahb-quick-checklist {
  list-style: none;
  padding-left: 0;
  max-width: 720px;
  margin: 0 auto;
}
.ahb-quick-checklist li {
  position: relative;
  padding: 14px 12px 14px 48px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 1rem;
  line-height: 1.55;
}
.ahb-quick-checklist li:last-child {
  border-bottom: none;
}
.ahb-quick-checklist li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 2px solid var(--ahb-accent-color);
  border-radius: 6px;
  background: #ffffff;
  box-sizing: border-box;
}
.ahb-quick-checklist li::after {
  content: '';
  position: absolute;
  left: 18px;
  top: calc(50% - 4px);
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--ahb-accent-color);
  border-bottom: 2px solid var(--ahb-accent-color);
  transform: rotate(-45deg);
}

/* Common Mistakes & Pro Tips — keep bullets but soften list spacing
   and align with the checklist's max-width for visual rhythm. */
.ahb-common-mistakes,
.ahb-pro-tips {
  max-width: 720px;
  margin: 0 auto 24px;
  padding-left: 1.25em;
}
.ahb-common-mistakes li,
.ahb-pro-tips li {
  padding: 6px 0;
  line-height: 1.55;
}

/* =====================================================
   TL;DR callout (subhub Phase 3)
   ===================================================== */
.ahb-tldr {
  background: linear-gradient(135deg, #fff8e6 0%, #fff3d0 100%);
  border-left: 4px solid var(--ahb-accent-color);
  border-radius: var(--ahb-radius-card);
  padding: 22px 26px;
  margin: 0 0 32px;
  box-shadow: var(--ahb-shadow-card);
  position: relative;
}
.ahb-tldr::before {
  content: 'TL;DR';
  display: inline-block;
  background: var(--ahb-accent-color);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--ahb-radius-pill);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.ahb-tldr p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* =====================================================
   FAQ accordion polish (wp:details inside .ahb-faq-accordion)
   ----------------------------------------------------
   Static + hub FAQs use plain h3+p; only the subhub
   accordion path goes through this selector chain.
   ===================================================== */
.ahb-faq-accordion details.wp-block-details {
  background: var(--ahb-bg-base);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--ahb-radius-card);
  margin: 0 0 12px;
  padding: 0;
  box-shadow: var(--ahb-shadow-card);
  transition: box-shadow 0.15s ease;
}
.ahb-faq-accordion details.wp-block-details[open] {
  box-shadow: var(--ahb-shadow-card-hover);
}
.ahb-faq-accordion details.wp-block-details summary {
  padding: 16px 52px 16px 20px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.ahb-faq-accordion details.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.ahb-faq-accordion details.wp-block-details summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ahb-accent-secondary);
  transition: transform 0.2s ease;
}
.ahb-faq-accordion details.wp-block-details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.ahb-faq-accordion details.wp-block-details > *:not(summary) {
  padding: 0 20px 16px;
}

/* =====================================================
   Comparison table polish (hub-only, commercial)
   ----------------------------------------------------
   The renderer doesn't emit data-label on each <td> yet;
   the mobile fallback below uses scope=row patterns that
   keep the table readable without per-cell labels.
   ===================================================== */
.ahb-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: var(--ahb-radius-card);
  overflow: hidden;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-comparison-table thead th {
  background: var(--ahb-accent-color);
  color: #ffffff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.ahb-comparison-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.ahb-comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.ahb-comparison-table tbody tr:nth-child(even) {
  background: var(--ahb-bg-soft);
}
.ahb-comparison-table tbody tr:hover {
  background: var(--ahb-bg-accent);
}
.ahb-comparison-table tbody td:first-child {
  font-weight: 600;
}
.ahb-comparison-table .ahb-comparison-image {
  width: 60px;
  height: 60px;
  border-radius: var(--ahb-radius-button);
  object-fit: cover;
}
.ahb-comparison-table .ahb-comparison-cta a {
  display: inline-block;
  padding: 8px 16px;
  background: var(--ahb-accent-color);
  color: #ffffff !important;
  border-radius: var(--ahb-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: filter 0.15s ease;
}
.ahb-comparison-table .ahb-comparison-cta a:hover {
  filter: brightness(0.95);
}
@media (max-width: 700px) {
  .ahb-comparison-table thead { display: none; }
  .ahb-comparison-table tr {
    display: block;
    margin-bottom: 12px;
    border-radius: var(--ahb-radius-card);
    box-shadow: var(--ahb-shadow-card);
    background: #ffffff;
  }
  .ahb-comparison-table td {
    display: block;
    border: none !important;
    padding: 10px 14px;
  }
  .ahb-comparison-table td:first-child {
    border-top-left-radius: var(--ahb-radius-card);
    border-top-right-radius: var(--ahb-radius-card);
    background: var(--ahb-bg-soft);
  }
}

/* =====================================================
   Lead-magnet polish
   ----------------------------------------------------
   The renderer emits inline-styled markup with classes
   .ahb-lead-magnet (form wrapper), .ahb-lead-magnet__form,
   .ahb-lead-magnet__input, .ahb-lead-magnet__cta. The
   rules below override the inline styles via specificity.
   ===================================================== */
.ahb-lead-magnet {
  background: #ffffff;
  border-radius: var(--ahb-radius-card);
  padding: 32px 28px;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: var(--ahb-shadow-card);
  text-align: center;
}
.ahb-lead-magnet h3,
.ahb-lead-magnet__headline {
  font-size: 1.4rem;
  margin: 0 0 12px;
}
.ahb-lead-magnet__promise {
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 20px;
}
.ahb-lead-magnet__form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}
.ahb-lead-magnet__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--ahb-radius-pill);
  font-size: 1rem;
}
.ahb-lead-magnet__input:focus {
  outline: 2px solid var(--ahb-accent-color);
  outline-offset: 0;
  border-color: transparent;
}
.ahb-lead-magnet__cta {
  padding: 12px 24px;
  background: var(--ahb-accent-color);
  color: #ffffff;
  border: none;
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.ahb-lead-magnet__cta:hover {
  filter: brightness(0.95);
}
.ahb-lead-magnet__status {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.5);
  margin: 14px 0 0;
}
@media (max-width: 600px) {
  .ahb-lead-magnet__form { flex-direction: column; }
  .ahb-lead-magnet__cta { width: 100%; }
}

/* =====================================================
   Typography rhythm
   ----------------------------------------------------
   Tightens vertical spacing inside AHB-rendered groups
   so the page reads with consistent cadence regardless
   of which AI copy variation was rendered.
   ===================================================== */
.ahb-authority-blocks p,
.ahb-authority-blocks ul,
.ahb-authority-blocks ol,
.ahb-aff-products-section p,
.ahb-methodology p,
.ahb-faq-accordion p {
  margin-bottom: 16px;
}
.ahb-authority-blocks p:last-child,
.ahb-aff-products-section p:last-child,
.ahb-methodology p:last-child,
.ahb-faq-accordion p:last-child {
  margin-bottom: 0;
}

/* =====================================================================
   PHASE 5 VISUAL POLISH ROUND 2
   --------------------------------------------------------------------
   Builds on Round 1. Same token-driven approach: thumbnail aspect-ratio
   lock, Quick Start pill refinement, Pro Tips two-column, Key Terms
   semantic dl polish, author byline, meta strip. Trust row and sticky
   TOC are deferred to a separate pass (see PHASE_NOTES).
   ===================================================================== */

/* Enforce 16:10 on every card thumbnail across the system. The earlier
   fixed-height rules (220px) are overridden here so cards line up
   across rows regardless of featured-image dimensions. */
.ahb-card-thumb,
.ahb-card-thumb--fallback,
.ahb-nextstep-card .ahb-card-thumb,
.ahb-guide-card__thumb,
.ahb-latest-card__thumb {
  aspect-ratio: 16 / 10;
  height: auto !important;
  width: 100%;
  overflow: hidden;
  border-radius: var(--ahb-radius-thumb);
}
.ahb-card-thumb img,
.ahb-card-thumb__image,
.ahb-latest-card__image,
.ahb-guide-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =====================================================
   Quick Start pills — subtle chips instead of solid CTAs
   ----------------------------------------------------
   Round 2: the Quick Start bar used to render as a row
   of solid blue buttons, competing visually with the
   hero's primary CTAs. Now they read as filter-style
   chips: white-on-border by default, tinted on hover.
   ===================================================== */
.ahb-quickstart-bar {
  background: var(--ahb-bg-soft);
  padding: 32px 16px;
  text-align: center;
}
.ahb-quickstart-label {
  font-size: 0.85rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 16px !important;
}
.ahb-quickstart-label::after { display: none; }

.ahb-quickstart-bar .wp-block-buttons {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.ahb-quickstart-bar .wp-block-button.ahb-quickstart-pill .wp-block-button__link,
.ahb-quickstart-bar .wp-block-button .wp-block-button__link {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--ahb-radius-pill);
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  box-shadow: none;
}
.ahb-quickstart-bar .wp-block-button .wp-block-button__link:hover {
  background: var(--ahb-accent-color);
  border-color: var(--ahb-accent-color);
  color: #ffffff !important;
}

/* =====================================================
   Key Terms semantic <dl> polish
   ----------------------------------------------------
   PHP already emits <dl class="ahb-key-terms"> in
   render_authority_blocks. Round 2 makes it read as a
   proper glossary: stacked on mobile, two-column with
   accent border on desktop.
   ===================================================== */
.ahb-key-terms {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--ahb-radius-card);
  padding: 4px 0;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-key-terms dt {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 16px 24px 6px;
  color: var(--ahb-accent-color);
  margin: 0;
}
.ahb-key-terms dd {
  margin: 0;
  padding: 0 24px 16px;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.55;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.ahb-key-terms dd:last-child {
  border-bottom: none;
}
@media (min-width: 768px) {
  .ahb-key-terms {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    padding: 0;
  }
  .ahb-key-terms dt {
    padding: 18px 18px 18px 24px;
    text-align: right;
    border-right: 2px solid var(--ahb-accent-color);
    background: rgba(0, 0, 0, 0.015);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .ahb-key-terms dd {
    padding: 18px 24px;
  }
  .ahb-key-terms dt:nth-last-child(2),
  .ahb-key-terms dd:last-child {
    border-bottom: none;
  }
}

/* =====================================================
   Pro Tips two-column + lightbulb prefix
   ----------------------------------------------------
   Round 2: when the Pro Tips list runs long it visually
   collapses into a wall of bullets. CSS multi-column
   keeps each tip self-contained while halving the
   scroll-distance on desktop. The lightbulb prefix
   replaces the default disc bullet so the list reads
   distinctly from other authority lists.
   ===================================================== */
.ahb-pro-tips {
  list-style: none;
  padding: 0;
  max-width: 880px;
  margin: 0 auto;
}
.ahb-pro-tips li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.55;
}
.ahb-pro-tips li::before {
  content: '💡';
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 768px) {
  .ahb-pro-tips {
    column-count: 2;
    column-gap: 32px;
  }
  .ahb-pro-tips li {
    break-inside: avoid;
    margin-bottom: 12px;
  }
}

/* =====================================================
   Author byline (Round 2 PHP addition)
   ===================================================== */
.ahb-author-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 24px;
}
.ahb-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--ahb-radius-pill);
  object-fit: cover;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-author-byline__name {
  font-weight: 600;
  font-size: 0.98rem;
  color: rgba(0, 0, 0, 0.85);
}
.ahb-author-byline__date {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}

/* =====================================================
   Meta strip (Round 2 PHP addition)
   ----------------------------------------------------
   Calendar + reading-time chips rendered above the
   first content section. Icons inherit the accent color.
   ===================================================== */
.ahb-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 24px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}
.ahb-meta-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ahb-meta-strip__item svg {
  color: var(--ahb-accent-color);
  flex-shrink: 0;
}

/* =====================================================================
   PHASE 5 ROUND 4 — Sticky TOC (hub + sub-hub only)
   --------------------------------------------------------------------
   Server-side this is an empty <ol>; assets/js/ahb-toc.js populates it
   from page H2s on DOMContentLoaded. Self-hides when JS isn't present
   OR when the page has fewer than 3 H2s (via the :has(:empty) rule
   below; the JS also sets display:none defensively).
   ===================================================================== */

.ahb-toc-wrap {
  margin: 0 0 32px;
}

/* Self-hide an unpopulated TOC. Modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+ in 2024) support :has(); we use it as a progressive
   enhancement, the JS sets display:none as the actual fallback. */
.ahb-toc-wrap:has(.ahb-toc__list:empty) {
  display: none;
}

.ahb-toc {
  background: var(--ahb-bg-soft);
  border-radius: var(--ahb-radius-card);
  padding: 20px 24px;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-toc__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 12px;
  user-select: none;
}
.ahb-toc__list {
  list-style: decimal;
  list-style-position: outside;
  padding-left: 20px;
  margin: 0;
}
.ahb-toc__list li {
  display: list-item;
  margin: 6px 0;
  line-height: 1.4;
  font-size: 0.92rem;
}
.ahb-toc__list a {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ahb-toc__list a:hover {
  color: var(--ahb-accent-secondary);
  border-bottom-color: var(--ahb-accent-secondary);
}
.ahb-toc__list a.is-active {
  color: var(--ahb-accent-secondary);
  font-weight: 600;
}

/* Desktop: sticky right-rail. The classic float:right + sticky pattern
   lets the surrounding Gutenberg block content wrap naturally to the
   left without any markup restructuring. top:100px keeps clear of WP
   admin bar + a typical theme sticky header — bump up if your theme's
   header is taller (see PHASE_NOTES). */
@media (min-width: 1100px) {
  .ahb-toc-wrap {
    float: right;
    width: 240px;
    margin: 0 0 32px 32px;
    position: sticky;
    top: 100px;
    z-index: 5;
  }
  .ahb-toc {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}
@media (min-width: 1400px) {
  .ahb-toc-wrap {
    width: 280px;
    margin-left: 48px;
  }
}

/* Mobile + tablet: collapsed disclosure. Closed by default; the JS
   toggles .is-open on the title's click / keyboard-Enter. */
@media (max-width: 1099px) {
  .ahb-toc {
    padding: 0;
  }
  .ahb-toc__title {
    cursor: pointer;
    padding: 14px 18px;
    margin: 0;
    position: relative;
    user-select: none;
  }
  .ahb-toc__title::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
  }
  .ahb-toc:not(.is-open) .ahb-toc__list {
    display: none;
  }
  .ahb-toc.is-open .ahb-toc__title::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  .ahb-toc__list {
    padding: 0 24px 16px 40px;
  }
  .ahb-toc__list li {
    margin: 8px 0;
    font-size: 0.95rem;
  }
}

/* Astra coordination: the theme tends to force link underlines and
   sometimes flattens decimal lists. Lock these so the TOC visual is
   the same on every Astra-derived theme variant. !important is
   intentional and narrowly scoped to .ahb-toc__list links/items. */
.ahb-toc__list a {
  text-decoration: none !important;
  box-shadow: none !important;
}
.ahb-toc__list a:hover,
.ahb-toc__list a.is-active {
  text-decoration: none !important;
}

/* Print: drop the TOC entirely so it doesn't waste ink. */
@media print {
  .ahb-toc-wrap {
    display: none !important;
  }
}

/* =====================================================================
   PHASE 5 ROUND 5 — Prose intro section variant
   --------------------------------------------------------------------
   Used by the hub "What you'll get here / How to start" intro and the
   sub-hub "Key highlights / How to choose" intro. Distinct from
   centered authority / Top-Picks sections: prose-heavy reading flows
   left-aligned, so the heading accent underline anchors at the left
   edge instead of being centered under the headline.
   ===================================================================== */
.ahb-section--prose {
  background: var(--ahb-bg-base);
}
.ahb-section--prose h2:not(.ahb-authority-heading) {
  text-align: left;
}
.ahb-section--prose h2:not(.ahb-authority-heading)::after {
  left: 0;
  transform: none;
}
.ahb-section--prose h3 {
  font-size: 1.1rem;
  margin-top: 24px;
  margin-bottom: 8px;
}
.ahb-section--prose ul {
  margin-bottom: 16px;
}

/* Start-Here Next Steps lives on the white base; the heading keeps the
   shared centered-accent treatment. No special rules needed beyond the
   token-default — just declaring the background for clarity. */
.ahb-section--nextsteps {
  background: var(--ahb-bg-base);
}

/* =====================================================================
   PHASE 5 ROUND 7 — Homepage conversion pass
   --------------------------------------------------------------------
   Hero gradient + secondary CTA styling, expanded About block,
   leadmagnet submit button color, fallback form button. The Phase 4
   Lead_Magnet block (with full provider stack) renders itself with its
   own inline styles; the rules here are for the simple-fallback form
   only.
   ===================================================================== */

/* Hero — subtle two-tone gradient + radial accent in upper-right.
   Overrides the existing inline `background-color` via specificity (more
   selectors) without needing !important. */
.ahb-hero-section {
  background: linear-gradient(135deg, var(--ahb-bg-soft) 0%, var(--ahb-bg-accent) 100%);
  position: relative;
  overflow: hidden;
}
.ahb-hero-section > .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
}
.ahb-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(var(--ahb-accent-color-rgb), 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Hero secondary CTA — outlined variant. Gutenberg's
   .is-style-outline does most of the work; we just align the radius +
   weight with the rest of the design tokens. */
.ahb-hero-cta-secondary .wp-block-button__link {
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
  border-width: 2px;
}
.ahb-hero-cta-primary .wp-block-button__link {
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
}

/* Expanded About — avatar + mission + author bio + trust signals.
   Stacked column on mobile, two-column on tablet+. */
.ahb-section--about {
  background: var(--ahb-bg-base);
  padding: 56px 16px;
}
.ahb-about {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.ahb-about__media {
  flex: 0 0 120px;
}
.ahb-about-avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--ahb-radius-pill);
  object-fit: cover;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-about__body {
  flex: 1;
  min-width: 0;
}
.ahb-about__heading {
  font-size: 1.6rem;
  margin: 0 0 12px;
  text-align: left;
  position: relative;
  padding-bottom: 12px;
}
.ahb-about__heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  border-radius: var(--ahb-radius-pill);
  background: var(--ahb-accent-color);
  position: absolute;
  bottom: 0;
  left: 0;
}
.ahb-about__mission {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.ahb-about__author {
  color: rgba(0, 0, 0, 0.75);
  margin: 0 0 16px;
}
.ahb-about__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.ahb-about__trust li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.7);
}
.ahb-about__trust li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ahb-accent-success);
  font-weight: 700;
}
@media (max-width: 700px) {
  .ahb-about {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .ahb-about__heading {
    text-align: center;
  }
  .ahb-about__heading::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .ahb-about__trust {
    text-align: left;
  }
}

/* Fallback simple-form submit button (when Phase 4 Lead_Magnet isn't
   wired up). Recolored from the previous blue WP-button default to the
   commercial-orange accent so the conversion action reads consistently. */
.ahb-leadmagnet-fallback-submit {
  background: var(--ahb-accent-color);
  color: #ffffff;
  border: none;
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
  padding: 10px 22px;
}
.ahb-leadmagnet-fallback-submit:hover {
  filter: brightness(0.95);
}

/* =====================================================================
   HUB 2-COLUMN STICKY RAIL  (content left ~70% / sticky sidebar right)
   --------------------------------------------------------------------
   build_hub_content() wraps everything below the hero in
   .ahb-hub-layout > (.ahb-hub-main + aside.ahb-hub-rail). Single column
   on mobile (rail flows below content, not sticky); a real grid with a
   position:sticky rail from 1024px up. Sticky is pure CSS so it survives
   engine removal; the companion serves this same file from uploads/ahb.
   ===================================================================== */
.ahb-hub-main { min-width: 0; }               /* prevent grid/flex blowout   */
.ahb-hub-rail { min-width: 0; }
.ahb-hub-rail > *:last-child { margin-bottom: 0; }

/* Tighten the under-hero band: meta / disclosure / trust / intro pull
   together at the top of the main column so the rail's TOC + offer card
   sit above the fold beside them. */
.ahb-hub-main > *:first-child { margin-top: 0; }

/* Centered measure: the wrapper carries .alignwide (so Astra lets it break out
   of the narrow content column), but we then cap + center it here so the content
   lifts off the left browser edge, whitespace is balanced both sides, and the
   reading measure tightens. !important overrides Astra's .alignwide width/margins. */
.ahb-hub-layout {
  box-sizing: border-box;
  width: 100%;
  /* Cap at Astra's wide-width (the same var the homepage's alignwide sections use) so
     the hub lines up with the homepage. The element also carries .alignwide, but on a
     stretched content layout Astra resolves that to max-width:none (verified live: the
     container ran the full viewport) — so the cap + centering need !important to win.
     Wide screens get outer breathing room from the auto margins; the 16px floor stops
     edge-glue on tablet/mobile. Want more card width? lower the 24px max toward 16px. */
  max-width: var(--wp--custom--ast-wide-width-size, 1296px) !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 2vw, 24px);
}

@media (min-width: 1024px) {
  .ahb-hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;  /* sidebar kept at 320 (confirmed-good); room comes from the wider container */
    gap: 30px;                 /* content↔sidebar gutter */
    align-items: start;
  }
  /* Keep nested wide/full sections inside the main column — they must not
     break out of the grid track the way they do at .entry-content root. */
  .ahb-hub-main .alignwide,
  .ahb-hub-main .alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ahb-hub-rail {
    position: sticky;
    top: 90px;                 /* clears admin bar + a typical sticky header */
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (min-width: 1400px) {
  /* Keep the (confirmed-good) sidebar at 320px; just a touch more gutter at very
     wide widths. */
  .ahb-hub-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}

/* ---- Baked TOC (now a native <details> so mobile collapse needs no JS) ---- */
.ahb-toc > summary.ahb-toc__title { list-style: none; }
.ahb-toc > summary.ahb-toc__title::-webkit-details-marker { display: none; }
.ahb-toc > summary.ahb-toc__title::marker { content: ""; }

@media (min-width: 1100px) {
  /* Desktop: always expanded, regardless of [open] state; no toggle affordance. */
  details.ahb-toc > .ahb-toc__list { display: block !important; }
  details.ahb-toc > summary.ahb-toc__title { cursor: default; }
  details.ahb-toc > summary.ahb-toc__title::after { display: none !important; }
}
@media (max-width: 1099px) {
  /* Mobile/tablet: native collapse. Override the legacy is-open rule which
     would otherwise keep the list hidden (native uses [open], not .is-open). */
  details.ahb-toc[open] > .ahb-toc__list { display: block !important; }
  details.ahb-toc:not([open]) > .ahb-toc__list { display: none !important; }
  details.ahb-toc > summary.ahb-toc__title { cursor: pointer; position: relative; }
  details.ahb-toc > summary.ahb-toc__title::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
  }
  details.ahb-toc[open] > summary.ahb-toc__title::after {
    transform: translateY(-25%) rotate(-135deg);
  }
}

/* ---- Rail: compact "Top Pick" offer card ---- */
.ahb-rail-offer {
  background: var(--ahb-bg-base);
  border: 1px solid var(--ahb-bg-accent);
  border-radius: var(--ahb-radius-card);
  box-shadow: var(--ahb-shadow-card);
  padding: 18px;
  text-align: center;
  margin: 0 0 24px;
}
.ahb-rail-offer__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ahb-accent-color);
  padding: 4px 10px;
  border-radius: var(--ahb-radius-pill);
  margin: 0 0 12px;
}
.ahb-rail-offer__media { margin: 0 0 12px; }
.ahb-rail-offer__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ahb-radius-thumb);
}
.ahb-rail-offer__prop {
  font-size: 0.95rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ahb-text, #1a1a1a);
  margin: 0 0 14px;
}
.ahb-rail-offer__cta {
  display: block;
  text-align: center;
  text-decoration: none !important;
  box-shadow: var(--ahb-shadow-card);
  background: var(--ahb-accent-color);
  color: #fff !important;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: var(--ahb-radius-button);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.ahb-rail-offer__cta:hover {
  transform: translateY(-1px);
  filter: brightness(0.97);
  box-shadow: var(--ahb-shadow-card-hover);
}
.ahb-rail-offer__disc {
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
  margin: 10px 0 0;
}

/* ---- Rail: related-guides list ---- */
.ahb-rail-related { margin: 0 0 24px; }
.ahb-rail-related__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 10px;
}
.ahb-rail-related__list { list-style: none; margin: 0; padding: 0; }
.ahb-rail-related__list li { margin: 0 0 8px; line-height: 1.4; }
.ahb-rail-related__list a {
  font-size: 0.9rem;
  color: var(--ahb-accent-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.ahb-rail-related__list a:hover { border-bottom-color: var(--ahb-accent-secondary); }

/* =====================================================================
   Callout treatment — Common Mistakes (caution) + Pro Tips (tip)
   Light box: tinted background + accent left-border. Pro-tips keeps its
   existing per-item lightbulb + 2-column layout; this just frames it.
   ===================================================================== */
.ahb-common-mistakes,
.ahb-pro-tips {
  border-radius: var(--ahb-radius-card);
  padding: 18px 20px;
  margin: 16px auto;
}
.ahb-common-mistakes {
  background: rgba(180, 83, 9, 0.06);
  border-left: 4px solid var(--ahb-accent-warning, #b45309);
  list-style: none;
}
.ahb-pro-tips {
  background: rgba(21, 128, 61, 0.06);
  border-left: 4px solid var(--ahb-accent-success, #15803d);
}
.ahb-common-mistakes li { position: relative; padding-left: 26px; margin-bottom: 10px; line-height: 1.55; }
.ahb-common-mistakes li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ahb-accent-warning, #b45309);
}

/* =====================================================================
   Hub "Latest Guides" 3-up polish (scoped to the hub main column so the
   homepage grid is untouched). Equal-height cards with a consistent 4:3
   image and the CTA pinned to the bottom, so the 3-up aligns cleanly at
   the wider measure. Responsive 3→2→1 is inherited from .ahb-latest-posts-grid.
   ===================================================================== */
.ahb-hub-main .ahb-latest-posts-grid {
  gap: 18px;                   /* tighter inter-card gap → reclaims width */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  /* The grid is a <ul.wp-block-post-template>; Astra's .entry-content ul keeps a
     ~20px left padding (list-style is none but the inline padding survives), which
     pushed the cards ~20px past the prose left edge (verified live). Zero it so the
     first card shares one left boundary with the intro copy above. !important beats
     the theme's higher-specificity .entry-content ul rule. */
  padding-inline: 0 !important;
  list-style: none;
}

/* LEFT-ALIGN: kill the constrained-layout centering / block padding that indents the
   Latest-Guides grid ~20px past the prose, so the grid and the prose above it share one
   left boundary inside the main column. */
.ahb-hub-main .ahb-latest-posts-section,
.ahb-hub-main .ahb-hub-seo {
  padding-left: 0;
  padding-right: 0;
}
.ahb-hub-main .ahb-latest-posts-section > *,
.ahb-hub-main .ahb-hub-seo > * {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* FULL-BLEED THUMBNAIL: the image fills the card top edge-to-edge; inner padding lives
   only on the text area below it. The card's overflow:hidden + radius rounds the image's
   TOP corners; its bottom stays square where it meets the text. The featured image is a
   bare <img> inside <figure.ahb-latest-card__thumb> (no __image class), so the cover/fit
   rules target the <img> directly — else the intrinsic square height wins and a card runs taller. */
.ahb-hub-main .ahb-latest-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.ahb-hub-main .ahb-latest-card__thumb {
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}
.ahb-hub-main .ahb-latest-card__thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

/* Text area: padding only below the image; compact rhythm + reserved line heights so
   equal-height cards stay uniform (minimal empty space) with the CTA pinned to the bottom. */
.ahb-hub-main .ahb-latest-card__title {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 6px;
  padding: 14px 16px 0;
  -webkit-line-clamp: 2;
  min-height: 2.6em;
}
.ahb-hub-main .ahb-latest-card__excerpt {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 12px;
  padding: 0 16px;
  -webkit-line-clamp: 2;
  min-height: 2.7em;
}
.ahb-hub-main .ahb-latest-card__more,
.ahb-hub-main a.ahb-latest-card__more {
  margin: auto 16px 16px;      /* top:auto pins to bottom; sides + bottom inset from card edges */
}

/* =====================================================================
   PORTAL (P3) — per-cluster funnel cards on the brand portal. Styled like
   the hub latest-cards: equal-height, full-bleed thumb, padded text, CTA
   pinned. Palette-tokened so it survives engines-off (companion serves this).
   ===================================================================== */
.ahb-portal-cards {
  /* FLEXBOX (not grid): flex centers EVERY row, including a partial last row, so any
     card count stays balanced — 2 centered, 3 across, 4 = 3+1 (the 1 centered), 5 = 3+2
     (the 2 centered) — with no orphaned left-aligned card and no empty trailing column.
     Columns: 1 (mobile) → 2 (tablet) → up to 3 (desktop), capped by the container width. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;            /* equal-height cards within each row */
  gap: 24px;
  margin: 24px auto 0;
  max-width: min(100%, 1040px);    /* 3 × 320 + gaps → caps at 3 across on desktop */
}
.ahb-portal-cards > .ahb-portal-card {
  flex: 0 1 320px;                 /* fixed comfortable width, no grow → an orphan can't blow up to full width */
  max-width: 320px;
}
@media (max-width: 880px) {        /* tablet: exactly 2 across (orphan = 50%, centered) */
  .ahb-portal-cards > .ahb-portal-card { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 560px) {        /* mobile: 1 across */
  .ahb-portal-cards > .ahb-portal-card { flex-basis: 100%; max-width: 100%; }
}
.ahb-portal-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--ahb-card-bg, #fff);
  border: 1px solid var(--ahb-border, #e5e7eb);
  border-radius: var(--ahb-radius-card, 14px);
  box-shadow: var(--ahb-shadow-card, 0 1px 3px rgba(0,0,0,.08));
}
.ahb-portal-card__thumb { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.ahb-portal-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Neutralize WordPress is-layout-flow child margins so the grid gap alone controls
   spacing and cards never drift out of vertical alignment (the is-layout-flow concern). */
.ahb-portal-cards.is-layout-flow > *,
.ahb-portal-cards > .ahb-portal-card { margin-top: 0 !important; margin-bottom: 0 !important; }
.ahb-portal-card > *:first-child { margin-top: 0; }
/* Title CLAMPED to exactly 2 lines (ellipsis) so variable-length titles (e.g. long
   review-post titles that wrap 2–3 lines) occupy a uniform height — the blurb then
   starts on a common baseline in every card across the row. */
.ahb-portal-card__title {
  font-size: 1.05rem; line-height: 1.3; margin: 0; padding: 14px 16px 0;
  box-sizing: border-box;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: calc(2.6em + 14px);   /* 2 text lines (1.3 × 2) + top padding */
}
.ahb-portal-card__title a { text-decoration: none; }
.ahb-portal-card__blurb { font-size: .9rem; line-height: 1.45; color: var(--ahb-text-muted, #555); margin: 8px 0 12px; padding: 0 16px; }
/* CTA pinned to the bottom (margin-top:auto) on EVERY card variant — guide, review,
   and pick — so "Read our review →" etc. sit on a common baseline regardless of title
   or blurb length. (.ahb-portal-card is a full-height flex column via align-items:stretch.) */
.ahb-portal-card__more { margin: auto 16px 16px; font-weight: 600; }
.ahb-portal-card__more a { text-decoration: none; }

/* ---------------------------------------------------------------------------
   LINKS in AHB-composed page content (portal, guides/hubs, sub-hubs, static
   pages, funnels): no default underline; underline on :hover/:focus-visible so
   links stay discoverable + keyboard focus stays visible. Scoped via [class*="ahb-"]
   ancestors so it ONLY touches AHB content — never the theme chrome/nav, WP admin,
   ARE review posts (.are-wrap), or normal posts. Button/CTA-styled links excluded.
   Distinct link COLOR is left to the theme/palette (already present).
   --------------------------------------------------------------------------- */
[class*="ahb-"] a:not(.wp-element-button):not(.wp-block-button__link) {
  text-decoration: none;
}
[class*="ahb-"] a:not(.wp-element-button):not(.wp-block-button__link):hover,
[class*="ahb-"] a:not(.wp-element-button):not(.wp-block-button__link):focus-visible {
  text-decoration: underline;
}

/* Portal hero — a prominent, centered brand banner (no image needed; palette band). */
.ahb-portal-hero {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 40px);
  background: var(--ahb-grad, linear-gradient(135deg, var(--ahb-grad-start, #1e3a8a), var(--ahb-grad-end, #2563eb)));
  color: var(--ahb-on-grad, #fff);
}
.ahb-portal-hero .ahb-cro-hero__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .4em; color: inherit; }
.ahb-portal-hero .ahb-cro-hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 760px; margin: 0 auto 1.2em; opacity: .95; }
/* Portal sections + trust strip */
.ahb-portal-section { margin: clamp(32px, 5vw, 56px) auto; }
.ahb-portal-section > h2 { margin-bottom: .35em; }
/* One-line clarifying microcopy under each grid heading. */
.ahb-portal-section__sub { max-width: 640px; margin: 0 auto 1.1em; color: var(--ahb-text-muted, #555); font-size: .98rem; }
.ahb-portal-trust {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: center;
  margin: clamp(20px, 3vw, 32px) auto; padding: 16px;
  font-weight: 600; color: var(--ahb-text, #1a1a1a);
}
.ahb-portal-trust span { position: relative; padding-left: 22px; }
.ahb-portal-trust span::before { content: "✓"; position: absolute; left: 0; color: var(--ahb-accent-color, #15803d); font-weight: 800; }

/* Portal alternating feature blocks (image + text, left/right). */
.ahb-portal-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  margin: clamp(28px, 5vw, 56px) auto;
}
.ahb-portal-feature--flip .ahb-portal-feature__media { order: 2; }
.ahb-portal-feature__media { margin: 0; }
.ahb-portal-feature__media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: var(--ahb-radius-card, 14px); display: block; }
.ahb-portal-feature__text h2 { margin-top: 0; }
@media (max-width: 782px) {
  .ahb-portal-feature { grid-template-columns: 1fr; }
  .ahb-portal-feature--flip .ahb-portal-feature__media { order: 0; }
}

/* Portal footer columns. */
.ahb-portal-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: clamp(32px, 5vw, 56px) auto clamp(16px, 2vw, 24px);
  padding-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--ahb-border, #e5e7eb);
}
.ahb-portal-footer .ahb-portal-fcol h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin: 0 0 12px; }
.ahb-portal-footer .ahb-portal-fcol ul { list-style: none; margin: 0; padding: 0; }
.ahb-portal-footer .ahb-portal-fcol li { margin: 0 0 8px; }
.ahb-portal-footer .ahb-portal-fcol a { text-decoration: none; }
@media (max-width: 782px) { .ahb-portal-footer { grid-template-columns: 1fr; gap: 20px; } }
.ahb-lead-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px auto; }
.ahb-lead-form input[type=email] { flex: 1 1 240px; max-width: 320px; padding: 10px 14px; border: 1px solid var(--ahb-border, #ccc); border-radius: var(--ahb-radius-button, 8px); }
/* Lead-magnet value bullets (centered, 2-up on wide). */
.ahb-lead-bullets { list-style: none; margin: 12px auto 16px; padding: 0; max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; text-align: left; }
.ahb-lead-bullets li { position: relative; padding-left: 24px; }
.ahb-lead-bullets li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--ahb-accent-color, #15803d); }
@media (max-width: 600px) { .ahb-lead-bullets { grid-template-columns: 1fr; } }
/* Quiz banner — uses the CRO banner band; keep its CTA centered. */
.ahb-portal-quizband { text-align: center; }
/* Portal hero with a background image: ensure enough height + the full scrim padding. */
.ahb-portal-hero.ahb-cro-hero--full { min-height: clamp(320px, 42vh, 460px); }
/* Mobile: keep the portal hero short so the categories grid appears fast (don't let the
   bg image push it down) — headline → subhead → CTA → trust strip → categories. */
@media (max-width: 600px) {
  .ahb-portal-hero.ahb-cro-hero--full { min-height: clamp(240px, 40vh, 300px); }
  .ahb-portal-hero.ahb-cro-hero { padding-top: clamp(20px, 5vw, 32px); padding-bottom: clamp(20px, 5vw, 32px); }
}

/* ---------------------------------------------------------------------------
   FUNNEL template additions (buy-or-leave): real product-image framing in the
   "What is X" section + the final-CTA shot, and the bulleted affiliate banner.
   Synced to uploads/ahb → styled engines-off. Reuses the gradient .ahb-cro-band.
   --------------------------------------------------------------------------- */
/* Real product shot in "What is X" — contained, neutral/white card so a vendor
   shot of any dimension sits cleanly (no crop/clash like the lifestyle photos). */
.ahb-cro-media--product img {
  object-fit: contain;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  max-height: 360px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* Final CTA: "Ready to try X?" with a SMALL product shot beside it. */
.ahb-cro-finalcta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px; max-width: 900px; margin-inline: auto;
}
.ahb-cro-finalcta__media { flex: 0 0 auto; }
.ahb-cro-finalcta__shot { margin: 0; }
.ahb-cro-finalcta__shot img {
  display: block; width: 260px; max-width: 38vw; height: auto;
  background: #fff; border-radius: 14px; padding: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.ahb-cro-finalcta__body { flex: 1 1 360px; min-width: 280px; }
@media (max-width: 600px) { .ahb-cro-finalcta__shot img { width: 200px; max-width: 60vw; } }
/* Affiliate banner bullets centered within the gradient band. */
.ahb-affiliate-banner .ahb-lead-bullets { max-width: 600px; margin: 12px auto 18px; }

/* HIGH-CONTRAST CTA on the solid-blue gradient bands (affiliate banner + lead-magnet):
   the default primary button is the SAME accent colour as the band, so it disappears.
   Force a solid white fill + accent/dark text so it reads clearly and matches the others. */
.ahb-cro-band .ahb-cro-btn-primary .wp-block-button__link,
.ahb-cro-band button.ahb-cro-btn-primary,
.ahb-cro-band .ahb-cro-btn-primary button {
  background: #fff !important;
  color: var(--ahb-accent, #1e3a8a) !important;
  border: 0 !important;
}
.ahb-cro-band .ahb-cro-btn-primary .wp-block-button__link:hover,
.ahb-cro-band button.ahb-cro-btn-primary:hover,
.ahb-cro-band .ahb-cro-btn-primary button:hover {
  background: #eef2ff !important;
  filter: none !important;
}

/* Funnel hero — ~20% shorter than the default full hero (~420px desktop / ~340px mobile),
   keeping bg image + headline + subhead + CTA + benefit bullets + Sponsored line readable.
   Scoped to .ahb-funnel-hero so the portal/guide heroes are unaffected. */
.ahb-funnel-hero.ahb-cro-hero--full { min-height: clamp(360px, 40vh, 420px); }
.ahb-funnel-hero.ahb-cro-hero { padding-top: clamp(16px, 2.4vw, 28px); padding-bottom: clamp(16px, 2.4vw, 28px); }
.ahb-funnel-hero .ahb-cro-hero__inner { padding-top: 0; padding-bottom: 0; }
/* Tighten hero element spacing so headline+subhead+CTA+3 bullets+Sponsored stay compact. */
.ahb-funnel-hero .ahb-cro-hero__title { margin: 0 0 .3em; }
.ahb-funnel-hero .ahb-cro-hero__sub { margin: 0 0 .7em; }
.ahb-funnel-hero .wp-block-buttons { margin-top: 8px; margin-bottom: 0; }
.ahb-funnel-hero .ahb-cro-hero__bullets { margin-top: 10px; }
.ahb-funnel-hero .ahb-cro-hero__disc { margin-top: 8px; margin-bottom: 0; }
@media (max-width: 600px) { .ahb-funnel-hero.ahb-cro-hero--full { min-height: clamp(300px, 52vh, 340px); } }
/* Hero benefit bullets — directly under the hero button, on the scrim (inherit white text). */
.ahb-cro-hero__bullets {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.ahb-cro-hero__bullets li { position: relative; padding-left: 20px; font-weight: 600; font-size: .95rem; }
.ahb-cro-hero__bullets li::before { content: "\2713"; position: absolute; left: 0; opacity: .9; }