/* Quinbis V1.9 — card proportion and content-order refinement
   Keep approved copy/palette. Tighten oversized closing cards and make
   Insight cards read copy/action first, visual second on mobile/tablet. */

/* ---------- Shared compact final cards ---------- */
@media (max-width:1180px){
  .design-faq-list,
  .design-final-frame,
  .setup-faq-grid .faq-list,
  .setup-final-frame{
    width:100%!important;
    margin-inline:auto!important;
  }

  .design-final-frame,
  .setup-final-frame,
  .cta-frame{
    min-height:0!important;
    height:auto!important;
  }
}

/* Tablet closing cards stay aligned with their content blocks instead of
   becoming oversized banners. */
@media (min-width:760px) and (max-width:1180px){
  .design-faq-list,
  .design-final-frame,
  .setup-faq-grid .faq-list,
  .setup-final-frame{
    max-width:720px!important;
  }
  .design-final-frame,
  .setup-final-frame,
  .cta-frame{
    padding:30px!important;
    gap:18px!important;
  }
  .design-final-copy h2,
  .setup-final-frame h2,
  .cta-copy h2{
    max-width:600px!important;
  }
}

/* Mobile: the final CTA card uses the same reading width as the FAQ card. */
@media (max-width:759px){
  .design-faq-grid,
  .setup-faq-grid{
    width:100%!important;
    max-width:460px!important;
    margin-inline:auto!important;
  }
  .design-faq-list,
  .design-final-frame,
  .setup-faq-grid .faq-list,
  .setup-final-frame{
    width:100%!important;
    max-width:440px!important;
    margin-inline:auto!important;
  }
  .design-final .shell,
  .setup-final .shell{
    display:flex!important;
    justify-content:center!important;
  }
  .design-final-frame,
  .setup-final-frame{
    padding:24px!important;
    gap:18px!important;
    border-radius:22px!important;
  }
  .design-final-copy h2,
  .setup-final-frame h2{
    max-width:360px!important;
    font-size:32px!important;
    line-height:1.05!important;
  }
  .design-final-actions,
  .setup-final-actions{
    margin-top:0!important;
    gap:10px!important;
  }

  /* Home closing CTA should also feel like a content card, not a billboard. */
  .cta-frame{
    max-width:500px!important;
    margin-inline:auto!important;
    padding:26px!important;
    min-height:0!important;
  }
}

/* ---------- Insights: copy first, visual second ---------- */
@media (max-width:900px){
  /* Hero feature card */
  .insights-page .featured-insight-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:24px!important;
    min-height:0!important;
    height:auto!important;
    padding:28px!important;
  }
  .insights-page .featured-insight-copy{
    order:1!important;
    width:100%!important;
    max-width:none!important;
  }
  .insights-page .featured-insight-copy h2{
    max-width:620px!important;
    font-size:clamp(38px,6.2vw,54px)!important;
    line-height:1!important;
  }
  .insights-page .featured-insight-copy p{
    max-width:600px!important;
    margin-top:20px!important;
  }
  .insights-page .featured-insight-read{
    margin-top:22px!important;
  }
  .insights-page .featured-money-visual{
    order:2!important;
    width:100%!important;
    max-width:620px!important;
    margin:0!important;
    align-self:flex-start!important;
  }

  /* Standard insight cards follow the same Hostinger-like reading order. */
  .insights-page .insight-card{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
  }
  .insights-page .insight-card-body{
    order:1!important;
    padding:24px!important;
  }
  .insights-page .insight-card-art{
    order:2!important;
    width:auto!important;
    min-height:170px!important;
    height:170px!important;
    margin:0 18px 18px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .insights-page .insight-card-body h3{
    max-width:520px!important;
  }

  /* Setup cards: copy/action first; the comparison/list becomes the supporting visual. */
  .insights-page .insight-wide-card{
    display:flex!important;
    flex-direction:column!important;
    gap:22px!important;
    min-height:0!important;
    height:auto!important;
    padding:24px!important;
  }
  .insights-page .insight-wide-copy{order:1!important}
  .insights-page .structure-choice,
  .insights-page .after-cac-list{
    order:2!important;
    align-self:stretch!important;
    margin-top:0!important;
  }

  /* Trust cards: text/action comes before the decorative visual. */
  .insights-page .trust-card{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
  }
  .insights-page .trust-card-copy{
    order:1!important;
    padding:24px!important;
  }
  .insights-page .trust-card-visual{
    order:2!important;
    width:auto!important;
    height:180px!important;
    min-height:180px!important;
    margin:0 18px 18px!important;
    border-radius:18px!important;
  }

  /* Growth feature: compact copy first, checklist below. */
  .insights-page .growth-insight-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:24px!important;
    min-height:0!important;
    height:auto!important;
    padding:28px!important;
  }
  .insights-page .growth-insight-copy{order:1!important}
  .insights-page .growth-insight-copy h2{
    max-width:620px!important;
    font-size:clamp(38px,6vw,52px)!important;
    line-height:1!important;
  }
  .insights-page .growth-insight-copy p{max-width:590px!important}
  .insights-page .growth-readiness{
    order:2!important;
    width:100%!important;
    max-width:620px!important;
    margin:0!important;
  }
}

@media (max-width:640px){
  .insights-page .featured-insight-card,
  .insights-page .growth-insight-card{
    padding:24px!important;
    gap:20px!important;
  }
  .insights-page .featured-insight-copy h2,
  .insights-page .growth-insight-copy h2{
    font-size:36px!important;
    line-height:1.02!important;
    max-width:390px!important;
  }
  .insights-page .featured-insight-copy p,
  .insights-page .growth-insight-copy p{
    font-size:14px!important;
    line-height:1.6!important;
    max-width:390px!important;
  }
  .insights-page .featured-money-visual{
    max-width:none!important;
    padding:18px!important;
    border-radius:18px!important;
  }
  .insights-page .insight-card-body,
  .insights-page .trust-card-copy{
    padding:22px!important;
  }
  .insights-page .insight-card-art,
  .insights-page .trust-card-visual{
    height:160px!important;
    min-height:160px!important;
    margin:0 14px 14px!important;
  }
  .insights-page .insight-wide-card{padding:22px!important}
  .insights-page .structure-choice{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .insights-page .structure-choice>i{display:none!important}
  .insights-page .structure-choice>div{min-height:86px!important}
  .insights-page .after-cac-list{gap:8px!important}
  .insights-page .growth-readiness div{min-height:52px!important}
}

/* V2.6 — homepage closing CTA balance.
   Keep the action with the message and let the brand pattern carry the right side. */
@media (min-width:1181px){
  .final-cta .cta-frame{
    min-height:330px!important;
    padding:52px 56px!important;
    grid-template-columns:minmax(0,780px) minmax(180px,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:56px!important;
    row-gap:24px!important;
    align-content:center!important;
    align-items:start!important;
  }
  .final-cta .cta-copy{
    grid-column:1!important;
    grid-row:1!important;
    max-width:780px!important;
    align-self:end!important;
  }
  .final-cta .cta-copy>span{
    display:block!important;
    margin-bottom:0!important;
  }
  .final-cta .cta-copy h2{
    max-width:760px!important;
    margin-top:16px!important;
    font-size:clamp(50px,4.25vw,66px)!important;
    line-height:.99!important;
  }
  .final-cta .cta-actions{
    grid-column:1!important;
    grid-row:2!important;
    align-self:start!important;
    justify-self:start!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:18px!important;
  }
  .final-cta .btn-cta{
    min-height:54px!important;
    padding-inline:22px!important;
  }
  .final-cta .cta-actions>a:last-child{
    font-size:12px!important;
    line-height:1.4!important;
    white-space:nowrap!important;
  }
  .final-cta .cta-mark{
    background-position:right center!important;
  }
  .final-cta .cta-lime-line{
    left:56px!important;
    width:30%!important;
  }
}

@media (min-width:760px) and (max-width:1180px){
  .final-cta .cta-frame{
    padding:38px!important;
    gap:24px!important;
  }
  .final-cta .cta-copy h2{
    max-width:590px!important;
    margin-top:16px!important;
    font-size:clamp(48px,7vw,64px)!important;
    line-height:1!important;
  }
  .final-cta .cta-actions{
    flex-direction:row!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:14px 18px!important;
  }
  .final-cta .cta-lime-line{left:38px!important;width:34%!important}
}

@media (max-width:759px){
  .final-cta .cta-frame{
    padding:28px 24px 30px!important;
    gap:22px!important;
  }
  .final-cta .cta-copy h2{
    max-width:360px!important;
    margin-top:14px!important;
    font-size:clamp(38px,10.5vw,48px)!important;
  }
  .final-cta .cta-actions{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }
  .final-cta .cta-actions>a:last-child{padding-left:2px!important}
  .final-cta .cta-lime-line{left:24px!important;width:38%!important}
}