/* Quinbis official web palette — V1
   Growth Green = primary branded surface
   Kinetic Lime = signal / action / selected accent
   White + soft green neutrals = breathing room
   Onyx = text and fine structure, not card surfaces
*/
:root{
  --green:#013D37;
  --lime:#77D650;
  --palette-mist:#F8FAF7;
  --palette-lime-soft:#F0F7E7;
  --palette-green-soft:#F0F7E7;
  --palette-line:#DCE7DF;
  --palette-green-line:rgba(1,61,55,.16);
  --green-12:rgba(1,61,55,.12);
  --green-08:rgba(1,61,55,.08);
}

/* Header: branded green at the top, clean white after scroll. */
.site-header,
.site-header:not(.is-scrolled){
  background:var(--green) !important;
  color:#fff !important;
  border-bottom-color:rgba(255,255,255,.10) !important;
}
.site-header:not(.is-scrolled) .desktop-nav a{color:rgba(255,255,255,.86) !important}
.site-header:not(.is-scrolled) .desktop-nav a:hover{color:#fff !important}
.site-header:not(.is-scrolled) .btn-nav{background:var(--lime) !important;color:#013D37 !important}
.site-header:not(.is-scrolled) .btn-nav .btn-arrow{background:var(--green) !important;color:var(--lime) !important}
.site-header:not(.is-scrolled) .mobile-menu{background:var(--green) !important;color:#fff !important}

.site-header.is-scrolled{background:rgba(255,255,255,.97) !important;color:var(--onyx) !important}
.site-header.is-scrolled .btn-nav{background:var(--green) !important;color:#fff !important}
.site-header.is-scrolled .btn-nav .btn-arrow{background:var(--lime) !important;color:#013D37 !important}

/* Keep the canvas light; use green rather than black for strong sections. */
.section-dark,
.setup-process,
.design-ongoing,
.qa-section.dark,
.site-footer{
  background:var(--green) !important;
  color:#fff !important;
}
.section-dark .section-kicker,
.setup-process .section-kicker,
.design-ongoing .section-kicker,
.qa-section.dark .qa-section-head>span,
.footer-col>span{
  color:var(--lime) !important;
}

/* Large headings stay readable; green/lime do not fight inside type. */
.hero h1 em,
.setup-hero-copy h1 em,
.design-hero-copy h1 em,
.insights-hero-copy h1 em,
.problem-copy h2 em,
.problem-intro-main h2 em,
.setup-value-copy h2 em,
.setup-section-head h2 em,
.setup-faq-heading h2 em,
.design-job-head h2 em,
.design-section-head h2 em,
.design-system-copy h2 em,
.design-process-head h2 em,
.insight-cluster-head h2 em{
  color:inherit !important;
}
.section-dark .money-copy h2,
.section-dark .money-copy h2 em,
.section-dark .money-copy p,
.section-dark .money-copy a,
.setup-process h2,
.setup-process p,
.design-ongoing h2,
.design-ongoing p,
.qa-section.dark h2,
.qa-section.dark h3,
.qa-section.dark p{
  color:#fff !important;
}

/* Homepage service/product hierarchy: no black cards. */
.path-card-green{
  background:var(--green) !important;
  color:#fff !important;
  border-color:var(--green) !important;
}
.path-card-light{
  background:#fff !important;
  color:var(--onyx) !important;
  border-color:var(--palette-line) !important;
}
.path-card-dark{
  background:var(--palette-lime-soft) !important;
  color:var(--onyx) !important;
  border-color:var(--palette-green-line) !important;
}
.path-card-dark h3,.path-card-dark p{color:var(--onyx) !important}
.path-card-dark .path-card-top{color:var(--green) !important}
.path-card-green .path-card-top{color:var(--lime) !important}
.path-card-green p{color:rgba(255,255,255,.75) !important}
.doc-seal,.dash-brand-mark{background:var(--green) !important;color:var(--lime) !important}
.frame-one{background:var(--green) !important;color:var(--lime) !important}
.frame-three{background:var(--lime) !important;border:1px solid rgba(1,61,55,.10)}

.quinbis-product-panel{
  background:var(--green) !important;
  color:#fff !important;
}
.quinbis-product-visual{background:#fff !important;color:var(--onyx) !important}
.product-money-safe{
  background:var(--green) !important;
  color:#fff !important;
  border:1px solid rgba(119,214,80,.22) !important;
}
.product-money-safe div>span,.product-money-safe small{color:rgba(255,255,255,.72) !important}
.product-money-safe b{background:var(--lime) !important;color:#013D37 !important}

/* Product/dashboard cards use green + white + lime, never black. */
.dash-cards .dash-safe,
.five-number-cards .safe,
.qa-product-frame,
.structure-hero-choice>div:last-child,
.visual-aftercac,
.three-hero>div:nth-child(2),
.three-angle>div:nth-child(2),
.structure-choice div:last-child,
.split-wallet div:last-child,
.money-flow .flow-in,
.trust-hero .trust-card,
.visual-growth,
.flow-hero>div:first-child,
.money-waterfall .waterfall-start,
.sales-profit-pair>div:last-child,
.visual-pricing,
.pricing-tool-frame{
  background:var(--green) !important;
  border-color:var(--green) !important;
  color:#fff !important;
}

/* Former black insight/art cards become light or green surfaces. */
.insight-art-one{background:var(--green) !important;color:#fff !important}
.insight-art-two{
  background:var(--palette-lime-soft) !important;
  color:var(--green) !important;
  border:1px solid var(--palette-line) !important;
}
.insight-art-two .insight-number{color:var(--green) !important}
.insight-art-two .insight-label{color:rgba(1,61,55,.66) !important}
.visual-structure,
.compare-head,
.visual-ads,
.money-flow .flow-out{
  background:var(--palette-green-soft) !important;
  color:var(--green) !important;
  border-color:var(--palette-green-line) !important;
}
.visual-structure *,
.compare-head *,
.visual-ads *,
.money-flow .flow-out *{color:inherit}

/* Design visuals: green/lime/white composition, no black cards. */
.design-card-brand,
.system-card-logo,
.ongoing-card-motion{
  background:var(--green) !important;
  color:#fff !important;
}
.design-card-brand .design-brand-mark,
.system-card-logo strong{color:var(--lime) !important}
.monthly-sheet-a{
  background:#fff !important;
  color:var(--green) !important;
  border:1px solid var(--palette-line) !important;
}
.monthly-sheet-b{background:var(--lime) !important;color:#013D37 !important}
.monthly-sheet-c{background:var(--green) !important;color:#fff !important}

/* Pricing: featured card is Growth Green; all others remain clean white. */
.setup-package-card:not(.setup-package-featured),
.design-package-card:not(.design-package-featured){
  background:#fff !important;
  color:var(--onyx) !important;
  border-color:var(--palette-line) !important;
}
.setup-package-featured,
.design-package-featured{
  background:var(--green) !important;
  color:#fff !important;
  border-color:var(--green) !important;
}
.setup-package-featured .package-type,
.setup-package-featured .package-includes-label,
.design-package-featured .design-package-top,
.design-package-featured .design-package-includes{
  color:var(--lime) !important;
}
.setup-package-featured p,
.setup-package-featured li,
.design-package-featured p,
.design-package-featured li{color:rgba(255,255,255,.76) !important}

/* Buttons: green on light surfaces, lime on green surfaces. */
.btn-primary,
.setup-primary-btn,
.design-primary-btn,
.setup-cta-btn,
.design-cta-btn{
  background:var(--green) !important;
  color:#fff !important;
  border-color:var(--green) !important;
  box-shadow:none !important;
}
.btn-primary .btn-arrow,
.setup-primary-btn .btn-arrow,
.design-primary-btn .btn-arrow,
.setup-cta-btn .btn-arrow,
.design-cta-btn .btn-arrow{
  background:var(--lime) !important;
  color:#013D37 !important;
}
.package-cta-featured,
.design-package-cta-featured,
.quinbis-panel-btn{
  background:var(--lime) !important;
  color:#013D37 !important;
  border-color:var(--lime) !important;
}
.package-cta:hover,
.design-package-cta:hover{
  background:var(--green) !important;
  color:#fff !important;
  border-color:var(--green) !important;
}
.package-cta-featured:hover,
.design-package-cta-featured:hover{background:var(--lime) !important;color:#013D37 !important}

/* CTA/card surfaces: use green or soft neutrals, not black. */
.cta-panel{background:var(--green) !important;color:#fff !important}
.qa-next-card:hover{background:var(--green) !important;color:#fff !important}
.qa-note,.qa-next-card,.insight-card{background:#fff;border-color:var(--palette-line)}

/* Small signals use lime; section labels on light backgrounds use green. */
.section-kicker,
.method-number,
.problem-points article>span,
.insight-copy>span:first-child,
.insight-card .insight-meta,
.insight-wide-copy .insight-meta,
.growth-insight-copy .insight-meta,
.qa-meta,
.visual-kicker,
.qa-rail-inner>span,
.qa-section-head>span,
.qa-side-head>span,
.qa-next-head>span,
.qa-note>span,
.qa-source-note>span,
.qa-next-card>span,
.package-type,
.package-includes-label,
.design-package-top,
.design-package-includes,
.setup-note>span,
.design-credit-kicker{
  color:var(--green);
}

.path-card-green .path-card-top,
.qa-product-frame>div>span,
.five-number-cards .safe b,
.structure-hero-choice>div:last-child span,
.three-hero>div:nth-child(2) span,
.three-angle>div:nth-child(2) span,
.trust-hero .trust-card span,
.flow-hero>div:first-child span,
.money-waterfall .waterfall-start span,
.sales-profit-pair>div:last-child span,
.pricing-tool-frame span,
.visual-pricing span{
  color:var(--lime) !important;
}

/* Functional focus state. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--lime) !important;
  outline-offset:3px;
}

/* Remaining Insight surfaces: keep the system green / lime / light. */
.mini-chart{background:var(--green) !important}
.mini-chart span:nth-child(2n){background:#fff !important;opacity:.34}
.split-wallet{background:var(--palette-line) !important}
.money-flow .flow-out{background:var(--palette-lime-soft) !important;color:var(--green) !important;border:1px solid var(--palette-green-line)}
.insight-cluster-trust{background:var(--green) !important;color:#fff !important}
.insight-cluster-trust .trust-card{border-color:rgba(255,255,255,.16) !important}

/* Small utility surfaces should also avoid black card blocks. */
.skip-link{background:var(--green) !important;color:#fff !important}


/* Official refinement pass: simplify the color hierarchy.
   White = primary canvas; Growth Green = brand/strong surface;
   Kinetic Lime = signal/action; Lime Soft = quiet supportive surface;
   Onyx = text and fine structure only. */
body{background:#fff;color:var(--onyx)}

/* On white, the brand resolves in Growth Green rather than black. */
.site-header.is-scrolled .brand-word{color:var(--green) !important}

/* Keep large soft sections consistent instead of using many near-identical greys. */
.setup-packages,
.design-packages,
.insight-cluster-setup,
.qa-section.soft{background:var(--palette-mist) !important}

/* The light green approved in the Insights cards becomes the single soft brand tint. */
.insight-art-two,
.path-card-dark,
.qa-hero-visual,
.qa-note,
.week-story,
.organise-board>div,
.ready-test>div,
.small-spend-cloud,
.sales-profit-pair>div:first-child,
.price-result,
.adjust-loop span,
.after-cac-list span,
.money-row-safe,
.growth-insight-card{background:var(--palette-lime-soft) !important}

/* Remove the final black-card treatment in Insights. The green section supplies
   the contrast; the cards themselves stay calm and readable. */
.insight-cluster-trust .trust-card{
  background:#fff !important;
  color:var(--onyx) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:0 18px 48px rgba(1,61,55,.16);
}
.insight-cluster-trust .trust-card-copy .insight-meta,
.insight-cluster-trust .trust-card .insight-card-read{color:var(--green) !important}
.insight-cluster-trust .trust-card-copy p{color:var(--ink-64) !important}
.insight-cluster-trust .ad-funnel{background:var(--palette-lime-soft) !important}

/* Avoid Lime as body/headline text on light surfaces; use it as a signal instead. */
.setup-after-copy h2 em{color:inherit !important}

/* Quiet borders make the system feel related without outlining every surface. */
.insight-card,
.insight-wide-card,
.growth-insight-card,
.setup-package-card,
.design-package-card,
.qa-note,
.qa-next-card{border-color:var(--palette-line) !important}

/* Featured package cards are green by color alone — no badge needed. */
.setup-package-featured,
.design-package-featured{box-shadow:0 20px 48px rgba(1,61,55,.14) !important}

/* Keep Lime actions crisp on green, and Growth Green actions crisp on light surfaces. */
.quinbis-product-panel .section-kicker,
.cta-panel .section-kicker,
.site-footer .footer-col>span{color:var(--lime) !important}

/* Reduced motion keeps branded movement optional and comfortable. */
@media (prefers-reduced-motion:reduce){
  .method-list li,
  .path-card,
  .insight-card,
  .setup-package-card,
  .design-package-card{transition:none !important}
}

/* ===== Quinbis official refinement V1.1 =====
   Card visibility + sharper bento composition + Growth Green type on Kinetic Lime. */

/* Kinetic Lime is a high-energy surface: readable text/icons on it use Growth Green. */
::selection{background:var(--lime)!important;color:#013D37!important}
.site-header:not(.is-scrolled) .btn-nav,
.site-header.is-scrolled .btn-nav .btn-arrow,
.btn-arrow-lime,
.safe-state,
.round-arrow-lime,
.mini-pill,
.btn-cta,
.quinbis-panel-btn,
.product-money-safe b,
.setup-file-status,
.setup-progress-list .is-done .setup-step-icon,
.setup-after-btn,
.after-reminder-card .after-safe,
.package-cta-featured,
.design-card-social,
.system-card-post,
.monthly-sheet-b,
.motion-play,
.design-package-cta-featured,
.design-final-primary,
.design-faq-list details[open] summary::after,
.money-status,
.money-row-safe b,
.term-stack span:nth-child(2),
.profit-math,
.price-builder strong,
.after-cac-list b,
.ad-funnel strong,
.growth-readiness b,
.featured-insight-read,
.qa-product-primary,
.weekly-number-list .is-safe,
.week-story-bottom.safe,
.aftercac-path .done,
.three-hero>div:nth-child(3),
.three-angle>div:nth-child(3),
.messy-ledger b.owner,
.fine-poster,
.ads-path strong,
.flow-hero>div:last-child,
.money-waterfall .waterfall-end,
.visual-profit,
.profit-breakdown .profit-result,
.price-hero>strong,
.hero-equation-safe,
.insight-art-three{
  color:#013D37!important;
}
.design-card-social *,
.system-card-post *,
.fine-poster *,
.visual-profit *,
.insight-art-three *{color:#013D37!important}

/* On Kinetic, outlines/details use restrained Growth Green for readable contrast. */
.safe-state,
.setup-file-status,
.package-cta-featured,
.design-package-cta-featured,
.featured-insight-read,
.quinbis-panel-btn{
  border-color:rgba(1,61,55,.32)!important;
  box-shadow:none!important;
}

/* Cleaner visual frames: calm canvas, crisp border, restrained depth. */
.hero-stage,
.setup-visual,
.design-stage{
  border-color:var(--palette-line)!important;
  background:
    radial-gradient(circle at 82% 15%,rgba(119,214,80,.14),transparent 28%),
    linear-gradient(145deg,#fff 0%,var(--palette-mist) 100%)!important;
  box-shadow:0 18px 46px rgba(1,61,55,.065)!important;
}

/* Homepage financial story: a clear bento, not hidden stacked cards. */
.money-deck{
  inset:24px!important;
  display:grid!important;
  grid-template-columns:minmax(180px,.72fr) minmax(0,1.38fr)!important;
  grid-template-rows:1fr 1fr!important;
  grid-template-areas:"cash safe" "commit safe"!important;
  gap:14px!important;
  transform:none!important;
}
.micro-card,.safe-card{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  transform:none!important;
  animation:none!important;
}
.micro-card{
  padding:22px!important;
  border-radius:22px!important;
  box-shadow:none!important;
  border-color:var(--palette-line)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.micro-card-cash{grid-area:cash!important;background:#fff!important}
.micro-card-commit{grid-area:commit!important;background:var(--palette-lime-soft)!important}
.micro-card strong{font-size:clamp(22px,2vw,29px)!important}
.micro-foot{font-size:10px!important;line-height:1.45!important}
.micro-accent{left:22px!important;bottom:18px!important;width:48px!important}
.safe-card{
  grid-area:safe!important;
  padding:30px!important;
  border-radius:26px!important;
  box-shadow:0 24px 52px rgba(1,61,55,.18)!important;
  display:flex!important;
  flex-direction:column!important;
}
.safe-copy{margin-top:auto!important;padding-top:34px!important}
.safe-copy strong{font-size:clamp(44px,4.2vw,60px)!important}
.safe-card-bottom{margin-top:auto!important}

/* Setup: supporting cards stay fully visible and tell the story with the main card. */
.setup-visual{
  padding:24px!important;
  display:grid!important;
  grid-template-columns:minmax(170px,.62fr) minmax(0,1.38fr)!important;
  grid-template-rows:1fr 1fr!important;
  grid-template-areas:"docone main" "doctwo main"!important;
  gap:14px!important;
  align-items:stretch!important;
}
.setup-file-card,
.setup-doc{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
}
.setup-file-card{
  grid-area:main!important;
  padding:28px!important;
  border-radius:26px!important;
  box-shadow:0 24px 52px rgba(1,61,55,.18)!important;
}
.setup-doc{
  padding:22px!important;
  border-radius:22px!important;
  border-color:var(--palette-line)!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  overflow:hidden!important;
}
.setup-doc::after{
  content:"";
  width:54px;
  height:4px;
  border-radius:99px;
  background:var(--lime);
}
.setup-doc-one{grid-area:docone!important;background:#fff!important}
.setup-doc-two{grid-area:doctwo!important;background:var(--palette-lime-soft)!important}
.setup-doc strong{margin-top:auto!important;margin-bottom:24px!important;font-size:21px!important}

/* Design hero: a deliberate Hostinger-inspired bento with distinct scale, no overlap. */
.design-deck{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  grid-template-rows:1fr 1fr!important;
  gap:12px!important;
}
.design-card{
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
.design-card-brand{grid-column:1 / span 5!important;grid-row:1 / span 2!important}
.design-card-sales{grid-column:6 / span 7!important;grid-row:1!important}
.design-card-social{grid-column:6 / span 3!important;grid-row:2!important}
.design-card-web{grid-column:9 / span 4!important;grid-row:2!important;background:var(--palette-lime-soft)!important;color:var(--green)!important;border-color:var(--palette-green-line)!important}
.design-card-web .web-browser{min-height:108px!important;margin-top:14px!important}
.design-card-web .design-card-bottom small{color:rgba(1,61,55,.62)!important;opacity:1!important}
.design-card-brand,.design-card-sales,.design-card-social,.design-card-web{box-shadow:none!important}
.design-card-social .design-card-bottom small{color:rgba(255,255,255,.74)!important;opacity:1!important}

/* Keep Insights graphics crisp under the official palette. */
.insight-card,.insight-wide-card,.growth-insight-card{box-shadow:none!important}
.insight-art-one,.insight-art-two,.insight-art-three{border-bottom:1px solid var(--palette-line)}
.insight-art-three{background:var(--lime)!important}

/* Small-screen compositions keep every card visible instead of cropping the support story. */
@media(max-width:900px){
  .money-deck{inset:20px!important}
  .setup-visual{padding:20px!important}
  .design-deck{
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:1fr 1fr!important;
  }
  .design-card-brand,.design-card-sales,.design-card-social,.design-card-web{
    grid-column:auto!important;grid-row:auto!important;
  }
}

@media(max-width:680px){
  .hero-stage{min-height:475px!important}
  .money-deck{
    inset:12px!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:minmax(270px,1.55fr) minmax(112px,.65fr)!important;
    grid-template-areas:"safe safe" "cash commit"!important;
    gap:10px!important;
  }
  .safe-card{padding:20px!important;border-radius:20px!important}
  .safe-copy{padding-top:18px!important}
  .safe-copy strong{font-size:38px!important}
  .safe-card p{font-size:9.5px!important;margin-top:10px!important}
  .safe-meter{margin-top:14px!important}
  .safe-card-bottom{padding-top:12px!important;margin-top:12px!important;font-size:8px!important}
  .micro-card{padding:13px!important;border-radius:16px!important;justify-content:flex-start!important}
  .micro-card strong{font-size:17px!important}
  .micro-label{font-size:7.5px!important}
  .micro-foot{margin-top:7px!important;font-size:7.5px!important}
  .micro-accent{left:13px!important;bottom:10px!important;width:34px!important;height:2px!important}

  .setup-visual{
    min-height:495px!important;
    padding:12px!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:minmax(330px,1.55fr) minmax(105px,.5fr)!important;
    grid-template-areas:"main main" "docone doctwo"!important;
    gap:10px!important;
  }
  .setup-file-card{padding:18px!important;border-radius:20px!important}
  .setup-file-business{margin-top:20px!important}
  .setup-file-business strong{font-size:24px!important}
  .setup-progress-list{margin-top:16px!important}
  .setup-progress-list li{padding:10px 0!important;grid-template-columns:28px 1fr!important;gap:9px!important}
  .setup-step-icon{width:23px!important;height:23px!important;font-size:8px!important}
  .setup-progress-list strong{font-size:11px!important}
  .setup-progress-list small{font-size:8px!important}
  .setup-file-bottom{padding-top:10px!important;font-size:8px!important}
  .setup-doc{display:flex!important;padding:13px!important;border-radius:16px!important}
  .setup-doc span{font-size:7px!important}
  .setup-doc strong{margin-bottom:12px!important;font-size:14px!important}
  .setup-doc::after{width:34px;height:3px}

  .design-stage{min-height:438px!important;padding:12px!important}
  .design-deck{gap:8px!important}
  .design-card{padding:13px!important;border-radius:15px!important}
  .design-brand-mark{font-size:64px!important}
  .sales-layout,.social-layout{margin-top:15px!important}
  .sales-layout strong{font-size:20px!important}
  .social-layout strong{font-size:22px!important}
  .web-browser{min-height:92px!important;padding:9px!important}
  .web-copy{padding:9px 4px 4px!important}
  .web-copy strong{font-size:14px!important}
}

/* Article-specific Kinetic surfaces follow the Growth-on-Kinetic presentation rule. */
.hero-equation-safe,
.hero-equation-safe span,
.example-board-result,
.example-board-result *,
.commitment-list b,
.calculator-result .calculator-status,
.article-product-primary,
.article-next-link{
  color:#013D37!important;
}

/* Inherit Growth Green through children that previously carried local colors. */
.weekly-number-list .is-safe *,
.week-story-bottom.safe *,
.aftercac-path .done *,
.three-hero>div:nth-child(3) *,
.three-angle>div:nth-child(3) *,
.flow-hero>div:last-child *,
.money-waterfall .waterfall-end *,
.profit-breakdown .profit-result *,
.price-hero>strong *,
.example-board-result *,
.hero-equation-safe *{color:#013D37!important}
/* White inset cards sitting on a Kinetic visual keep dark readable text. */
.visual-profit .profit-hero>div,
.visual-profit .profit-hero>div *{color:var(--onyx)!important}
.visual-profit .profit-hero span{color:var(--ink-52)!important}

/* ===== Quinbis official refinement V1.2 =====
   Black wordmark on white header, white on green header.
   Kinetic Lime becomes a deliberate feature-card surface with Growth Green type. */

/* Header wordmark rule. */
.site-header:not(.is-scrolled) .brand-word{color:#fff!important}
.site-header.is-scrolled .brand-word{color:var(--onyx)!important}

/* All readable text that sits directly on Kinetic Lime resolves in Growth Green. */
.site-header:not(.is-scrolled) .btn-nav,
.btn-arrow-lime,
.round-arrow-lime,
.mini-pill,
.btn-cta,
.quinbis-panel-btn,
.package-cta-featured,
.design-package-cta-featured,
.design-final-primary,
.qa-product-primary,
.featured-insight-read,
.setup-after-btn,
.motion-play,
.monthly-sheet-b,
.money-status,
.hero-equation-safe,
.example-board-result,
.article-product-primary,
.article-next-link{
  color:#013D37!important;
}

/* Homepage: let the primary financial answer behave like a Hostinger-style
   feature card — one strong Lime surface, supported by calm white/light cards. */
.safe-card{
  background:var(--lime)!important;
  color:#013D37!important;
  box-shadow:0 24px 52px rgba(1,61,55,.14)!important;
}
.safe-card::after{border-color:rgba(255,255,255,.38)!important}
.safe-card .safe-badge,
.safe-card .safe-copy span,
.safe-card .safe-copy strong,
.safe-card p,
.safe-card .safe-card-bottom,
.safe-card .safe-arrow{color:#013D37!important}
.safe-card .safe-state{
  background:rgba(255,255,255,.17)!important;
  color:#013D37!important;
  border:1px solid rgba(1,61,55,.32)!important;
}
.safe-card .safe-meter{background:rgba(1,61,55,.18)!important}
.safe-card .safe-meter span{background:#013D37!important}
.safe-card .safe-card-bottom{border-top-color:rgba(1,61,55,.24)!important}
.safe-card .safe-arrow{border-color:rgba(1,61,55,.32)!important}

/* Homepage Setup card: Lime is used once as a large marketing surface;
   Design stays white and the Quinbis product panel remains Growth Green. */
.path-card-green{
  background:var(--lime)!important;
  color:#013D37!important;
  border-color:var(--lime)!important;
  box-shadow:0 18px 42px rgba(1,61,55,.08)!important;
}
.path-card-green h3,
.path-card-green p,
.path-card-green .path-card-top,
.path-card-green .round-arrow{color:#013D37!important}
.path-card-green p{opacity:.88}
.path-card-green .round-arrow{border-color:rgba(1,61,55,.32)!important}

/* Setup: one supporting document card carries Lime, while the main setup
   product surface stays Growth Green. */
.setup-doc-two{
  background:var(--lime)!important;
  color:#013D37!important;
  border-color:rgba(1,61,55,.28)!important;
}
.setup-doc-two span,
.setup-doc-two strong{color:#013D37!important}
.setup-doc-two::after{background:#013D37!important}

/* Design and Insights already contain a Kinetic card; keep Growth Green type
   explicit so local component rules cannot reintroduce white text. */
.design-card-social,
.insight-art-three{background:var(--lime)!important;color:#013D37!important}
.design-card-social *,
.insight-art-three *{color:#013D37!important}

/* Keep larger green brand anchors green so Lime remains special. */
.quinbis-product-panel,
.setup-file-card,
.setup-package-featured,
.design-package-featured,
.section-dark,
.setup-process,
.design-ongoing,
.insight-cluster-trust,
.site-footer{background:var(--green)!important}

/* On Kinetic buttons, a restrained Growth Green border keeps the action legible. */
.site-header:not(.is-scrolled) .btn-nav,
.btn-cta,
.quinbis-panel-btn,
.package-cta-featured,
.design-package-cta-featured,
.design-final-primary,
.qa-product-primary,
.featured-insight-read{
  border-color:rgba(1,61,55,.32)!important;
}

/* Remaining small Kinetic labels follow the same Growth-on-Kinetic rule. */
.package-feature-line,
.after-reminder-card .after-safe,
.setup-file-status,
.setup-progress-list .is-done .setup-step-icon,
.design-faq-list details[open] summary::after,
.term-stack span:nth-child(2),
.profit-math,
.ad-funnel strong,
.growth-readiness b{color:#013D37!important}

/* ===== Quinbis responsive interface refinement V1.3 =====
   Hostinger-inspired principles: one clear reading order, no horizontal card
   carousels for packages, no card overlap, consistent spacing at phone/tablet. */

html,body{max-width:100%;overflow-x:hidden}

/* Every card owns its space. Long labels may wrap, but never collide. */
.micro-card,.safe-card,.setup-file-card,.setup-doc,.design-card,
.path-card,.quinbis-product-panel,.quinbis-product-visual,
.setup-package-card,.design-package-card,.insight-card,
.insight-wide-card,.growth-insight-card,.ongoing-card,.system-card{
  box-sizing:border-box;
  min-width:0;
}
.micro-card *,.safe-card *,.setup-file-card *,.setup-doc *,.design-card *,
.path-card *,.quinbis-product-panel *,.setup-package-card *,
.design-package-card *,.insight-card *{
  min-width:0;
}
.setup-package-card h3,.design-package-card h3,
.setup-package-card p,.design-package-card p,
.setup-package-card li,.design-package-card li,
.package-cta,.design-package-cta{
  overflow-wrap:break-word;
  word-break:normal;
}
.package-cta,.design-package-cta{
  height:auto!important;
  min-height:52px;
  padding:13px 16px!important;
  line-height:1.25;
}

/* Desktop retains the clear three-plan comparison. */
.package-grid,.design-package-grid{
  overflow:visible!important;
  scroll-snap-type:none!important;
}
.package-swipe-hint,.design-package-swipe{display:none!important}

/* Tablet: two readable columns, then a full-width third plan. No sideways scroll. */
@media (min-width:760px) and (max-width:1079px){
  .package-grid,.design-package-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:18px!important;
    padding:0!important;
    margin-inline:0!important;
  }
  .setup-package-card,.design-package-card{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    scroll-snap-align:none!important;
    padding:26px!important;
    border-radius:24px!important;
  }
  .setup-package-card:nth-child(3),.design-package-card:nth-child(3){
    grid-column:1 / -1;
  }
  .setup-package-card:nth-child(3) .package-list,
  .design-package-card:nth-child(3) ul{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:28px!important;
    row-gap:10px!important;
  }
  .package-for,.design-package-why{min-height:0!important}

  /* Tablet hero/product compositions use strong bento hierarchy, not overlap. */
  .hero-stage{min-height:540px!important}
  .money-deck{
    inset:20px!important;
    grid-template-columns:minmax(185px,.68fr) minmax(0,1.32fr)!important;
    grid-template-rows:1fr 1fr!important;
    grid-template-areas:"cash safe" "commit safe"!important;
    gap:14px!important;
  }
  .setup-visual{
    min-height:560px!important;
    padding:20px!important;
    grid-template-columns:minmax(180px,.64fr) minmax(0,1.36fr)!important;
    grid-template-rows:1fr 1fr!important;
    grid-template-areas:"docone main" "doctwo main"!important;
    gap:14px!important;
  }
  .design-stage{min-height:650px!important;padding:18px!important}
  .design-deck{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr)!important;
    grid-template-rows:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .design-card-brand{grid-column:1!important;grid-row:1 / 4!important}
  .design-card-sales{grid-column:2!important;grid-row:1!important}
  .design-card-social{grid-column:2!important;grid-row:2!important}
  .design-card-web{grid-column:2!important;grid-row:3!important}
  .design-card{padding:17px!important;border-radius:18px!important}
  .design-brand-mark{font-size:clamp(72px,10vw,110px)!important}
  .design-card-sales .sales-layout,.design-card-social .social-layout{margin-top:14px!important}
  .design-card-sales .sales-layout strong{font-size:23px!important}
  .design-card-social .social-layout strong{font-size:25px!important}
  .design-card-web .web-browser{min-height:92px!important;margin-top:10px!important}
  .design-card-bottom{gap:3px}
  .design-card-bottom small{white-space:normal!important;line-height:1.35!important}

  /* Service cards stay paired on tablet with enough vertical room for artwork. */
  .service-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  .path-card{min-height:520px!important;padding:24px!important}
  .path-card-copy{margin-top:42px!important}
  .setup-art,.design-art{height:190px!important;left:24px!important;right:24px!important}
}

/* Phone: vertical reading flow. No cards peek from the side, no swiping. */
@media (max-width:759px){
  .setup-packages,.design-packages{overflow:visible!important}
  .package-grid,.design-package-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:16px!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
    width:100%!important;
  }
  .setup-package-card,.design-package-card{
    width:100%!important;
    max-width:560px!important;
    min-height:0!important;
    height:auto!important;
    margin-inline:auto!important;
    padding:24px!important;
    border-radius:22px!important;
    text-align:left!important;
    scroll-snap-align:none!important;
  }
  .package-feature-line,.design-package-ribbon{align-self:flex-start!important}
  .package-card-top,.design-package-top,
  .package-includes-label,.design-package-includes,
  .package-list,.design-package-card ul{text-align:left!important}
  .package-for,.design-package-why{min-height:0!important;margin-top:12px!important}
  .package-price,.design-package-price{margin-top:22px!important;padding-top:20px!important}
  .package-price strong,.design-package-price strong{font-size:36px!important}
  .package-cta,.design-package-cta{width:100%!important;margin-top:20px!important}
  .package-includes-label,.design-package-includes{margin-top:26px!important}
  .package-list,.design-package-card ul{margin-top:13px!important}
  .package-list li,.design-package-card li{font-size:13px!important;line-height:1.52!important}

  /* The package heading behaves like Hostinger's mobile pricing intro: centered,
     compact, then plans read one after another below it. */
  .setup-packages .setup-section-head,
  .design-packages .design-section-head{
    max-width:560px!important;
    margin:0 auto 34px!important;
    text-align:center!important;
  }
  .setup-packages .setup-section-head>div,
  .design-packages .design-section-head>div{width:100%}
  .setup-packages .setup-section-head>p,
  .design-packages .design-section-head>p{
    max-width:390px!important;
    margin:14px auto 0!important;
    font-size:14px!important;
    line-height:1.55!important;
  }

  /* Homepage money story now reads inputs first, answer second. */
  .hero-stage{min-height:510px!important}
  .money-deck{
    inset:12px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:minmax(116px,.55fr) minmax(300px,1.45fr)!important;
    grid-template-areas:"cash commit" "safe safe"!important;
    gap:10px!important;
  }
  .micro-card{padding:14px!important;border-radius:16px!important;justify-content:center!important}
  .micro-card strong{font-size:18px!important;line-height:1.05!important}
  .micro-foot{font-size:8px!important;line-height:1.35!important}
  .micro-accent{left:14px!important;bottom:10px!important}
  .safe-card{padding:20px!important;border-radius:20px!important;min-height:0!important}
  .safe-copy{margin-top:auto!important;padding-top:20px!important}
  .safe-copy strong{font-size:40px!important;line-height:1!important}
  .safe-card p{font-size:10px!important;line-height:1.45!important}
  .safe-card-bottom{font-size:8.5px!important;gap:8px!important}

  /* Setup hero: one main product card, then two clean supporting cards. */
  .setup-visual{
    min-height:0!important;
    padding:12px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:auto 118px!important;
    grid-template-areas:"main main" "docone doctwo"!important;
    gap:10px!important;
  }
  .setup-file-card{
    min-height:350px!important;
    padding:18px!important;
    border-radius:20px!important;
  }
  .setup-doc{min-height:118px!important;padding:13px!important;border-radius:16px!important}
  .setup-doc strong{font-size:14px!important;line-height:1.15!important;margin-bottom:12px!important}

  /* Design hero: stacked modules mimic Hostinger's mobile card rhythm. */
  .design-stage{min-height:0!important;padding:12px!important;border-radius:22px!important}
  .design-deck{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    height:auto!important;
  }
  .design-card-brand,.design-card-sales,.design-card-social,.design-card-web{
    width:100%!important;
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:0!important;
    height:auto!important;
    padding:18px!important;
    border-radius:18px!important;
  }
  .design-card-brand{min-height:220px!important}
  .design-card-sales{min-height:200px!important}
  .design-card-social{min-height:180px!important}
  .design-card-web{min-height:220px!important}
  .design-brand-mark{font-size:78px!important;margin-block:18px!important}
  .sales-layout,.social-layout{margin-top:18px!important}
  .sales-layout strong{font-size:25px!important;line-height:1.05!important}
  .social-layout strong{font-size:26px!important;line-height:1.05!important}
  .web-browser{min-height:120px!important;margin-top:16px!important}
  .design-card-bottom{position:static!important;margin-top:auto!important;padding-top:16px!important}
  .design-card-bottom small{white-space:normal!important;line-height:1.35!important}

  /* Homepage service cards have enough room so art and copy never collide. */
  .service-card-grid{grid-template-columns:1fr!important;gap:14px!important}
  .path-card{
    min-height:500px!important;
    max-width:560px!important;
    width:100%!important;
    margin-inline:auto!important;
    padding:22px!important;
    text-align:left!important;
  }
  .path-card-copy{margin-top:34px!important}
  .path-card-copy p{margin-inline:0!important;max-width:340px!important}
  .setup-art,.design-art{height:190px!important;left:22px!important;right:22px!important;bottom:18px!important}

  /* Product panel becomes a simple text -> interface reading order. */
  .quinbis-product-panel{
    grid-template-columns:1fr!important;
    gap:26px!important;
    padding:24px 18px!important;
    text-align:left!important;
  }
  .quinbis-product-copy h3{font-size:38px!important;margin-inline:0!important}
  .quinbis-product-copy>p{margin-inline:0!important}
  .quinbis-product-actions{justify-content:flex-start!important}
  .product-money-row{align-items:flex-start!important}

  /* Insights: one complete card at a time; no partial or clipped neighbours. */
  .insight-grid{grid-template-columns:1fr!important;gap:16px!important}
  .insight-card{width:100%!important;max-width:560px!important;margin-inline:auto!important;overflow:hidden!important}
  .insight-art{height:210px!important}
}

@media (max-width:420px){
  .setup-package-card,.design-package-card{padding:21px!important;border-radius:20px!important}
  .package-card-top h3,.design-package-card h3{font-size:28px!important}
  .package-price strong,.design-package-price strong{font-size:34px!important}
  .hero-stage{min-height:495px!important}
  .safe-copy strong{font-size:36px!important}
  .setup-file-card{min-height:340px!important}
  .design-card-brand{min-height:205px!important}
  .design-card-sales{min-height:190px!important}
  .design-card-social{min-height:170px!important}
  .design-card-web{min-height:210px!important}
}