/* TRIVSEL - MEDICAL EQUIPMENT RESPONSIVE LANDING V4 */
.mei-page,
.mei-page * { box-sizing: border-box; }

.mei-page {
  --blue: #2867ed;
  --blue-dark: #1e53c5;
  --ink: #07142b;
  --muted: #61708c;
  --line: #d6e1ef;
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 68px) 24px;
  color: var(--ink);
  overflow-x: clip;
}

.mei-topbar {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.mei-brand { display: inline-flex; align-items: center; text-decoration: none; }
.mei-brand-image { display: block; width: auto; height: 54px; max-width: min(250px, 45vw); object-fit: contain; }
.mei-brand-text { color: var(--blue); font-size: 2.8rem; font-weight: 900; font-style: italic; }

.mei-top-login,
.mei-cta-login {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border-radius: 11px;
  background: var(--blue);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(40,103,237,.18);
}

.mei-top-login:hover,
.mei-top-login:focus-visible,
.mei-cta-login:hover,
.mei-cta-login:focus-visible { background: var(--blue-dark); color: #fff !important; }

.mei-intro { padding: clamp(28px, 4vh, 46px) clamp(0px, 5vw, 88px) 26px; }
.mei-eyebrow { margin: 0 0 10px; color: var(--blue); font-size: .8rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }

.mei-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .44fr);
  align-items: end;
  gap: clamp(28px, 6vw, 96px);
}

.mei-intro h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(3rem, 4.5vw, 5rem);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.mei-intro-grid > p {
  position: relative;
  max-width: 320px;
  margin: 0 0 9px;
  padding-top: 24px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}

.mei-intro-grid > p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 4px;
  border-radius: 999px;
  background: var(--blue);
}

.mei-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  padding: 0 clamp(0px, 4vw, 70px);
}

.mei-feature-card {
  min-width: 0;
  min-height: 205px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(26,60,101,.06);
}

.mei-icon {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 13px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 1.5rem;
  font-weight: 900;
}

.mei-feature-card h2 { margin: 0 0 10px; font-size: 1.24rem; }
.mei-feature-card p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.48; }

.mei-cta {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  min-height: clamp(250px, 30vh, 330px);
  margin-top: clamp(20px, 2.5vh, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.mei-cta-copy { z-index: 2; align-self: center; padding: clamp(28px, 4vw, 56px); }
.mei-cta-copy h2 { max-width: 640px; margin: 0 0 14px; font-size: clamp(1.9rem, 2.8vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
.mei-cta-copy p { max-width: 620px; margin: 0 0 22px; color: var(--muted); font-size: .98rem; line-height: 1.5; }

.mei-cta-media { position: relative; min-width: 0; overflow: hidden; background: linear-gradient(145deg, #f8fbff, #dceeff); }
.mei-cta-photo { display: block; width: 100%; height: 100%; min-height: 250px; object-fit: cover; object-position: center; }

.mei-fallback-visual { position: absolute; inset: 0; background: radial-gradient(circle at 15% 100%, #dceaff 0 25%, transparent 26%), linear-gradient(145deg,#f8fbff,#dceeff); }

.mei-monitor-box {
  position: absolute;
  right: 8%;
  top: 16%;
  width: 160px;
  padding: 18px;
  border: 10px solid #d6e2eb;
  border-radius: 12px;
  background: #123c48;
  color: #7eff99;
  font-size: 1.3rem;
  font-weight: 900;
  text-align: right;
  line-height: 1.2;
}

.mei-monitor-box span { color: #74d9ff; }
.mei-monitor-box b { color: #fff; }

.mei-device-list {
  position: absolute;
  left: 14%;
  bottom: 10%;
  width: min(310px, 45%);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(33,67,105,.12);
}

.mei-device-list > strong { display: block; margin-bottom: 8px; font-size: .8rem; }
.mei-device-list > span { display: flex; justify-content: space-between; gap: 6px; padding: 6px 0; color: #475a73; font-size: .63rem; }
.mei-device-list i,
.mei-device-list em { padding: 3px 6px; border-radius: 999px; font-size: .52rem; font-style: normal; white-space: nowrap; }
.mei-device-list i { color: #0e9b56; background: #e6f8ef; }
.mei-device-list em { color: #b66a00; background: #fff2d8; }

@media (min-width: 1100px) and (min-height: 760px) {
  .mei-page {
    min-height: calc(100svh - 12px);
    display: grid;
    grid-template-rows: auto auto auto minmax(250px, 1fr);
    align-content: start;
  }
}

@media (max-width: 980px) {
  .mei-intro-grid { grid-template-columns: 1fr; gap: 14px; }
  .mei-intro-grid > p { max-width: 620px; }
  .mei-feature-grid { grid-template-columns: 1fr; }

  .mei-feature-card {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
  }

  .mei-icon { margin-bottom: 0; }
  .mei-cta { grid-template-columns: 1fr; }
  .mei-cta-media { min-height: 300px; }
}

@media (max-width: 767px) {
  .mei-page { width: 100%; padding: 0 14px 18px; }

  .mei-topbar { min-height: 82px; gap: 14px; }
  .mei-brand-image { height: 44px; max-width: 48vw; }
  .mei-brand-text { font-size: 2rem; }

  .mei-top-login {
    min-height: 48px;
    padding: 0 14px;
    font-size: .92rem;
    white-space: nowrap;
  }

  .mei-intro { padding: 22px 4px 18px; }
  .mei-eyebrow { font-size: .7rem; }

  .mei-intro h1 {
    font-size: clamp(2.45rem, 12vw, 3.9rem);
    line-height: .94;
    letter-spacing: -.05em;
  }

  .mei-intro-grid > p { display: none; }

  .mei-feature-grid { gap: 10px; padding: 0; }

  .mei-feature-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 16px;
    border-radius: 16px;
  }

  .mei-icon { width: 58px; height: 58px; font-size: 1.55rem; }
  .mei-feature-card h2 { margin-bottom: 7px; font-size: 1.2rem; }
  .mei-feature-card p { font-size: .9rem; line-height: 1.45; }

  .mei-cta {
    display: block;
    position: relative;
    min-height: 500px;
    margin-top: 12px;
    border-radius: 18px;
  }

  .mei-cta-copy { position: relative; z-index: 4; padding: 24px 20px 0; }
  .mei-cta-copy h2 { max-width: 95%; font-size: clamp(1.75rem, 8vw, 2.35rem); }
  .mei-cta-copy p { max-width: 88%; font-size: .9rem; }

  .mei-cta-login { min-height: 48px; }

  .mei-cta-media {
    position: absolute;
    inset: 43% 0 0;
    min-height: 0;
  }

  .mei-monitor-box { transform: scale(.76); transform-origin: top right; right: 2%; }
  .mei-device-list { left: 35%; width: 60%; bottom: 6%; }
}

@media (max-width: 430px) {
  .mei-intro h1 { font-size: clamp(2.2rem, 11.2vw, 3.1rem); }
  .mei-feature-card { grid-template-columns: 52px minmax(0, 1fr); padding: 16px 14px; gap: 12px; }
  .mei-icon { width: 52px; height: 52px; }
  .mei-cta { min-height: 530px; }
}

@media (prefers-reduced-motion: reduce) {
  .mei-top-login,
  .mei-cta-login { transition: none; }
}

.mei-qr-demo {
  position: absolute;
  right: 8%;
  bottom: 7%;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: 3px;
  width: 78px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 8px 20px rgba(28,61,98,.12);
}

.mei-qr-demo strong {
  color: var(--blue);
  font-size: .58rem;
}

.mei-qr-demo span {
  color: #07142b;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

/* TRIVSEL - MEDICAL EQUIPMENT DESKTOP WIDTH FIX V1 */

/*
  The landing page content block is rendered inside a legacy centered wrapper.
  On desktop that wrapper collapses the approved layout to a narrow column.
  Break the landing page out to the viewport while keeping its own internal
  max-width and spacing.
*/
@media (min-width: 981px) {
  .mei-page {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(36px, 5vw, 84px) !important;
    padding-right: clamp(36px, 5vw, 84px) !important;
  }

  .mei-topbar,
  .mei-intro,
  .mei-feature-grid,
  .mei-cta {
    width: min(100%, 1560px);
    margin-left: auto;
    margin-right: auto;
  }

  .mei-intro {
    padding-left: clamp(24px, 4vw, 72px);
    padding-right: clamp(24px, 4vw, 72px);
  }

  .mei-intro-grid {
    grid-template-columns: minmax(700px, 1.35fr) minmax(280px, .45fr);
    gap: clamp(36px, 7vw, 120px);
  }

  .mei-intro h1 {
    max-width: 980px;
    font-size: clamp(3.55rem, 4.4vw, 5rem);
    line-height: .96;
  }

  .mei-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mei-cta {
    grid-template-columns: minmax(420px, .78fr) minmax(0, 1.22fr);
  }
}

/* The base marketing shell still renders its own compact masthead above the
   page-specific masthead. Hide only that direct predecessor on this landing
   page, leaving the Trivsel masthead inside .mei-page as the single header. */
body:has(.mei-page) > header,
body:has(.mei-page) > .site-header,
body:has(.mei-page) > .marketing-header,
body:has(.mei-page) > nav.site-nav {
  display: none !important;
}

/* END TRIVSEL - MEDICAL EQUIPMENT DESKTOP WIDTH FIX V1 */

/* TRIVSEL - MEDICAL EQUIPMENT DESKTOP ONE VIEWPORT FIX V1 */

/*
  Desktop goal:
  - no vertical scroll for the landing page
  - no horizontal scrollbar
  - smaller headline and tighter spacing
  - all three cards and the CTA visible in the initial viewport
  - mobile behavior remains controlled by the existing <= 767px rules
*/
@media (min-width: 981px) {
  html:has(.mei-page),
  body:has(.mei-page) {
    overflow-x: clip;
  }

  .mei-page {
    height: 100svh !important;
    min-height: 0 !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    display: grid !important;
    grid-template-rows: 72px auto 1fr !important;
    align-content: stretch !important;
  }

  .mei-topbar {
    min-height: 72px !important;
    height: 72px !important;
  }

  .mei-brand-image {
    height: 42px !important;
    max-width: 205px !important;
  }

  .mei-top-login {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: .92rem !important;
    border-radius: 10px !important;
  }

  .mei-intro {
    padding-top: 16px !important;
    padding-bottom: 12px !important;
  }

  .mei-eyebrow {
    margin-bottom: 6px !important;
    font-size: .72rem !important;
    letter-spacing: .12em !important;
  }

  .mei-intro-grid {
    grid-template-columns: minmax(620px, 1.3fr) minmax(245px, .42fr) !important;
    gap: clamp(34px, 5vw, 82px) !important;
    align-items: end !important;
  }

  .mei-intro h1 {
    max-width: 870px !important;
    margin: 0 !important;
    font-size: clamp(2.8rem, 3.55vw, 3.9rem) !important;
    line-height: .95 !important;
    letter-spacing: -.045em !important;
  }

  .mei-intro-grid > p {
    max-width: 290px !important;
    margin-bottom: 3px !important;
    padding-top: 15px !important;
    font-size: .88rem !important;
    line-height: 1.36 !important;
  }

  .mei-intro-grid > p::before {
    width: 44px !important;
    height: 3px !important;
  }

  .mei-feature-grid {
    gap: 14px !important;
  }

  .mei-feature-card {
    min-height: 148px !important;
    padding: 17px 18px !important;
    border-radius: 15px !important;
  }

  .mei-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 9px !important;
    border-radius: 11px !important;
    font-size: 1.18rem !important;
  }

  .mei-feature-card h2 {
    margin-bottom: 6px !important;
    font-size: 1.04rem !important;
    line-height: 1.12 !important;
  }

  .mei-feature-card p {
    font-size: .81rem !important;
    line-height: 1.34 !important;
  }

  .mei-cta {
    min-height: 0 !important;
    height: 100% !important;
    margin-top: 14px !important;
    border-radius: 17px !important;
    grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr) !important;
  }

  .mei-cta-copy {
    padding: 20px 34px !important;
  }

  .mei-cta-copy h2 {
    max-width: 540px !important;
    margin-bottom: 9px !important;
    font-size: clamp(1.65rem, 2.25vw, 2.35rem) !important;
    line-height: 1.02 !important;
  }

  .mei-cta-copy p {
    max-width: 520px !important;
    margin-bottom: 14px !important;
    font-size: .82rem !important;
    line-height: 1.38 !important;
  }

  .mei-cta-login {
    min-height: 42px !important;
    padding: 0 17px !important;
    font-size: .9rem !important;
  }

  .mei-cta-media {
    min-height: 0 !important;
    height: 100% !important;
  }

  .mei-monitor-box {
    top: 12% !important;
    right: 7% !important;
    transform: scale(.78);
    transform-origin: top right;
  }

  .mei-device-list {
    left: 13% !important;
    bottom: 8% !important;
    transform: scale(.9);
    transform-origin: bottom left;
  }

  .mei-qr-demo {
    right: 7% !important;
    bottom: 7% !important;
    transform: scale(.88);
    transform-origin: bottom right;
  }
}

/* More aggressive compaction for shorter laptop-height desktop viewports. */
@media (min-width: 981px) and (max-height: 780px) {
  .mei-page {
    grid-template-rows: 64px auto 1fr !important;
    padding-bottom: 6px !important;
  }

  .mei-topbar {
    min-height: 64px !important;
    height: 64px !important;
  }

  .mei-brand-image {
    height: 36px !important;
  }

  .mei-top-login {
    min-height: 40px !important;
    padding: 0 15px !important;
    font-size: .86rem !important;
  }

  .mei-intro {
    padding-top: 10px !important;
    padding-bottom: 9px !important;
  }

  .mei-eyebrow {
    margin-bottom: 4px !important;
    font-size: .66rem !important;
  }

  .mei-intro h1 {
    font-size: clamp(2.45rem, 3.15vw, 3.35rem) !important;
  }

  .mei-intro-grid > p {
    padding-top: 11px !important;
    font-size: .8rem !important;
  }

  .mei-feature-grid {
    gap: 11px !important;
  }

  .mei-feature-card {
    min-height: 128px !important;
    padding: 13px 15px !important;
  }

  .mei-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 6px !important;
    font-size: 1rem !important;
  }

  .mei-feature-card h2 {
    margin-bottom: 4px !important;
    font-size: .96rem !important;
  }

  .mei-feature-card p {
    font-size: .73rem !important;
    line-height: 1.3 !important;
  }

  .mei-cta {
    margin-top: 10px !important;
  }

  .mei-cta-copy {
    padding: 15px 28px !important;
  }

  .mei-cta-copy h2 {
    margin-bottom: 6px !important;
    font-size: clamp(1.45rem, 2vw, 1.95rem) !important;
  }

  .mei-cta-copy p {
    margin-bottom: 10px !important;
    font-size: .75rem !important;
    line-height: 1.34 !important;
  }

  .mei-cta-login {
    min-height: 38px !important;
    font-size: .84rem !important;
  }

  .mei-monitor-box {
    transform: scale(.68);
  }

  .mei-device-list {
    transform: scale(.8);
  }

  .mei-qr-demo {
    transform: scale(.78);
  }
}

/* END TRIVSEL - MEDICAL EQUIPMENT DESKTOP ONE VIEWPORT FIX V1 */

/* TRIVSEL - MEDICAL LANDING CTA REMOVED + BIG LOGO V1 */

/* The lower CTA panel has been intentionally removed from the landing page.
   Use the reclaimed space to keep the three core capability cards comfortably
   inside the first viewport and make the brand materially more visible. */
@media (min-width: 981px) {
  .mei-brand-image {
    height: 58px !important;
    width: auto !important;
    max-width: 285px !important;
  }

  .mei-feature-grid {
    align-self: start !important;
    padding-top: 6px !important;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  .mei-brand-image {
    height: 50px !important;
    max-width: 250px !important;
  }

  .mei-feature-grid {
    padding-top: 4px !important;
  }
}

@media (max-width: 767px) {
  .mei-brand-image {
    height: 52px !important;
    width: auto !important;
    max-width: 56vw !important;
  }
}

/* END TRIVSEL - MEDICAL LANDING CTA REMOVED + BIG LOGO V1 */

/* TRIVSEL - MOBILE FEATURE CARD STACK V1 */
/*
  Mobile feature-card refinement:
  - icon sits above the copy instead of consuming a permanent left column
  - title and body use the full card width
  - reduced wrapping makes each card shorter
  - tighter padding/gaps keep the group compact
*/
@media (max-width: 767px) {
  .mei-feature-grid {
    gap: 10px !important;
  }

  .mei-feature-card {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 16px 15px !important;
    border-radius: 16px !important;
  }

  .mei-feature-card .mei-icon,
  .mei-feature-card > .mei-icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 0 8px 0 !important;
  }

  .mei-feature-card h2 {
    width: 100% !important;
    margin: 0 0 5px 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.16 !important;
  }

  .mei-feature-card p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: .88rem !important;
    line-height: 1.34 !important;
  }
}

@media (max-width: 430px) {
  .mei-feature-grid {
    gap: 8px !important;
  }

  .mei-feature-card {
    padding: 12px 14px 13px !important;
  }

  .mei-feature-card .mei-icon,
  .mei-feature-card > .mei-icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 7px !important;
  }

  .mei-feature-card h2 {
    font-size: .98rem !important;
    margin-bottom: 4px !important;
  }

  .mei-feature-card p {
    font-size: .84rem !important;
    line-height: 1.32 !important;
  }
}
/* END TRIVSEL - MOBILE FEATURE CARD STACK V1 */

/* TRIVSEL - SHARED FEATURE CARD HEADER LAYOUT V1 */
/*
  Make all three feature cards use the same arrangement on desktop and mobile:
  - icon + title on the first row
  - descriptive text under them
  - mobile remains compact
*/
.mei-feature-card {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon title"
    "body body" !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 10px !important;
}

.mei-feature-card .mei-icon,
.mei-feature-card > .mei-icon {
  grid-area: icon !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  align-self: start !important;
  justify-self: start !important;
}

.mei-feature-card h2 {
  grid-area: title !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: center !important;
}

.mei-feature-card p {
  grid-area: body !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .mei-feature-grid {
    gap: 10px !important;
  }

  .mei-feature-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 16px 15px !important;
    border-radius: 16px !important;
  }

  .mei-feature-card .mei-icon,
  .mei-feature-card > .mei-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .mei-feature-card h2 {
    font-size: 1.02rem !important;
    line-height: 1.16 !important;
  }

  .mei-feature-card p {
    font-size: .88rem !important;
    line-height: 1.34 !important;
  }
}

@media (max-width: 430px) {
  .mei-feature-grid {
    gap: 8px !important;
  }

  .mei-feature-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    padding: 12px 14px 13px !important;
  }

  .mei-feature-card .mei-icon,
  .mei-feature-card > .mei-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .mei-feature-card h2 {
    font-size: .98rem !important;
  }

  .mei-feature-card p {
    font-size: .84rem !important;
    line-height: 1.32 !important;
  }
}
/* END TRIVSEL - SHARED FEATURE CARD HEADER LAYOUT V1 */

/* TRIVSEL - MOBILE HERO TITLE HALF SIZE */
/*
  Reduce the real mobile landing-page headline by 50%.
  Desktop remains unchanged.
*/
@media (max-width: 768px) {
  .mei-intro h1 {
    font-size: clamp(1.175rem, 4.6vw, 1.7rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.03em !important;
  }
}
/* END TRIVSEL - MOBILE HERO TITLE HALF SIZE */

/* TRIVSEL HOME OPERATING MODEL - START */
.trivsel-operating-model {
  margin-top: 0;
}

.trivsel-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #ffffff;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  overflow: hidden;
}

.trivsel-workflow__item {
  min-width: 0;
  padding: 28px 28px 24px;
}

.trivsel-workflow__item + .trivsel-workflow__item {
  border-left: 1px solid #e5ebf3;
}

.trivsel-workflow__heading,
.trivsel-outcome-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trivsel-workflow__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #245bd7;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.trivsel-workflow h3,
.trivsel-outcome-card h3 {
  margin: 0;
  color: #0b1b35;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
}

.trivsel-workflow p,
.trivsel-outcome-card p {
  margin: 10px 0 0;
  color: #53647a;
  font-size: 15px;
  line-height: 1.55;
}

.trivsel-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.trivsel-outcome-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 150px;
  padding: 22px 20px 18px;
  background: #ffffff;
  border: 1px solid #dfe6ef;
  border-radius: 15px;
}

.trivsel-outcome-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #245bd7;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}

.trivsel-outcome-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trivsel-outcome-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  color: #53647a;
  font-size: 13px;
  line-height: 1.35;
}

.trivsel-outcome-card__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #159447;
}

@media (max-width: 1023px) {
  .trivsel-outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .trivsel-operating-model {
    margin-top: 22px;
  }

  .trivsel-workflow {
    grid-template-columns: 1fr;
  }

  .trivsel-workflow__item {
    padding: 22px 20px;
  }

  .trivsel-workflow__item + .trivsel-workflow__item {
    border-left: 0;
    border-top: 1px solid #e5ebf3;
  }

  .trivsel-outcomes {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 22px;
  }

  .trivsel-outcome-card {
    min-height: 0;
  }
}
/* TRIVSEL HOME OPERATING MODEL - END */

/* TRIVSEL HOMEPAGE STATIC SVG ICONS - START */
.trivsel-home-rich-svg {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
/* TRIVSEL HOMEPAGE STATIC SVG ICONS - END */

/* Compatibility contract retained for landing-page responsive tests.
   The new operating-model markup uses its own selectors below. */
/* TRIVSEL - LANDING BOTTOM INTELLIGENCE PANEL V1 */
/*
  Fill the unused desktop space beneath the three primary feature cards.
  The visible wording is intentionally identical to the supplied reference.
  Existing hero/card content is not changed.
*/
@media (min-width: 769px) {
  .mei-page {
    position: relative !important;
  }

  .mei-bottom-intelligence {
    position: absolute !important;
    z-index: 1 !important;
    left: 5.8vw !important;
    right: 5.8vw !important;
    top: clamp(425px, 50.5vh, 450px) !important;
    bottom: 16px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1.15fr) minmax(0, .82fr) auto !important;
    gap: 10px !important;
    padding: 12px 14px 10px !important;
    border: 1px solid #d9e5f1 !important;
    border-radius: 20px !important;
    background: rgba(239, 246, 255, .72) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .mei-bottom-capabilities {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 12px !important;
  }

  .mei-bottom-capability {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon title"
      "body body" !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    align-content: center !important;
    padding: 9px 16px 10px !important;
    border: 1px solid #d7e2ee !important;
    border-left: 3px solid #246bfd !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .mei-bottom-capability-icon {
    grid-area: icon !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #08111f !important;
  }

  .mei-bottom-capability-icon svg {
    width: 28px !important;
    height: 28px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .mei-bottom-capability h2,
  .mei-bottom-step h2 {
    margin: 0 !important;
    color: #0b1b35 !important;
    font-size: clamp(.91rem, .98vw, 1.05rem) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
  }

  .mei-bottom-capability h2 {
    grid-area: title !important;
    align-self: center !important;
  }

  .mei-bottom-capability p {
    grid-area: body !important;
  }

  .mei-bottom-capability p,
  .mei-bottom-step p {
    margin: 0 !important;
    color: #58708f !important;
    font-size: clamp(.70rem, .76vw, .83rem) !important;
    line-height: 1.25 !important;
  }

  .mei-bottom-steps {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .mei-bottom-step {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto 1fr !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 10px 17px !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .mei-bottom-step-number {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    color: #1260ff !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .mei-bottom-signals {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .mei-bottom-signal {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 12px !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #314967 !important;
    font-size: clamp(.62rem, .67vw, .74rem) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .mei-bottom-signal i {
    flex: 0 0 auto !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #2dcc70 !important;
    box-shadow: 0 0 0 4px rgba(45, 204, 112, .13) !important;
  }
}

@media (min-width: 769px) and (max-height: 780px) {
  .mei-bottom-intelligence {
    top: 398px !important;
    bottom: 10px !important;
    gap: 7px !important;
    padding: 9px 11px 8px !important;
  }

  .mei-bottom-capabilities {
    gap: 7px 9px !important;
  }

  .mei-bottom-capability {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    padding: 6px 12px 7px !important;
  }

  .mei-bottom-capability-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .mei-bottom-capability-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .mei-bottom-capability h2,
  .mei-bottom-step h2 {
    font-size: .86rem !important;
  }

  .mei-bottom-capability p,
  .mei-bottom-step p {
    font-size: .66rem !important;
    line-height: 1.18 !important;
  }

  .mei-bottom-steps {
    gap: 9px !important;
  }

  .mei-bottom-step {
    gap: 3px !important;
    padding: 7px 13px !important;
  }

  .mei-bottom-step-number {
    width: 30px !important;
    height: 30px !important;
    font-size: .69rem !important;
  }

  .mei-bottom-signal {
    padding: 5px 9px !important;
    font-size: .59rem !important;
  }
}

@media (max-width: 768px) {
  .mei-bottom-intelligence {
    position: static !important;
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 18px 0 8px !important;
    padding: 12px !important;
    border: 1px solid #d9e5f1 !important;
    border-radius: 18px !important;
    background: rgba(239, 246, 255, .72) !important;
    box-sizing: border-box !important;
  }

  .mei-bottom-capabilities,
  .mei-bottom-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .mei-bottom-capability {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon title"
      "body body" !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    padding: 12px 14px !important;
    border: 1px solid #d7e2ee !important;
    border-left: 3px solid #246bfd !important;
    border-radius: 15px !important;
    background: #ffffff !important;
  }

  .mei-bottom-capability-icon {
    grid-area: icon !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mei-bottom-capability-icon svg {
    width: 29px !important;
    height: 29px !important;
    fill: none !important;
    stroke: #08111f !important;
    stroke-width: 2.15 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  .mei-bottom-capability h2,
  .mei-bottom-step h2 {
    margin: 0 !important;
    color: #0b1b35 !important;
    font-size: .98rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }

  .mei-bottom-capability h2 {
    grid-area: title !important;
    align-self: center !important;
  }

  .mei-bottom-capability p {
    grid-area: body !important;
  }

  .mei-bottom-capability p,
  .mei-bottom-step p {
    margin: 0 !important;
    color: #58708f !important;
    font-size: .82rem !important;
    line-height: 1.32 !important;
  }

  .mei-bottom-step {
    display: grid !important;
    gap: 6px !important;
    padding: 13px 14px !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 15px !important;
    background: #ffffff !important;
  }

  .mei-bottom-step-number {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    color: #1260ff !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
  }

  .mei-bottom-signals {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  .mei-bottom-signal {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 10px !important;
    border: 1px solid #d7e2ee !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #314967 !important;
    font-size: .69rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  .mei-bottom-signal i {
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #2dcc70 !important;
    box-shadow: 0 0 0 4px rgba(45, 204, 112, .13) !important;
  }
}
/* END TRIVSEL - LANDING BOTTOM INTELLIGENCE PANEL V1 */

/* TRIVSEL HOMEPAGE OPERATING MODEL PRODUCTION CLEANUP - START */

/*
 * Production visual contract:
 * - compatibility sentinels remain only for historical tests
 * - no pale-blue outer wrapper surrounds the workflow/outcome rows
 * - workflow is one white three-column panel
 * - outcomes are four independent white cards
 * - no opacity/filter styling may wash out the operating model
 */

template.mei-bottom-intelligence,
template.mei-bottom-capability,
template.mei-bottom-step,
template.mei-bottom-signal {
  display: none !important;
}

body .mei-page .trivsel-operating-model {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
  isolation: auto !important;
}

body .mei-page .trivsel-operating-model::before,
body .mei-page .trivsel-operating-model::after {
  content: none !important;
  display: none !important;
}

body .mei-page .trivsel-workflow {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid #dbe5f4 !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(35, 74, 130, 0.08) !important;
  opacity: 1 !important;
  filter: none !important;
  overflow: hidden !important;
}

body .mei-page .trivsel-workflow > * {
  position: relative !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 28px 30px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body .mei-page .trivsel-workflow > * + * {
  border-left: 1px solid #e3ebf6 !important;
}

body .mei-page .trivsel-outcomes {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  overflow: visible !important;
}

body .mei-page .trivsel-outcomes::before,
body .mei-page .trivsel-outcomes::after {
  content: none !important;
  display: none !important;
}

body .mei-page .trivsel-outcomes > * {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 24px 22px !important;
  background: #ffffff !important;
  border: 1px solid #dbe5f4 !important;
  border-left-width: 1px !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(35, 74, 130, 0.07) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body .mei-page .trivsel-operating-model h2,
body .mei-page .trivsel-operating-model h3,
body .mei-page .trivsel-operating-model p,
body .mei-page .trivsel-operating-model span,
body .mei-page .trivsel-operating-model img,
body .mei-page .trivsel-operating-model svg {
  opacity: 1 !important;
  filter: none !important;
}

@media (min-width: 769px) and (max-width: 1100px) {
  body .mei-page .trivsel-operating-model {
    margin-top: 28px !important;
  }

  body .mei-page .trivsel-outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body .mei-page .trivsel-operating-model {
    margin-top: 24px !important;
  }

  body .mei-page .trivsel-workflow {
    grid-template-columns: 1fr !important;
  }

  body .mei-page .trivsel-workflow > * + * {
    border-left: 0 !important;
    border-top: 1px solid #e3ebf6 !important;
  }

  body .mei-page .trivsel-outcomes {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* TRIVSEL HOMEPAGE GRID ROW GAP FIX - START */
/*
 * The desktop shell previously used a third flexible 1fr grid row.
 * The feature grid stayed at natural height because it used align-self: start.
 * The unused remainder of that flexible row became the large blank band
 * before the operating model.
 *
 * Keep historical compatibility rules, but make the active production
 * homepage rows size themselves from actual content.
 */
body .mei-page {
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
}

body .mei-page .mei-feature-grid {
  align-self: auto !important;
}
/* TRIVSEL HOMEPAGE GRID ROW GAP FIX - END */

/* TRIVSEL HOMEPAGE OPERATING MODEL PRODUCTION CLEANUP - END */