/* Quinbis Insights Reading System V3.0
   Readability-first fixes for all Insight articles and the Insights index.
   Preserves article-specific editorial visuals while standardising reading rhythm. */

/* Remove the old decorative article-index rhythm from related cards. */
.qa-next-card h3,
.article-next-card h3{margin-top:0!important}
.qa-next-card b,
.article-next-card b{margin-top:20px!important}

/* Keep article-specific hero surfaces intact instead of letting the generic soft tint flatten them. */
.qa-article .visual-structure,
.qa-article .visual-aftercac,
.qa-article .visual-ads,
.qa-article .visual-growth,
.qa-article .visual-pricing{background:var(--green)!important;color:#fff!important}
.qa-article .visual-structure .visual-kicker,
.qa-article .visual-aftercac .visual-kicker,
.qa-article .visual-ads .visual-kicker,
.qa-article .visual-growth .visual-kicker,
.qa-article .visual-pricing .visual-kicker{color:var(--lime)!important}
.qa-article .visual-split{background:linear-gradient(90deg,#f1f2ee 0 49.8%,var(--green) 50.2% 100%)!important}
.qa-article .visual-three,
.qa-article .visual-flow{background:#fff!important}
.qa-article .visual-trust{background:#f0f2ec!important}
.qa-article .visual-profit{background:var(--lime)!important;color:#013D37!important}

/* Light inset notes inside dark green sections must read like light cards, not white type on pale green. */
.qa-article .qa-section.dark .qa-note.dark-note{
  background:#fff!important;
  border-left-color:var(--lime)!important;
  color:var(--onyx)!important;
}
.qa-article .qa-section.dark .qa-note.dark-note>span{color:var(--green)!important}
.qa-article .qa-section.dark .qa-note.dark-note p{color:var(--onyx)!important}

/* Small editorial labels need a deliberate pause before the headline. */
.qa-article .qa-side-head>span,
.qa-article .qa-section-head>span,
.qa-article .qa-next-head>span,
.insight-article-page .article-next-head>span{margin-bottom:12px!important}
.qa-article .qa-side-head h2,
.qa-article .qa-section-head h2,
.qa-article .qa-next-head h2,
.insight-article-page .article-next-head h2{margin-top:0!important}

/* Index: category is enough metadata. The cards no longer depend on a second number item. */
.insights-page .insight-meta{gap:0!important}
.insights-page .insight-card-read{
  display:inline-flex!important;
  width:max-content!important;
  margin-top:20px!important;
  gap:7px!important;
  font-weight:700!important;
}
.insights-page .featured-insight-read{margin-top:22px!important}
.insights-page .growth-readiness div{justify-content:flex-start!important}

@media (max-width:680px){
  /* The core bug: some elements were both .shell and width:100%, which cancelled the mobile gutter. */
  .qa-article .shell,
  .insight-article-page .shell{
    width:min(500px,calc(100vw - 40px))!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }
  .qa-article .shell.qa-reading-grid,
  .qa-article .shell.qa-two-col,
  .insight-article-page .shell.article-reading-grid,
  .insight-article-page .shell.article-split{
    width:min(500px,calc(100vw - 40px))!important;
    max-width:500px!important;
  }

  /* Reading copy remains left aligned even when the surrounding section is visually centred. */
  .qa-article .qa-body,
  .qa-article .qa-side-head{text-align:left!important}
  .qa-article .qa-side-head{margin-inline:0!important;max-width:100%!important}
  .qa-article .qa-side-head h2{margin-inline:0!important;max-width:100%!important}
  .qa-article .qa-body p{max-width:100%!important}

  /* Compact, readable opening paragraphs. */
  .qa-article .qa-opening{padding-top:50px!important}
  .qa-article .qa-body .qa-lead{font-size:20px!important;line-height:1.5!important}
  .qa-article .qa-body p{font-size:16px!important;line-height:1.68!important}
  .qa-article .qa-body .qa-emphasis{font-size:21px!important;line-height:1.42!important}

  /* Contained split sections: enough padding without squeezing the copy. */
  .qa-article .qa-two-col{padding:22px!important;gap:20px!important}
  .qa-article .qa-side-head>span{margin-bottom:11px!important}
  .qa-article .qa-section-head>span{margin-bottom:13px!important}
  .qa-article .qa-side-head h2{font-size:31px!important;line-height:1.08!important}
  .qa-article .qa-section-head h2{line-height:1.06!important}

  /* Related reading should feel like an action card, not an archive index. */
  .qa-article .qa-next-card,
  .insight-article-page .article-next-card{
    min-height:0!important;
    padding:24px!important;
  }
  .qa-article .qa-next-card h3,
  .insight-article-page .article-next-card h3{
    margin:0!important;
    font-size:29px!important;
    line-height:1.08!important;
  }
  .qa-article .qa-next-card b,
  .insight-article-page .article-next-card b{
    margin-top:18px!important;
    color:var(--green)!important;
    font-size:13px!important;
    line-height:1.35!important;
  }

  /* How to Stop Mixing...: make the boundary visual compact and immediately legible. */
  .qa-article .visual-split{
    background:var(--palette-lime-soft)!important;
    min-height:0!important;
  }
  .qa-article .visual-split .split-hero{
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:28px!important;
  }
  .qa-article .visual-split .split-hero>div{
    min-height:112px!important;
    padding:18px!important;
    border-radius:18px!important;
    justify-content:center!important;
    border:1px solid var(--palette-line)!important;
  }
  .qa-article .visual-split .split-hero>div:first-child{background:#fff!important;color:var(--onyx)!important}
  .qa-article .visual-split .split-hero>div:last-child{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
  .qa-article .visual-split .split-hero>span{transform:none!important;font-size:20px!important;line-height:1!important}
  .qa-article .visual-split .split-hero strong{margin-top:8px!important;font-size:27px!important}

  /* CAC / ads / growth / pricing hero diagrams rely on their dark-green canvas for contrast. */
  .qa-article .visual-aftercac,
  .qa-article .visual-ads,
  .qa-article .visual-growth,
  .qa-article .visual-pricing{background:var(--green)!important}
  .qa-article .visual-ads>p{color:rgba(255,255,255,.78)!important;line-height:1.55!important}

  /* Growth radar: contain labels inside the visual instead of letting them hang near edges. */
  .qa-article .growth-radar{width:250px!important;height:250px!important;margin-top:38px!important}
  .qa-article .growth-radar span{font-size:9px!important}
  .qa-article .growth-radar span:nth-child(1){top:8px!important;left:92px!important}
  .qa-article .growth-radar span:nth-child(2){right:4px!important;top:74px!important}
  .qa-article .growth-radar span:nth-child(3){right:22px!important;bottom:22px!important}
  .qa-article .growth-radar span:nth-child(4){left:20px!important;bottom:26px!important}
  .qa-article .growth-radar span:nth-child(5){left:2px!important;top:76px!important}

  /* Main Insights page: preserve card identities, simply improve the copy/action rhythm. */
  .insights-page .insight-card-body,
  .insights-page .trust-card-copy,
  .insights-page .insight-wide-copy,
  .insights-page .growth-insight-copy{text-align:left!important}
  .insights-page .insight-card-read{margin-top:18px!important;font-size:13px!important}
  .insights-page .growth-readiness{gap:8px!important}
  .insights-page .growth-readiness div{
    min-height:52px!important;
    padding:12px 14px!important;
    justify-content:flex-start!important;
  }
}

@media (max-width:420px){
  .qa-article .shell,
  .insight-article-page .shell,
  .qa-article .shell.qa-reading-grid,
  .qa-article .shell.qa-two-col{
    width:calc(100vw - 40px)!important;
  }
}

@media (max-width:680px){
  .qa-article .qa-source-note,
  .insight-article-page .qa-source-note{
    width:min(500px,calc(100vw - 40px))!important;
    max-width:500px!important;
    margin-inline:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
  .qa-article .qa-source-note p,
  .insight-article-page .qa-source-note p{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:9px!important;
  }
  .qa-article .qa-source-note a,
  .insight-article-page .qa-source-note a{
    width:auto!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}

/* Decorative archive number removed from the growth card. */
.insights-page .growth-insight-card::after{content:none!important;display:none!important}

/* White result card inside the dark ad-readiness section keeps dark explanatory copy. */
.qa-article .qa-section.dark .ad-check-result p{color:var(--ink-56)!important}


/* Insight 03: balanced Business Name vs Company comparison. */
.qa-article .visual-structure{
  background:var(--green)!important;
  color:#fff!important;
}
.qa-article .visual-structure .structure-hero-choice{
  margin-top:38px;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.qa-article .visual-structure .structure-hero-choice>div{
  min-height:205px;
  padding:24px;
  border-radius:22px;
  background:#fff!important;
  color:var(--onyx)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.qa-article .visual-structure .structure-hero-choice>div:last-child{
  background:#fff!important;
  color:var(--onyx)!important;
  border-color:rgba(255,255,255,.55)!important;
}
.qa-article .visual-structure .structure-hero-choice small{
  color:var(--green)!important;
  font-size:9px;
  line-height:1.2;
}
.qa-article .visual-structure .structure-hero-choice strong{
  margin-top:42px;
  color:var(--onyx)!important;
  font-size:27px;
  line-height:1.03;
}
.qa-article .visual-structure .structure-hero-choice span{
  margin-top:14px;
  color:var(--ink-56)!important;
  font-size:12px;
  line-height:1.5;
  opacity:1!important;
}
.qa-article .visual-structure .structure-hero-choice>b{
  align-self:center;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--lime);
  color:#013D37!important;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}
.qa-article .structure-question-grid b{
  letter-spacing:.12em;
  color:var(--green)!important;
}

@media (max-width:680px){
  .qa-article .visual-structure .structure-hero-choice{
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:28px!important;
  }
  .qa-article .visual-structure .structure-hero-choice>div{
    min-height:0!important;
    padding:20px!important;
    border-radius:19px!important;
  }
  .qa-article .visual-structure .structure-hero-choice strong{
    margin-top:24px!important;
    font-size:27px!important;
  }
  .qa-article .visual-structure .structure-hero-choice span{
    margin-top:10px!important;
    font-size:13px!important;
    line-height:1.5!important;
  }
  .qa-article .visual-structure .structure-hero-choice>b{
    display:grid!important;
    width:38px!important;
    height:38px!important;
    margin:0 auto!important;
  }

  /* Turn the comparison table into readable mobile comparison cards instead of a sideways scroll. */
  .qa-article .compare-table{
    margin-top:32px!important;
    border:0!important;
    overflow:visible!important;
    display:grid!important;
    gap:12px!important;
  }
  .qa-article .compare-table>div{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    border:1px solid var(--ink-10)!important;
    border-radius:16px!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .qa-article .compare-table>div>*{
    border:0!important;
    padding:14px!important;
    font-size:13px!important;
    line-height:1.52!important;
  }
  .qa-article .compare-table>div>span{
    grid-column:1/-1!important;
    background:var(--palette-lime-soft)!important;
    color:var(--green)!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.09em!important;
    border-bottom:1px solid var(--ink-10)!important;
  }
  .qa-article .compare-table>div>p:first-of-type{
    border-right:1px solid var(--ink-10)!important;
  }
  .qa-article .compare-table .compare-head{
    background:var(--green)!important;
    grid-template-columns:1fr 1fr!important;
  }
  .qa-article .compare-table .compare-head>span{display:none!important}
  .qa-article .compare-table .compare-head>strong{
    color:#fff!important;
    font-size:10px!important;
    line-height:1.25!important;
    letter-spacing:.08em!important;
  }
  .qa-article .compare-table .compare-head>strong:first-of-type{
    border-right:1px solid rgba(255,255,255,.18)!important;
  }
  .qa-article .structure-question-grid article{min-height:0!important}
  .qa-article .structure-question-grid h3{margin-top:24px!important}
}


/* V7.2 - action-led Insight endings */
.insight-action-copy{max-width:760px}
.insight-action-copy h2{max-width:760px;text-wrap:balance}
.insight-action-copy p{max-width:680px;line-height:1.65;color:rgba(255,255,255,.8)!important}
.insight-route-actions{width:min(100%,390px);gap:10px!important}
.insight-route-link{display:block;width:100%;padding:14px 15px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.insight-route-link span{display:block;margin-bottom:4px;color:#77D650;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.insight-route-link strong{display:block;color:#fff;font-size:13px;line-height:1.35}
.insight-route-link:hover{background:rgba(255,255,255,.13)}

.insights-close-action{padding:42px;border-radius:30px;background:#013D37;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:46px;align-items:center}
.insights-close-copy>span{display:block;color:#77D650;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.insights-close-copy h2{margin:14px 0 0;max-width:720px;font-size:clamp(38px,4vw,62px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.insights-close-copy p{margin:18px 0 0;max-width:620px;color:rgba(255,255,255,.8);font-size:15px;line-height:1.6}
.insights-close-routes{display:grid;gap:10px}
.insights-close-routes a{display:block;padding:15px 16px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.08);text-decoration:none}
.insights-close-routes a>span{display:block;margin-bottom:5px;color:#77D650;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.insights-close-routes a>strong{display:block;color:#fff;font-size:14px;line-height:1.4}
.insights-close-routes a:hover{background:rgba(255,255,255,.13)}

@media(max-width:900px){
  .insights-close-action{grid-template-columns:1fr;gap:28px;padding:34px 28px}
  .insight-route-actions{width:100%}
}
@media(max-width:540px){
  .qa-product.insight-action,.article-product.insight-action{padding-top:58px}
  .qa-product-frame .insight-action-copy h2,.article-product-frame .insight-action-copy h2{font-size:clamp(34px,10.5vw,42px);line-height:1.02}
  .qa-product-frame .insight-action-copy p,.article-product-frame .insight-action-copy p{margin-top:18px;font-size:14px;line-height:1.65}
  .qa-product-actions,.article-product-actions{gap:12px}
  .insights-close{padding-top:58px}
  .insights-close-action{padding:28px 22px;border-radius:24px;gap:24px}
  .insights-close-copy h2{font-size:38px}
  .insights-close-copy p{font-size:14px}
  .insights-close-routes a{padding:14px}
}