/* Model page additions. Loaded after styles.css. */
.hero--model {
  background:#eef3f8
}

.hero__shade--model {
  background:linear-gradient(90deg,rgba(238,243,248,.98) 0%,rgba(238,243,248,.78) 17%,rgba(238,243,248,.05) 38%),linear-gradient(0deg,rgba(238,243,248,.94) 0%,rgba(238,243,248,.10) 31%,rgba(238,243,248,0) 54%)
}
.page--model {
  padding-top:clamp(56px,7vw,88px)
}

.article--wide {
  width:min(100%,1080px)
}

.model-intro {
  max-width:920px;
  margin:32px 0 58px;
  color:#3f4a58;
  font-size:clamp(1.03rem,1.45vw,1.16rem)
}
.model-section {
  margin-top:62px
}

.model-section h2 {
  margin:0 0 14px;
  color:#192d47;
  font-size:clamp(1.55rem,2.7vw,2.2rem);
  line-height:1.2
}

.model-section h3 {
  margin:0 0 14px;
  color:#1d385b;
  font-size:1.16rem
}

.model-section>p {
  max-width:900px;
  margin:0 0 24px;
  font-size:clamp(1rem,1.3vw,1.08rem)
}
.process-flow,.funnel {
  max-width:800px;
  margin:34px auto 0
}

.process-row--split {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px
}

.process-plus,.process-arrow {
  color:#466b98;
  font-size:1.45rem;
  font-weight:700;
  text-align:center
}

.process-box,.funnel-step {
  border:1px solid #cbd8e7;
  border-radius:10px;
  background:#f3f7fb;
  color:#193452;
  font-weight:680;
  text-align:center
}

.process-box {
  padding:17px 20px
}

.process-box--wide {
  width:100%;
  margin:0 auto
}

.process-box--final {
  background:#254e83;
  color:#fff;
  border-color:#254e83
}
.funnel-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:30px
}

.factor-card {
  padding:24px;
  border:1px solid #d3deea;
  border-radius:12px;
  background:#f8fafc
}

.factor-card p {
  margin:8px 0
}

.factor-total {
  margin-top:18px!important;
  color:#243b57;
  font-weight:650
}

.factor-distinct {
  color:#49637f
}

.funnel-step {
  padding:16px 20px
}

.funnel-step strong,.funnel-step span {
  display:block
}

.funnel-step span {
  margin-top:3px;
  color:#526579;
  font-weight:450
}
.constraint-list {
  max-width:900px;
  margin:26px 0
}

.constraint-list p {
  margin:10px 0;
  padding:12px 15px;
  border-left:3px solid #b45151;
  background:#faf7f7
}

.constraint-list span {
  margin-right:10px;
  color:#a33f3f;
  font-weight:800
}

.model-section--closing {
  padding-top:6px;
  border-top:1px solid #dce3ea
}

@media (max-width: 720px) {
  .hero--model {
    min-height: 220px;
    background: #eef3f8;
  }

  .hero--model picture {
    position: static;
    display: contents;
  }

  .hero--model .hero__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
  }

  .hero--model .brand {
    display: none;
  }

  .hero--model .site-nav {
    left: 20px;
    right: 20px;
    bottom: 18px;
    width: auto;
    transform: none;
    justify-content: flex-start;
    gap: 22px;
    padding: 12px 4px 3px;
    background: transparent;
  }

  .hero__shade--model {
    background:
      linear-gradient(
        90deg,
        rgba(238, 243, 248, 0.90) 0%,
        rgba(238, 243, 248, 0.35) 42%,
        rgba(238, 243, 248, 0.05) 100%
      ),
      linear-gradient(
        0deg,
        rgba(238, 243, 248, 0.96) 0%,
        rgba(238, 243, 248, 0.12) 35%,
        rgba(238, 243, 248, 0) 60%
      );
  }

  .page--model {
    padding-top: 62px;
  }

  .funnel-grid,
  .process-row--split {
    grid-template-columns: 1fr;
  }

  .process-plus {
    line-height: 1;
  }

  .model-section {
    margin-top: 48px;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero--model {
    min-height: 220px;
  }

  .hero--model .hero__background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero--model .site-nav {
    bottom: 18px;
  }

  .page--model {
    padding-top: 56px;
  }
}