/* ==========================================================================
   fix-consistency.css — visual-consistency pass (2026-10-21)
   Cascade order (wired by parent): site.css -> fix-bugs.css ->
   fix-consistency.css -> fix-design.css -> fix-icons.css
   Brand DNA: purple #560591, Space Grotesk + Inter, NO gradients.
   Layout/paint only. Nothing here touches tool pages, ad slots, canonicals,
   JSON-LD, or sitemap markup. This file adds no transitions or animations,
   so prefers-reduced-motion needs no extra handling here.
   ========================================================================== */

/* --- 9. CTA audit: exactly ONE primary button visual language ----------------
   Audit of every CTA class on company pages (index, services/*, about,
   contact, solutions/*, faq, tools/index, portfolio/*, legal/*):
     .btn / .btn.btn-lg / .btn.nav-cta -> dark purple + white (primary)
     .btn.btn-light.btn-lg            -> white + purple, used ONLY inside dark
                                        .cta-final sections (contextual
                                        inversion, not a second language)
     .btn.btn-outline                 -> transparent secondary
     .cta-quiet / .go                 -> text-link secondary
   No lavender-filled button exists in this tree; this guard codifies the
   single primary language so no variant can drift, with zero HTML churn. */
.btn:not(.btn-light):not(.btn-outline){
  background:var(--purple);
  border-color:var(--purple);
  color:#fff;
}
.btn:not(.btn-light):not(.btn-outline):hover,
.btn:not(.btn-light):not(.btn-outline):focus-visible{
  background:var(--purple-deep);
  border-color:var(--purple-deep);
  color:#fff;
}

/* --- 11a + 11c. Folio cards: equal heights via grid stretch -----------------
   Success-story cards (index .folio.folio-3) and "Selected work" halves
   (index .folio .fp.half) stretch to the row height; inner flex column
   (.fp-body / .story-v flex:1 in site.css) pins footers to the bottom. */
.folio{align-items:stretch}
.folio .fp{height:100%}

/* --- 11b. Feature mini-cards (.vcards): equal heights via grid stretch ------
   ERP showcase cards ("Batches & expiry", "Farmer credit", "Counter billing",
   "Profit analysis") and the "Why Aizen Labs" cards stay in their planned
   2x2 grid; cards equalize within each row and footers align. */
.vcards{align-items:stretch}
.vcards .vcard{height:100%}

/* --- 12. Orphan-row locks: card counts that divide evenly -------------------
   index.html "Small tools, built properly." (4 cards, .tool-tiles) and
   tools/index.html "Templates & planners" (4 cards) lock to 4 / 2 / 1
   columns so a row never sits 2/3 empty (the old auto-fill rhythm produced
   a 3+1 orphan at ~860-1030px content widths). Other tool groups keep the
   fluid auto-fill grid because their card counts (3/5/6) don't divide by 4.
   4 columns need ~1028px of content (4x245px min + 3x16px gaps); .wrap
   carries 3rem of horizontal padding, hence the 1100px / 620px cutoffs. */
@media(min-width:1100px){
  .wrap .tool-tiles,
  #templates-planners .svc-rows{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:620px) and (max-width:1099.98px){
  .wrap .tool-tiles,
  #templates-planners .svc-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 8. graphic-design "What we do": uniform 5-card grid --------------------
   All five cards share one treatment (was: 1 full-width + 2x2). Planned
   rhythm, no orphaned half-columns at any width:
     760-1100px : 3 + 2 (full rows)
     >=1100px   : five equal columns
     <760px     : single-column stack (site.css default) */
@media(min-width:760px){
  .bento.bento-5 .btile{grid-column:span 2}
  .bento.bento-5 .btile:nth-child(n+4){grid-column:span 3}
}
@media(min-width:1100px){
  .bento.bento-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .bento.bento-5 .btile,
  .bento.bento-5 .btile:nth-child(n+4){grid-column:auto}
}