/* Quinbis Insights polish — contrast + mobile/tablet alignment
   Applied after all other site/article styles. */

/* ---------- Contrast rules for Insight visuals ---------- */
/* Light green is a quiet surface. Growth Green/Onyx carries the text there;
   Kinetic Lime is reserved for fills/signals, never low-contrast copy. */
.qa-article .visual-pricing{
  background:var(--palette-lime-soft)!important;
  color:var(--green)!important;
  border-color:var(--green)!important;
}
.qa-article .visual-pricing .visual-kicker,
.qa-article .visual-pricing .price-hero span,
.qa-article .visual-pricing .price-hero b{
  color:var(--green)!important;
}
.qa-article .visual-pricing .price-hero>div{
  background:#fff!important;
  color:var(--onyx)!important;
  border:1px solid var(--palette-line)!important;
}
.qa-article .visual-pricing .price-hero>strong{
  background:var(--lime)!important;
  color:#013D37!important;
}

/* Other light Insight surfaces: keep all explanatory copy dark enough. */
.qa-article .visual-structure,
.qa-article .visual-ads,
.qa-article .compare-head,
.qa-article .money-flow .flow-out{
  color:var(--green)!important;
}
.qa-article .visual-structure .visual-kicker,
.qa-article .visual-ads .visual-kicker,
.qa-article .compare-head .visual-kicker,
.qa-article .money-flow .flow-out span,
.qa-article .money-flow .flow-out b,
.qa-article .money-flow .flow-out strong{
  color:var(--green)!important;
}

/* Lime surfaces always use white type, matching the approved site rule. */
.qa-article .weekly-number-list .is-safe,
.qa-article .week-story-bottom.safe,
.qa-article .aftercac-path .done,
.qa-article .three-hero>div:nth-child(3),
.qa-article .three-angle>div:nth-child(3),
.qa-article .messy-ledger b.owner,
.qa-article .fine-poster,
.qa-article .ads-path strong,
.qa-article .flow-hero>div:last-child,
.qa-article .money-waterfall .waterfall-end,
.qa-article .visual-profit,
.qa-article .profit-breakdown .profit-result,
.qa-article .price-hero>strong,
.insight-article-page .hero-equation-safe,
.insight-article-page .example-board-result,
.insight-article-page .article-product-primary{
  color:#fff!important;
}
.qa-article .weekly-number-list .is-safe *,
.qa-article .week-story-bottom.safe *,
.qa-article .aftercac-path .done *,
.qa-article .three-hero>div:nth-child(3) *,
.qa-article .three-angle>div:nth-child(3) *,
.qa-article .fine-poster *,
.qa-article .ads-path strong *,
.qa-article .flow-hero>div:last-child *,
.qa-article .money-waterfall .waterfall-end *,
.qa-article .visual-profit .visual-kicker,
.qa-article .profit-breakdown .profit-result *,
.insight-article-page .hero-equation-safe *,
.insight-article-page .example-board-result *,
.insight-article-page .article-product-primary *{
  color:#fff!important;
}

/* Insight index: light-green cards use the dark brand green for legibility. */
.insights-page .insight-art-two,
.insights-page .growth-insight-card{
  color:var(--green)!important;
}
.insights-page .insight-art-two *,
.insights-page .growth-insight-card .insight-meta{
  color:var(--green)!important;
}

/* ---------- Reading-lane alignment ---------- */
.qa-article .qa-source-note{
  width:var(--shell)!important;
  max-width:1080px!important;
  margin-inline:auto!important;
  padding:0 0 70px!important;
  box-sizing:border-box!important;
}
.qa-article .qa-source-note p{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  gap:12px 22px!important;
  margin:0!important;
}
.qa-article .qa-source-note a{
  display:inline-block!important;
  max-width:100%!important;
  color:var(--ink-64)!important;
  font-size:12px!important;
  line-height:1.55!important;
  overflow-wrap:anywhere!important;
  text-underline-offset:4px!important;
}
.qa-article .qa-source-note a:hover{color:var(--green)!important}

.qa-article .qa-body a,
.qa-article .qa-caption a,
.qa-article .qa-disclaimer a{
  overflow-wrap:anywhere!important;
}

/* Avoid a large empty right side when a section only contains the article body. */
.qa-article .qa-reading-grid.compact-grid{
  max-width:980px!important;
  margin-inline:auto!important;
}

/* Product CTA remains contained and its secondary link stays with the action. */
.qa-article .qa-product-actions{
  gap:12px!important;
}
.qa-article .qa-product-actions>a:not(.btn){
  margin-left:0!important;
  line-height:1.4!important;
}

/* ---------- Tablet ---------- */
@media (min-width:760px) and (max-width:1180px){
  .qa-article .qa-source-note{
    width:var(--shell)!important;
    padding-bottom:54px!important;
  }
  .qa-article .qa-source-note p{gap:10px 18px!important}

  .qa-article .visual-pricing .price-hero{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:30px!important;
  }
  .qa-article .visual-pricing .price-hero>div{
    min-height:105px!important;
    padding:16px!important;
  }
  .qa-article .visual-pricing .price-hero>strong{
    min-height:68px!important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:759px){
  .qa-article .qa-source-note{
    width:var(--shell)!important;
    max-width:500px!important;
    padding:0 0 48px!important;
  }
  .qa-article .qa-source-note>span{margin-bottom:12px!important}
  .qa-article .qa-source-note p{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:9px!important;
  }
  .qa-article .qa-source-note a{
    width:fit-content!important;
    font-size:12.5px!important;
    line-height:1.55!important;
  }

  /* Pricing visual: short readable rows rather than three very tall empty cards. */
  .qa-article .visual-pricing{
    padding:20px!important;
  }
  .qa-article .visual-pricing .price-hero{
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:26px!important;
  }
  .qa-article .visual-pricing .price-hero>div{
    min-height:72px!important;
    padding:15px 16px!important;
    border-radius:16px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
  }
  .qa-article .visual-pricing .price-hero span{
    font-size:13px!important;
    line-height:1.35!important;
  }
  .qa-article .visual-pricing .price-hero b{
    font-size:10px!important;
  }
  .qa-article .visual-pricing .price-hero>strong{
    min-height:66px!important;
    border-radius:16px!important;
    font-size:25px!important;
  }

  .qa-article .qa-caption,
  .qa-article .qa-disclaimer{
    width:100%!important;
    max-width:none!important;
  }

  .qa-article .qa-product-actions{
    width:100%!important;
    align-items:flex-start!important;
  }
}