/* inovasys.io (31 Oct 2026): what the site adds to the shared components of inovasys.ma / inovasys.ai (site.css).
   One rule for every block: the message on the left, cards on the right two by two, cards of one row the same height,
   the same section padding on every page, and one height for the inner-page heads at a given width. */

/* ── Home hero: dark navy, the message and the map of the seven solutions ── */
.io-hero { background: var(--navy-deep); color: var(--inverse-ink); padding: var(--space-8) 0; }
.io-hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1024px) { .io-hero { padding: var(--space-9) 0; } .io-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: var(--space-8); } }
.io-hero h1 { font-size: clamp(2.25rem, 1.1rem + 2.7vw, 3.75rem); line-height: 1.05; max-width: 14ch; }
.io-hero .lede { margin-top: var(--space-5); font-size: var(--fs-lede); color: var(--inverse-ink-2); max-width: 36rem; }
.io-hero .cta-row { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cm-cap { color: #EEF0F2; font: inherit; text-align: left; cursor: pointer; }
.cm-systems li { color: #EEF0F2; }
.cm-hub { border: 1px solid #2A4258; background: #173049; }

/* ── Inner-page heads: copy on the left, the product drawing on the right; one height at a given width ── */
.io-head { background: var(--navy-deep); color: var(--inverse-ink); }
.io-head-grid { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-8); }
@media (min-width: 1024px) { .io-head-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); min-height: 34rem; padding-block: var(--space-8); } }
.io-k { font: 600 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--inverse-accent); margin-bottom: var(--space-4); }
.io-head h1 { font-size: clamp(2.25rem, 1.1rem + 2.7vw, 3.5rem); line-height: 1.05; max-width: 16ch; }
.io-head .lede { margin-top: var(--space-5); font-size: var(--fs-lede); color: var(--inverse-ink-2); max-width: 36rem; }
.io-head .cta-row { margin-top: var(--space-6); }
.io-head-art { margin: 0; justify-self: center; width: min(100%, 26rem); aspect-ratio: 1; display: grid; place-items: center; background: #E6EDF8; border-radius: 18px; overflow: hidden; }
.io-head-art img { width: 88%; height: auto; }
@media (max-width: 1023px) { .io-head-art { width: min(100%, 18rem); } }
/* the head copy area keeps one height below 1024 px too, so every page starts its first block at the same place */
@media (max-width: 1023px) { .io-head-copy { min-height: 21rem; } }
@media (max-width: 479px) { .io-head-copy { min-height: 25rem; } }

/* ── Cards: one row, one height; a wide card for an illustration ── */
.ind-cards { align-items: stretch; }
.ind-cards:has(> .case) { align-items: start; }
.ind-card { height: 100%; }
@media (min-width: 640px) { .ind-card.span-2 { grid-column: 1 / -1; } }
.ind-card.io-art { padding: 0; overflow: hidden; background: #F0F2EF; }
.ind-card.io-art img { display: block; width: 100%; height: auto; }
.ind-card .need-sols { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--space-2); }
.ind-card .need-sols .label { display: inline; }
.ind-card .hand { font-size: var(--fs-small); }
.ind-card .hand .label { display: block; margin-bottom: 2px; }
.ind-cta .road li { color: var(--inverse-ink-2); }
.ind-cta .road b { color: #FFFFFF; font-weight: 600; margin-right: 4px; }
.logo-wall .logo-txt { font: 600 .9375rem/1.3 var(--font-body); color: var(--ink-2); text-align: center; }
/* the same vertical rhythm for every block of the three sites */
main > .section { padding-block: var(--section); }
/* one head height per width on every page (measured on the longest lede, WINS / OCR Agent, 31 Oct 2026) */
@media (min-width: 1280px) { .io-head-grid { min-height: 38rem; } }
@media (min-width: 1024px) and (max-width: 1279px) { .io-head-grid { min-height: 56rem; } .io-head-art { width: min(100%, 20rem); } }
@media (max-width: 1023px) { .io-head-copy { min-height: 27rem; } }
@media (max-width: 767px) { .io-head-copy { min-height: 28rem; } }
@media (max-width: 479px) { .io-head-copy { min-height: 31rem; } }
/* partners and technologies: the Microsoft logo, then name tiles, all the same size */
.logo-wall.partners { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .logo-wall.partners { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* "Coming soon" pages (31 Oct 2026): a tag in the head, the same blocks as the other solutions */
.soon-tag { display: inline-block; margin-left: 10px; padding: 4px 10px; border: 1px solid var(--inverse-accent); border-radius: 999px; font-size: .6875rem; letter-spacing: .08em; color: var(--inverse-accent); vertical-align: 1px; }
.soon-block .ind-card h3 { font-size: 1.125rem; }