/* MES page additions. Scoped to .solution-mes-page only. */
.solution-mes-page .mes-product-intro {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: .5rem;
}
.solution-mes-page .mes-product-copy { min-width: 0; }
.solution-mes-page .mes-product-copy p { max-width: 760px; line-height: 1.8; }
.solution-mes-page .mes-brand-panel {
  min-width: 0; align-self: center; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: .85rem; padding: clamp(1.2rem, 2.5vw, 2rem); border-radius: 1.1rem;
  border: 1px solid rgba(74,98,138,.2); background: #F7F8FC; box-shadow: 0 12px 30px rgba(23,32,51,.08);
}
.solution-mes-page .mes-brand-panel img { display: block; width: min(100%, 310px); height: auto; object-fit: contain; }
.solution-mes-page .mes-brand-panel p { margin: 0; text-align: center; color: #41536B; font-size: .92rem; line-height: 1.5; }
.solution-mes-page .mes-brand-points { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .25rem; }
.solution-mes-page .mes-brand-points span { display: inline-flex; align-items: center; padding: .33rem .62rem; border: 1px solid rgba(8,126,172,.22); border-radius: 999px; color: #245575; background: rgba(255,255,255,.65); font-size: .78rem; line-height: 1.3; }

.solution-mes-page .mes-section-intro { max-width: 880px; margin: 0 0 1.5rem; line-height: 1.75; }
.solution-mes-page .mes-module-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; gap: 1rem; margin-top: 1.5rem;
}
.solution-mes-page .mes-module-card {
  grid-column: span 3; min-width: 0; position: relative; padding: 1.25rem 1.3rem 1.35rem; overflow: hidden;
  background: rgba(255,255,255,.76); border: 1px solid rgba(74,98,138,.2); border-radius: .95rem;
  box-shadow: 0 7px 20px rgba(23,32,51,.055); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.solution-mes-page .mes-module-card h3 { margin: .35rem 0 .55rem; color: #172033; font-size: 1.05rem; font-weight: 650; line-height: 1.35; }
.solution-mes-page .mes-module-card p { margin: 0; color: #35465d; font-size: .93rem; line-height: 1.65; }
.solution-mes-page .mes-module-kicker { color: #087EAC; font-size: .73rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.solution-mes-page .mes-module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #087EAC, #50BFD2); opacity: .75; }
.solution-mes-page .mes-module-card:nth-child(5) { grid-column: 2 / span 3; }
.solution-mes-page .mes-module-card:nth-child(6) { grid-column: 5 / span 3; }
.solution-mes-page .mes-module-card:nth-child(7) { grid-column: 8 / span 3; }
@media (hover: hover) and (pointer: fine) {
 .solution-mes-page .mes-module-card:hover { transform: translateY(-3px); border-color: rgba(8,126,172,.48); background: rgba(255,255,255,.94); box-shadow: 0 12px 26px rgba(8,126,172,.11); }
}

.solution-mes-page .mes-existing-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.solution-mes-page .mes-existing-card { min-width: 0; padding: clamp(1.2rem, 2.5vw, 1.75rem); background: rgba(255,255,255,.74); border: 1px solid rgba(74,98,138,.2); border-radius: 1rem; }
.solution-mes-page .mes-existing-card h3 { margin: 0 0 .65rem; color: #172033; font-size: 1.12rem; line-height: 1.4; }
.solution-mes-page .mes-existing-card p { margin: 0; color: #35465d; line-height: 1.72; }

.solution-mes-page .mes-architecture { margin-top: 1.75rem; padding: clamp(1rem, 2.5vw, 1.8rem); border: 1px solid rgba(74,98,138,.2); border-radius: 1.2rem; background: rgba(255,255,255,.52); }
.solution-mes-page .mes-flow-stack { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; max-width: 940px; margin: 0 auto; }
.solution-mes-page .mes-flow-node { min-width: 0; padding: 1rem 1.2rem; text-align: center; background: rgba(255,255,255,.84); border: 1px solid rgba(74,98,138,.26); border-radius: .8rem; }
.solution-mes-page .mes-flow-node h3 { margin: 0 0 .35rem; color: #172033; font-size: 1.08rem; line-height: 1.4; }
.solution-mes-page .mes-flow-node p { margin: 0; color: #41536B; font-size: .92rem; line-height: 1.55; }
.solution-mes-page .mes-flow-label { display: block; margin-bottom: .3rem; color: #087EAC; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.solution-mes-page .mes-flow-connector { display: flex; justify-content: center; align-items: center; min-height: 2.15rem; color: #087EAC; font-size: 1.5rem; line-height: 1; }
.solution-mes-page .mes-protocol-tags, .solution-mes-page .mes-output-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin-top: .75rem; }
.solution-mes-page .mes-protocol-tags span, .solution-mes-page .mes-output-tags span { display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: .35rem; background: #E8F1F7; color: #254964; font-size: .8rem; line-height: 1.3; }
.solution-mes-page .mes-architecture-choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.solution-mes-page .mes-architecture-option { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 130px; padding: 1.1rem; text-align: center; background: #142D46; color: #fff; border: 1px solid rgba(80,191,210,.55); border-radius: .9rem; }
.solution-mes-page .mes-architecture-option h3 { margin: 0 0 .4rem; color: #fff; font-size: 1.07rem; line-height: 1.35; }
.solution-mes-page .mes-architecture-option p { max-width: 440px; margin: 0; color: #D7E7F2; font-size: .9rem; line-height: 1.55; }
.solution-mes-page .mes-architecture-option.secondary { background: #F7F8FC; color: #172033; border-color: rgba(74,98,138,.27); }
.solution-mes-page .mes-architecture-option.secondary h3 { color: #172033; }
.solution-mes-page .mes-architecture-option.secondary p { color: #41536B; }
.solution-mes-page .mes-architecture-note { max-width: 940px; margin: 1rem auto 0; color: #41536B; font-size: .9rem; line-height: 1.6; text-align: center; }

.solution-mes-page .mes-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1.3rem; }
.solution-mes-page .mes-related-card { text-decoration: none; }
.solution-mes-page .mes-related-card:focus-visible { outline: 2px solid #087EAC; outline-offset: 3px; }

@media (min-width: 1000.01px) and (max-width: 1350px) {
 .solution-mes-page .navigation a.site-language-switcher { min-width: 3.25rem; padding-inline: .38rem; }
}
@media (max-width: 1050px) {
 .solution-mes-page .mes-module-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .solution-mes-page .mes-module-card, .solution-mes-page .mes-module-card:nth-child(5), .solution-mes-page .mes-module-card:nth-child(6), .solution-mes-page .mes-module-card:nth-child(7) { grid-column: auto; }
}
@media (max-width: 900px) {
 .solution-mes-page .mes-product-intro { grid-template-columns: minmax(0,1fr); }
 .solution-mes-page .mes-brand-panel { min-height: 0; }
 .solution-mes-page .mes-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .solution-mes-page .mes-related-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 767.98px) {
 .solution-mes-page .mes-module-grid, .solution-mes-page .mes-existing-grid, .solution-mes-page .mes-architecture-choices { grid-template-columns: minmax(0,1fr); }
 .solution-mes-page .mes-module-card, .solution-mes-page .mes-module-card:nth-child(5), .solution-mes-page .mes-module-card:nth-child(6), .solution-mes-page .mes-module-card:nth-child(7) { grid-column: auto; }
 .solution-mes-page .mes-architecture { padding: .8rem; }
 .solution-mes-page .mes-flow-node { padding: .9rem .75rem; }
 .solution-mes-page .mes-brand-panel { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
 .solution-mes-page .site-language-switcher, .solution-mes-page .mes-module-card { transition: none !important; }
}


/* v2: selected, explicitly illustrative MachFlow interface showcases. */
.solution-mes-page .mes-interface-section .mes-section-intro { max-width: 920px; }
.solution-mes-page .mes-interface-figure { margin: 1.3rem 0 0; padding: clamp(.5rem, 1.2vw, .85rem); background: #061B2E; border: 1px solid rgba(8,126,172,.26); border-radius: 1rem; box-shadow: 0 16px 38px rgba(5,20,36,.14); overflow: hidden; }
.solution-mes-page .mes-interface-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; object-position: center; border-radius: .6rem; }
.solution-mes-page .mes-interface-figure figcaption { padding: .65rem .4rem .2rem; color: #B7C9D8; text-align: center; font-size: .82rem; line-height: 1.5; }
.solution-mes-page .mes-interface-disclaimer { margin: .8rem auto 0; color: #5B6C80; text-align: center; font-size: .82rem; line-height: 1.5; }
.solution-mes-page .mes-ui-preview { overflow: hidden; margin-top: 1.5rem; border: 1px solid rgba(39,180,218,.34); border-radius: 1.05rem; background: #041629; color: #E6F2FC; box-shadow: 0 16px 36px rgba(5,20,36,.16); }
.solution-mes-page .mes-ui-topbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 1rem; padding: .9rem 1rem; background: linear-gradient(110deg,#06182C,#09233B); border-bottom: 1px solid rgba(25,183,225,.24); }
.solution-mes-page .mes-ui-brand { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.solution-mes-page .mes-ui-brand img { display: block; width: 150px; max-width: 100%; height: auto; border-radius: .25rem; }
.solution-mes-page .mes-ui-brand span { color: #39CDEB; font-size: .67rem; font-weight: 800; letter-spacing: .12em; }
.solution-mes-page .mes-ui-screen-title { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.solution-mes-page .mes-ui-screen-title strong { color: #F3F8FC; font-size: 1rem; line-height: 1.3; }
.solution-mes-page .mes-ui-screen-title small { color: #8CA9C2; font-size: .76rem; line-height: 1.3; }
.solution-mes-page .mes-ui-filter { display: flex; flex-direction: column; gap: .14rem; min-width: 98px; padding: .42rem .62rem; border: 1px solid rgba(111,165,200,.24); border-radius: .48rem; background: rgba(9,43,69,.75); }
.solution-mes-page .mes-ui-filter span { color: #7D9BB6; font-size: .61rem; font-weight: 700; letter-spacing: .08em; }
.solution-mes-page .mes-ui-filter strong { color: #E3EFF8; font-size: .75rem; font-weight: 600; }
.solution-mes-page .mes-ui-body { padding: clamp(.6rem, 1.4vw, 1rem); }
.solution-mes-page .mes-ui-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .68rem; }
.solution-mes-page .mes-ui-kpi { position: relative; min-width: 0; min-height: 116px; padding: .85rem .9rem .8rem; border: 1px solid rgba(28,153,205,.25); border-radius: .7rem; background: linear-gradient(145deg,rgba(9,36,60,.97),rgba(4,23,41,.96)); }
.solution-mes-page .mes-ui-kpi > span { display: block; color: #A9C5DA; font-size: .77rem; line-height: 1.35; }
.solution-mes-page .mes-ui-kpi > strong { display: block; margin-top: .35rem; color: #F5FAFE; font-size: clamp(1.35rem,2.3vw,2rem); font-weight: 750; line-height: 1.15; letter-spacing: -.03em; }
.solution-mes-page .mes-ui-kpi > strong small { color: #A9C5DA; font-size: .75rem; letter-spacing: 0; }
.solution-mes-page .mes-ui-kpi > em { display: block; margin-top: .3rem; color: #55D8B0; font-size: .65rem; font-style: normal; }
.solution-mes-page .mes-ui-percent { color: #F5FAFE; font-size: .8em; }
.solution-mes-page .mes-ui-mini-bars { display: flex; align-items: end; justify-content: flex-end; gap: 3px; height: 26px; margin-top: -1.65rem; opacity: .82; }
.solution-mes-page .mes-ui-mini-bars i { display: block; width: 5px; min-height: 4px; border-radius: 2px 2px 0 0; background: #11BFEA; }
.solution-mes-page .mes-ui-progress { height: 5px; margin-top: .62rem; overflow: hidden; border-radius: 999px; background: #183951; }
.solution-mes-page .mes-ui-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#087EAC,#29D0E8); }
.solution-mes-page .mes-ui-chart-row { display: grid; grid-template-columns: 1.12fr .88fr; gap: .68rem; margin-top: .68rem; }
.solution-mes-page .mes-ui-panel { min-width: 0; overflow: hidden; padding: .8rem .85rem .75rem; border: 1px solid rgba(28,153,205,.22); border-radius: .7rem; background: linear-gradient(145deg,rgba(7,31,53,.97),rgba(4,22,40,.96)); }
.solution-mes-page .mes-ui-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-bottom: .7rem; }
.solution-mes-page .mes-ui-panel-head strong { color: #D9EAF6; font-size: .84rem; font-weight: 650; line-height: 1.35; }
.solution-mes-page .mes-ui-panel-head > span { color: #7699B6; font-size: .66rem; white-space: nowrap; }
.solution-mes-page .mes-ui-bar-chart { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: .42rem; height: 138px; padding-top: .2rem; background-image: repeating-linear-gradient(to bottom,transparent 0,transparent 33px,rgba(78,131,164,.18) 34px); }
.solution-mes-page .mes-ui-ylabels { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: .1rem; color: #7798B2; font-size: .59rem; text-align: right; }
.solution-mes-page .mes-ui-bars { display: flex; align-items: end; justify-content: space-around; gap: .28rem; height: 100%; border-bottom: 1px solid rgba(100,155,187,.35); }
.solution-mes-page .mes-ui-bars i { flex: 1; display: block; max-width: 26px; min-height: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#1BC4EB,#0877D7); box-shadow: 0 0 12px rgba(0,173,232,.12); }
.solution-mes-page .mes-ui-xlabels { display: flex; justify-content: space-between; gap: .2rem; margin: .42rem 0 0 2.35rem; color: #7C9CB4; font-size: .57rem; }
.solution-mes-page .mes-ui-line-chart { position: relative; height: 138px; overflow: hidden; border-bottom: 1px solid rgba(100,155,187,.35); }
.solution-mes-page .mes-ui-gridlines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.solution-mes-page .mes-ui-gridlines i { display: block; width: 100%; border-top: 1px solid rgba(78,131,164,.18); }
.solution-mes-page .mes-ui-line-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.solution-mes-page .mes-ui-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .52rem; color: #96B1C6; font-size: .65rem; }
.solution-mes-page .mes-ui-legend span { display: inline-flex; align-items: center; gap: .28rem; }
.solution-mes-page .mes-ui-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.solution-mes-page .mes-ui-legend .legend-oee { background: #31D6AC; }
.solution-mes-page .mes-ui-legend .legend-availability { background: #18BCEB; }
.solution-mes-page .mes-ui-legend .legend-quality { background: #9B7CF4; }
.solution-mes-page .mes-ui-bottom-row { display: grid; grid-template-columns: 1fr .85fr; gap: .68rem; margin-top: .68rem; }
.solution-mes-page .mes-ui-status-table > div { display: grid; grid-template-columns: .55fr .8fr 1fr; align-items: center; gap: .6rem; min-width: 0; padding: .48rem .25rem; border-top: 1px solid rgba(78,131,164,.17); color: #C8DCEB; font-size: .68rem; }
.solution-mes-page .mes-ui-status-table > div:first-child { padding-top: .1rem; border-top: 0; color: #7899B2; font-size: .63rem; }
.solution-mes-page .mes-ui-status-table span { min-width: 0; }
.solution-mes-page .mes-ui-status-table span:last-child { display: flex; align-items: center; gap: .42rem; }
.solution-mes-page .mes-ui-status-table span:last-child i { display: inline-block; flex: 0 1 70px; height: 5px; border-radius: 999px; background: linear-gradient(90deg,#087EAC,#19C3E8); }
.solution-mes-page .mes-ui-status-table span:last-child small { color: #AFC7D9; font-size: .63rem; }
.solution-mes-page .mes-ui-running { color: #35D9A4; }
.solution-mes-page .mes-ui-stopped { color: #FFC95B; }
.solution-mes-page .mes-ui-loss-body { display: flex; align-items: center; justify-content: space-around; gap: .7rem; min-height: 122px; }
.solution-mes-page .mes-ui-donut { display: grid; flex: 0 0 112px; width: 112px; height: 112px; place-items: center; border-radius: 50%; background: conic-gradient(#10BDE8 0 33%,#2CD6A6 33% 55%,#FFC857 55% 69%,#F36E63 69% 83%,#4472C4 83% 100%); }
.solution-mes-page .mes-ui-donut > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: #071B2F; }
.solution-mes-page .mes-ui-donut strong { color: #F0F8FE; font-size: .91rem; }
.solution-mes-page .mes-ui-donut small { margin-top: .1rem; color: #8AAAC3; font-size: .57rem; }
.solution-mes-page .mes-ui-loss-body ul { display: flex; flex: 1; flex-direction: column; gap: .52rem; margin: 0; padding: 0; list-style: none; color: #B7CCDC; font-size: .65rem; }
.solution-mes-page .mes-ui-loss-body li { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: .35rem; }
.solution-mes-page .mes-ui-loss-body li i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.solution-mes-page .mes-ui-loss-body li b { color: #E2EFF8; font-size: .66rem; font-weight: 650; }
.solution-mes-page .mes-ui-loss-body .loss-planned { background: #10BDE8; }
.solution-mes-page .mes-ui-loss-body .loss-fault { background: #F36E63; }
.solution-mes-page .mes-ui-loss-body .loss-material { background: #FFC857; }
.solution-mes-page .mes-ui-loss-body .loss-other { background: #9B7CF4; }

@media (max-width: 960px) {
 .solution-mes-page .mes-ui-topbar { grid-template-columns: auto minmax(0,1fr); }
 .solution-mes-page .mes-ui-filter { display: none; }
 .solution-mes-page .mes-ui-chart-row { grid-template-columns: minmax(0,1fr); }
 .solution-mes-page .mes-ui-bottom-row { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
 .solution-mes-page .mes-ui-brand img { width: 120px; }
 .solution-mes-page .mes-ui-screen-title strong { font-size: .88rem; }
 .solution-mes-page .mes-ui-screen-title small { font-size: .68rem; }
 .solution-mes-page .mes-ui-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
 .solution-mes-page .mes-ui-kpi { min-height: 102px; padding: .7rem; }
 .solution-mes-page .mes-ui-kpi > span { font-size: .69rem; }
 .solution-mes-page .mes-ui-kpi > strong { font-size: 1.45rem; }
 .solution-mes-page .mes-ui-mini-bars { margin-top: .25rem; justify-content: flex-start; height: 18px; }
 .solution-mes-page .mes-ui-panel { padding: .65rem; }
 .solution-mes-page .mes-ui-panel-head { align-items: flex-start; flex-direction: column; gap: .15rem; }
 .solution-mes-page .mes-ui-panel-head strong { font-size: .78rem; }
 .solution-mes-page .mes-ui-panel-head > span { font-size: .63rem; }
 .solution-mes-page .mes-ui-loss-body { justify-content: flex-start; gap: .8rem; }
 .solution-mes-page .mes-ui-donut { flex-basis: 88px; width: 88px; height: 88px; }
 .solution-mes-page .mes-ui-donut > div { width: 56px; height: 56px; }
 .solution-mes-page .mes-ui-donut strong { font-size: .78rem; }
 .solution-mes-page .mes-ui-loss-body ul { font-size: .6rem; }
}


/* v3: white-backed MachSoft wordmark in the illustrative MES interface. */
.solution-mes-page .mes-ui-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.68rem .9rem; background:linear-gradient(110deg,#06182C,#09233B); border-top:1px solid rgba(25,183,225,.24); }
.solution-mes-page .mes-ui-footer > span { color:#7899B2; font-size:.62rem; line-height:1.4; letter-spacing:.08em; }
.solution-mes-page .mes-ui-poweredby { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; }
.solution-mes-page .mes-ui-poweredby > span { color:#8CA9C2; font-size:.58rem; font-weight:750; letter-spacing:.1em; white-space:nowrap; }
.solution-mes-page .mes-ui-poweredby-logo { display:flex; align-items:center; justify-content:center; min-width:130px; min-height:30px; padding:.28rem .55rem; border:1px solid rgba(10,55,98,.10); border-radius:.4rem; background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.12); }
.solution-mes-page .mes-ui-poweredby-logo img { display:block; width:112px; max-width:100%; height:auto; object-fit:contain; }
@media (max-width:640px) {
 .solution-mes-page .mes-ui-footer { align-items:flex-start; flex-direction:column; gap:.5rem; padding:.65rem .75rem; }
 .solution-mes-page .mes-ui-poweredby { align-self:flex-end; }
 .solution-mes-page .mes-ui-poweredby-logo { min-width:112px; min-height:27px; }
 .solution-mes-page .mes-ui-poweredby-logo img { width:96px; }
}