/* Screen 5 styles moved out of JavaScript. */

.history h2 {
  color: #071326;
  font-family: var(--font-body);
  font-weight: 840;
  letter-spacing: 0;
}

.history h2 span:not(.history-title__nowrap) {
  color: #008747;
}

.history-title__nowrap {
  color: #071326 !important;
  white-space: normal;
}

.history .eyebrow {
  display: flex;
  align-items: center;
}

.history .eyebrow::before {
  content: "";
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 3px;
  background: currentColor;
}

.history__visual {
  pointer-events: none;
}

.history-dashboard {
  clip-path: inset(0 0 8.5% 0 round 8px);
}

@media (min-width: 741px) and (max-width: 1240px) {
  .history {
      min-height: 100vh;
      min-height: 100svh;
    }

  .history::before,
    .history::after {
      display: none;
    }

  .history .molecule--tr {
      top: 8px;
      right: -34px;
      width: clamp(180px, 26vw, 260px);
      opacity: 0.2;
    }

  .history .molecule--bl {
      left: 42px;
      bottom: -42px;
      width: clamp(150px, 22vw, 220px);
      opacity: 0.18;
      transform: scaleY(0.72);
      transform-origin: left top;
    }

  .history__inner {
      display: grid;
      grid-template-columns: minmax(270px, 0.72fr) minmax(380px, 1.28fr);
      grid-template-areas:
        "copy visual"
        "details visual";
      gap: clamp(16px, 2vw, 24px) clamp(28px, 4vw, 50px);
      align-items: start;
      width: 100%;
      max-width: 1180px;
      min-height: 100vh;
      min-height: 100svh;
      margin: 0 auto;
      padding: clamp(38px, 5.8vh, 48px) clamp(20px, 3.4vw, 44px) clamp(24px, 3.4vw, 42px);
      overflow: hidden;
    }

  .history__copy {
      position: static;
      grid-area: copy;
      width: auto;
      max-width: 410px;
    }

  .history .eyebrow {
      gap: 14px;
      margin: 0 0 clamp(18px, 2.2vw, 26px);
      font-size: clamp(12px, 1.32vw, 15px);
      line-height: 1.18;
    }

  .history .eyebrow::before {
      flex: 0 0 clamp(38px, 4.6vw, 52px);
      width: clamp(38px, 4.6vw, 52px);
      height: 2px;
    }

  .history h2 {
      max-width: 430px;
      font-size: clamp(38px, 5vw, 58px);
      line-height: 1.06;
    }

  .history .lead {
      width: auto;
      max-width: 390px;
      margin-top: clamp(18px, 2.4vw, 28px);
      color: rgba(48, 65, 89, 0.86);
      font-family: var(--font-body);
      font-size: clamp(16px, 1.8vw, 19px);
      line-height: 1.48;
    }

  .history__visual {
      position: relative;
      grid-area: visual;
      display: block;
      width: 100%;
      height: auto;
      min-height: 0;
      align-self: start;
    }

  .history-dashboard {
      position: relative;
      inset: auto;
      display: block;
      width: 100%;
      max-width: none;
      clip-path: inset(0 0 8.5% 0 round 8px);
    }

  .history-chart {
      position: relative;
      inset: auto;
      z-index: 2;
      display: block;
      width: min(64%, 430px);
      max-width: none;
      margin: clamp(-58px, -5.2vw, -36px) 2% 0 auto;
    }

  .history__details {
      position: static;
      grid-area: details;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-self: start;
      gap: clamp(10px, 1.3vw, 15px);
      width: 100%;
      max-width: 390px;
      margin: 0;
      padding: 0;
    }

  .history .feature-row {
      position: relative;
      display: grid;
      grid-template-columns: clamp(44px, 4.8vw, 54px) minmax(0, 1fr);
      gap: clamp(11px, 1.3vw, 16px);
      align-items: start;
      min-height: 0;
      max-width: none;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

  .history .feature-row:not(:last-child)::after {
      content: none;
    }

  .history .feature-row > div {
      padding-top: 1px;
    }

  .history .feature-row .icon-card {
      width: clamp(44px, 4.8vw, 54px);
      height: clamp(44px, 4.8vw, 54px);
      border: 0;
      border-radius: 8px;
      background: rgba(226, 246, 237, 0.88);
    }

  .history .feature-row .icon-card svg {
      width: clamp(22px, 2.45vw, 28px);
      height: clamp(22px, 2.45vw, 28px);
    }

  .history .feature-row h3 {
      color: #071326;
      font-family: var(--font-body);
      font-size: clamp(17px, 1.9vw, 22px);
      font-weight: 800;
      line-height: 1.18;
    }

  .history .feature-row p {
      margin-top: 4px;
      color: rgba(48, 65, 89, 0.78);
      font-size: clamp(13px, 1.45vw, 16px);
      line-height: 1.34;
    }
}

@media (min-width: 1241px) and (max-height: 860px) {
  .history .molecule--tr {
      top: 0;
      right: -22px;
      width: min(18vw, 250px);
      opacity: 0.2;
    }

  .history .molecule--bl {
      left: 4vw;
      bottom: -38px;
      width: min(15vw, 210px);
      opacity: 0.18;
      transform: scaleY(0.72);
      transform-origin: left top;
    }

  .history__inner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(520px, 0.78fr) minmax(610px, 1.22fr);
      grid-template-areas:
        "copy visual"
        "details visual";
      gap: clamp(14px, 2.1vh, 22px) clamp(34px, 4vw, 66px);
      align-content: start;
      align-items: start;
      width: 100%;
      max-width: 1460px;
      min-height: 100vh;
      min-height: 100svh;
      margin: 0 auto;
      padding: clamp(44px, 6.1vh, 52px) clamp(32px, 3.8vw, 56px) clamp(14px, 2.2vh, 22px);
      overflow: hidden;
    }

  .history__copy {
      position: static;
      grid-area: copy;
      width: auto;
      max-width: 620px;
    }

  .history .eyebrow {
      gap: clamp(14px, 1.2vw, 18px);
      margin: 0 0 clamp(18px, 3.2vh, 30px);
      font-size: clamp(14px, min(1.1vw, 2.2vh), 18px);
      line-height: 1.16;
    }

  .history .eyebrow::before {
      flex: 0 0 clamp(44px, 4vw, 62px);
      width: clamp(44px, 4vw, 62px);
      height: 2px;
    }

  .history h2 {
      max-width: 620px;
      color: #071326;
      font-size: clamp(46px, min(3.85vw, 6vh), 54px);
      line-height: 1.08;
    }

  .history-title__nowrap {
      white-space: nowrap;
    }

  .history h2 span {
      color: #008747;
    }

  .history .lead {
      width: auto;
      max-width: 520px;
      margin-top: clamp(18px, 3vh, 28px);
      color: rgba(48, 65, 89, 0.86);
      font-size: clamp(17px, min(1.45vw, 2.65vh), 22px);
      line-height: 1.48;
    }

  .history__visual {
      position: relative;
      grid-area: visual;
      inset: auto;
      display: block;
      width: 100%;
      height: clamp(430px, 62vh, 500px);
      min-height: 0;
      align-self: start;
    }

  .history-dashboard {
      position: absolute;
      top: 0;
      right: 0;
      bottom: auto;
      left: auto;
      display: block;
      width: min(100%, 860px);
      max-width: none;
      margin-left: auto;
      clip-path: inset(0 0 8.5% 0 round 8px);
    }

  .history-chart {
      position: absolute;
      top: clamp(318px, 43.8vh, 368px);
      right: 2%;
      bottom: auto;
      left: auto;
      z-index: 2;
      display: block;
      width: min(56%, 500px);
      max-width: none;
      margin: 0;
    }

  .history__details {
      position: static;
      grid-area: details;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-self: start;
      gap: clamp(8px, 1.2vh, 12px);
      width: 100%;
      max-width: 430px;
      margin: 0;
      padding: 0;
    }

  .history .feature-row {
      position: relative;
      display: grid;
      grid-template-columns: clamp(46px, min(3.8vw, 7.4vh), 56px) minmax(0, 1fr);
      gap: clamp(12px, 1.15vw, 18px);
      align-items: start;
      min-height: 0;
      max-width: none;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

  .history .feature-row > div {
      padding-top: 0;
    }

  .history .feature-row .icon-card {
      width: clamp(46px, min(3.8vw, 7.4vh), 56px);
      height: clamp(46px, min(3.8vw, 7.4vh), 56px);
      border: 0;
      border-radius: 8px;
      background: rgba(226, 246, 237, 0.88);
    }

  .history .feature-row .icon-card svg {
      width: clamp(23px, min(2.2vw, 3.7vh), 29px);
      height: clamp(23px, min(2.2vw, 3.7vh), 29px);
    }

  .history .feature-row h3 {
      color: #071326;
      font-family: var(--font-body);
      font-size: clamp(18px, min(1.42vw, 2.55vh), 22px);
      font-weight: 800;
      line-height: 1.18;
    }

  .history .feature-row p {
      margin-top: 4px;
      color: rgba(48, 65, 89, 0.78);
      font-size: clamp(13px, min(1.02vw, 1.9vh), 15.5px);
      line-height: 1.34;
    }
}

@media (max-width: 740px) {
  .history__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "copy"
        "visual"
        "features";
      gap: 22px;
      width: 100%;
      max-width: 100%;
      min-height: auto;
      padding: 54px 20px 58px;
      overflow: hidden;
    }

  .history__copy {
      position: static;
      grid-area: copy;
      width: 100%;
      max-width: none;
    }

  .history .eyebrow {
      display: flex;
      gap: 12px;
      margin: 0 0 17px;
      font-size: 13px;
      line-height: 1.16;
    }

  .history .eyebrow::before {
      flex: 0 0 40px;
      width: 40px;
      height: 2px;
    }

  .history h2 {
      max-width: 100%;
      color: #071326;
      font-family: var(--font-body);
      font-size: clamp(30px, 8.7vw, 38px);
      font-weight: 840;
      line-height: 1.09;
    }

  .history .lead {
      width: 100%;
      margin-top: 20px;
      color: rgba(48, 65, 89, 0.86);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.52;
    }

  .history__visual {
      position: static;
      grid-area: visual;
      display: block;
      width: min(94%, 340px);
      height: auto;
      min-height: 0;
      justify-self: center;
      margin: -2px auto 0;
    }

  .history-chart {
      position: relative;
      inset: auto;
      z-index: 2;
      display: block;
      width: 96%;
      max-width: none;
      margin: -34px auto 0;
    }

  .history__details {
      position: static;
      grid-area: features;
      display: grid;
      gap: 12px;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0;
    }

  .history .feature-row {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      min-height: 0;
      padding: 14px;
      border: 1px solid rgba(169, 218, 197, 0.68);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 14px 30px rgba(27, 75, 60, 0.07);
    }

  .history .feature-row .icon-card {
      width: 52px;
      height: 52px;
      border-radius: 8px;
    }

  .history .feature-row .icon-card svg {
      width: 28px;
      height: 28px;
    }

  .history .feature-row h3 {
      color: #071326;
      font-family: var(--font-body);
      font-size: 20px;
      font-weight: 800;
      line-height: 1.16;
    }

  .history .feature-row p {
      margin-top: 6px;
      color: rgba(48, 65, 89, 0.78);
      font-size: 15.5px;
      line-height: 1.38;
    }
}

.history,
.history__copy,
.history__details {
  font-family: var(--font-body);
  letter-spacing: 0;
}

.history .feature-row h3 {
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: 0;
}

.history .feature-row p {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.42;
}

@media (min-width: 741px) {
  .history__inner {
      container-type: inline-size;
    }

  .history__details {
      width: 26cqw;
      max-width: none;
      gap: 0.95cqw;
    }

  .history .feature-row {
      position: relative;
      display: grid;
      grid-template-columns: 4.25cqw minmax(0, 1fr);
      align-items: start;
      gap: 1.33cqw;
      min-height: 6.45cqw;
      max-width: none;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

  .history .feature-row::before,
    .history .feature-row:not(:last-child)::after {
      content: none;
    }

  .history .feature-row > div {
      min-width: 0;
      padding-top: 0.47cqw;
    }

  .history .feature-row .icon-card {
      width: 4.25cqw;
      height: 4.25cqw;
      min-width: 0;
      min-height: 0;
      border: 0;
      border-radius: 0.9cqw;
      background: rgba(226, 246, 237, 0.88);
    }

  .history .feature-row .icon-card svg {
      width: 2.18cqw;
      height: 2.18cqw;
      stroke-width: 2.05;
    }

  .history .feature-row h3 {
      margin: 0;
      color: #071326;
      font-size: clamp(17px, 1.12vw, 20.5px);
    }

  .history .feature-row p {
      margin: 0.58cqw 0 0;
      color: rgba(48, 65, 89, 0.86);
      font-size: clamp(16.5px, 1.08vw, 20px);
    }
}

@media (max-width: 740px) {
  .history__details {
      grid-area: features;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 100%;
      max-width: 440px;
      justify-self: center;
    }

  .history .feature-row {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: start;
      column-gap: 12px;
      max-width: none;
      min-width: 0;
      min-height: 0;
      padding: 12px 14px;
      border: 1px solid rgba(7, 84, 61, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.66);
      box-shadow: 0 13px 26px rgba(27, 75, 60, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
      overflow: hidden;
    }

  .history .feature-row::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(180deg, rgba(0, 121, 67, 0.76), rgba(117, 196, 157, 0.12));
    }

  .history .feature-row .icon-card {
      grid-column: 1;
      width: 38px;
      height: 38px;
      min-width: 0;
      min-height: 0;
    }

  .history .feature-row .icon-card svg {
      width: 21px;
      height: 21px;
    }

  .history .feature-row > div {
      grid-column: 2;
      min-width: 0;
      padding-top: 0;
    }

  .history .feature-row h3 {
      margin: 0;
      color: var(--green, #07543d);
      font-size: 18px;
      line-height: 1.22;
    }

  .history .feature-row p {
      margin: 5px 0 0;
      color: var(--muted, rgba(21, 33, 29, 0.66));
      font-size: 14px;
      line-height: 1.36;
      overflow-wrap: break-word;
    }
}

/* Screen 5 overrides migrated from the former combined screen CSS. */

.history__inner {
  display: grid;
  grid-template-columns: minmax(620px, 0.78fr) minmax(680px, 1fr);
  grid-template-areas:
    "copy visual"
    "details visual";
  gap: 34px clamp(42px, 4.4vw, 72px);
  align-content: center;
  align-items: center;
}

.history__copy {
  grid-area: copy;
}

.history__visual {
  grid-area: visual;
}

.history__visual {
  min-height: 600px;
}

.history-dashboard {
  position: absolute;
  top: 4%;
  right: 0;
  width: min(100%, 804px);
}

.history-chart {
  position: absolute;
  right: 1%;
  bottom: 7%;
  width: min(61%, 493px);
}

.history h2 {
  max-width: 710px;
}

.history__details {
  grid-area: details;
}

@media (max-width: 1240px) {
  .history__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
          "copy"
          "visual"
          "features"
          "actions";
        gap: 36px;
      }

  .history__details {
        grid-area: features;
      }

  .history__visual {
        width: min(980px, 100%);
      }
}

@media (min-width: 741px) {
  .history {
        display: block;
        min-height: 100vh;
        min-height: 100svh;
      }

  .history::before {
        display: none;
      }

  .history::after {
        display: none;
      }

  .history .molecule--tr {
        top: 1.2vh;
        right: 0.8vw;
        width: min(19.5vw, 262px);
        opacity: 0.22;
      }

  .history .molecule--bl {
        left: 3.6vw;
        bottom: -3.5vh;
        width: min(16.8vw, 225px);
        opacity: 0.22;
        transform: translateY(11px) scaleY(0.72);
        transform-origin: left top;
      }

  .history__inner {
        position: relative;
        display: block;
        width: 100vw;
        max-width: none;
        min-height: 100vh;
        min-height: 100svh;
        padding: 0;
        overflow: hidden;
      }

  .history__copy {
        position: absolute;
        left: 2.65vw;
        top: 5.35vh;
        width: 46vw;
        max-width: none;
      }

  .history .eyebrow {
        margin: 0 0 4.8vh;
        gap: 1.12vw;
        font-size: clamp(13px, min(1.08vw, 2.28vh), 20px);
        line-height: 1.16;
      }

  .history .eyebrow::before {
        flex-basis: 3.08vw;
        width: 3.08vw;
        height: 0.36vh;
        min-height: 2px;
      }

  .history h2 {
        max-width: 49vw;
        color: #0a1324;
        font-family: var(--font-body);
        font-size: clamp(38px, min(3.78vw, 6.75vh), 50px);
        font-weight: 840;
        line-height: 1.28;
      }

  .history .lead {
        width: 31.2vw;
        margin-top: 3.2vh;
        font-size: clamp(16px, min(1.38vw, 2.55vh), 21px);
        line-height: 1.5;
      }

  .history__visual {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        pointer-events: none;
      }

  .history .product-shot {
        filter: drop-shadow(0 24px 46px rgba(31, 47, 64, 0.08));
      }

  .history-dashboard {
        position: absolute;
        top: 12.7vh;
        left: 48.5vw;
        right: auto;
        width: 48.9vw;
        max-width: none;
      }

  .history-chart {
        position: absolute;
        left: 67.75vw;
        right: auto;
        top: 66.7vh;
        bottom: auto;
        width: 29.7vw;
        max-width: none;
      }

  .history__details {
        position: absolute;
        left: 2.65vw;
        top: 49.8vh;
        display: grid;
        gap: 2.7vh;
        width: 30.2vw;
        max-width: none;
      }

  .history .feature-row {
        position: relative;
        align-items: start;
        grid-template-columns: clamp(50px, min(4.45vw, 9.4vh), 84px) 1fr;
        gap: clamp(18px, 1.55vw, 30px);
        min-height: 10vh;
        border-bottom: 0;
        padding-bottom: 0;
      }

  .history .feature-row:not(:last-child)::after {
        content: "";
        position: absolute;
        left: calc(clamp(50px, min(4.45vw, 9.4vh), 84px) + clamp(18px, 1.55vw, 30px));
        right: 1.6vw;
        bottom: 0;
        height: 1px;
        background: rgba(197, 210, 208, 0.72);
      }

  .history .feature-row > div {
        padding-top: 1.35vh;
      }

  .history .feature-row .icon-card {
        width: clamp(50px, min(4.45vw, 9.4vh), 84px);
        height: clamp(50px, min(4.45vw, 9.4vh), 84px);
        border-radius: 8px;
      }

  .history .feature-row .icon-card svg {
        width: clamp(28px, min(2.45vw, 5.2vh), 46px);
        height: clamp(28px, min(2.45vw, 5.2vh), 46px);
      }

  .history .feature-row h3 {
        font-size: clamp(18px, min(1.42vw, 3vh), 27px);
        line-height: 1.2;
      }

  .history .feature-row p {
        margin-top: 0.85vh;
        font-size: clamp(14px, min(1.12vw, 2.35vh), 21px);
        line-height: 1.38;
      }
}

@media (max-width: 740px) {
  .history__inner {
        grid-template-areas:
          "copy"
          "visual"
          "features"
          "actions";
      }

  .history__visual {
        grid-area: visual;
        width: 100%;
        min-height: 0;
      }

  .history__visual {
        display: grid;
        gap: 14px;
      }

  .history-dashboard,
  .history-chart {
        position: static;
        width: 100%;
        transform: none;
      }
}

.history h2 {
  font-size: clamp(36px, 3.2vw, 60px);
  line-height: 0.94;
}

.history .lead {
  color: rgba(28, 39, 37, 0.74);
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 23px);
  line-height: 1.45;
}

.history h2 {
  color: #071326;
  font-family: var(--font-body);
  font-weight: 840;
  letter-spacing: 0;
}

@media (min-width: 741px) and (max-width: 1240px) {
  .history__inner {
        display: grid;
        grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
        grid-template-areas:
          "copy visual"
          "details visual";
        gap: clamp(28px, 3.4vw, 44px) clamp(32px, 4.4vw, 60px);
        align-items: start;
        width: 100%;
        max-width: 1180px;
        min-height: 100vh;
        min-height: 100svh;
        margin: 0 auto;
        padding: clamp(34px, 5vw, 54px) clamp(24px, 4vw, 52px) clamp(40px, 5vw, 64px);
        overflow: hidden;
      }

  .history__copy {
        position: static;
        grid-area: copy;
        width: auto;
        max-width: 430px;
      }

  .history .eyebrow {
        gap: 14px;
        margin: 0 0 clamp(20px, 2.4vw, 30px);
        font-size: clamp(12px, 1.38vw, 15px);
        line-height: 1.18;
      }

  .history .eyebrow::before {
        flex-basis: clamp(38px, 4.6vw, 52px);
        width: clamp(38px, 4.6vw, 52px);
        height: 2px;
      }

  .history h2 {
        max-width: 520px;
        font-size: clamp(42px, 5.3vw, 62px);
        line-height: 1.06;
      }

  .history .lead {
        width: auto;
        max-width: 430px;
        margin-top: clamp(24px, 3vw, 34px);
        color: rgba(48, 65, 89, 0.86);
        font-family: var(--font-body);
        font-size: clamp(17px, 2vw, 21px);
        line-height: 1.5;
      }

  .history__visual {
        position: relative;
        grid-area: visual;
        width: 100%;
        height: clamp(320px, 49vw, 510px);
        min-height: 0;
      }

  .history-dashboard {
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        width: min(100%, 720px);
        max-width: none;
      }

  .history-chart {
        position: absolute;
        right: 0;
        left: auto;
        bottom: 0;
        top: auto;
        width: min(63%, 430px);
        max-width: none;
      }

  .history__details {
        position: static;
        grid-area: details;
        display: grid;
        gap: clamp(18px, 2.3vw, 26px);
        width: 100%;
        max-width: 440px;
        margin: 0;
        padding: 0;
      }

  .history .feature-row {
        position: relative;
        grid-template-columns: clamp(56px, 7.2vw, 72px) minmax(0, 1fr);
        align-items: start;
        gap: clamp(18px, 2.4vw, 26px);
        min-height: auto;
        padding-bottom: clamp(16px, 2vw, 22px);
        border-bottom: 0;
      }

  .history .feature-row:not(:last-child)::after {
        content: "";
        position: absolute;
        left: calc(clamp(56px, 7.2vw, 72px) + clamp(18px, 2.4vw, 26px));
        right: 0;
        bottom: 0;
        height: 1px;
        background: rgba(197, 210, 208, 0.72);
      }

  .history .feature-row > div {
        padding-top: 6px;
      }

  .history .feature-row .icon-card {
        width: clamp(56px, 7.2vw, 72px);
        height: clamp(56px, 7.2vw, 72px);
        border-radius: 8px;
      }

  .history .feature-row .icon-card svg {
        width: clamp(28px, 3.5vw, 36px);
        height: clamp(28px, 3.5vw, 36px);
      }

  .history .feature-row h3 {
        color: #071326;
        font-family: var(--font-body);
        font-size: clamp(20px, 2.6vw, 26px);
        font-weight: 800;
        line-height: 1.16;
      }

  .history .feature-row p {
        margin-top: 7px;
        color: rgba(48, 65, 89, 0.78);
        font-size: clamp(16px, 1.9vw, 19px);
        line-height: 1.42;
      }
}

@media (max-width: 740px) {
  .history {
        min-height: auto;
      }

  .history .molecule--tr {
        top: 86px;
        right: -86px;
        width: 240px;
        opacity: 0.16;
      }

  .history .molecule--bl {
        left: 30px;
        bottom: -38px;
        width: 190px;
        opacity: 0.16;
        transform: scaleY(0.72);
        transform-origin: left top;
      }

  .history__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
          "copy"
          "visual"
          "features";
        gap: 26px;
        width: 100%;
        max-width: 100%;
        min-height: auto;
        padding: 58px 20px 64px;
        overflow: hidden;
      }

  .history .eyebrow {
        display: flex;
        gap: 12px;
        margin: 0 0 18px;
        font-size: 13px;
        line-height: 1.16;
        overflow-wrap: normal;
      }

  .history h2 {
        max-width: 100%;
        color: #071326;
        font-family: var(--font-body);
        font-size: clamp(34px, 10.2vw, 44px);
        font-weight: 840;
        line-height: 1.08;
      }

  .history .lead {
        width: 100%;
        margin-top: 22px;
        color: rgba(48, 65, 89, 0.86);
        font-family: var(--font-body);
        font-size: 17px;
        line-height: 1.55;
      }

  .history__visual {
        position: static;
        grid-area: visual;
        display: grid;
        gap: 14px;
        width: 100%;
        height: auto;
        min-height: 0;
      }

  .history-dashboard,
      .history-chart {
        position: static;
        width: 100%;
        max-width: none;
        transform: none;
      }

  .history__details {
        position: static;
        grid-area: features;
        display: grid;
        gap: 20px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
      }

  .history .feature-row {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 16px;
        min-height: auto;
        padding-bottom: 20px;
      }

  .history .feature-row:not(:last-child)::after {
        left: 74px;
        right: 0;
      }

  .history .feature-row > div {
        padding-top: 2px;
      }

  .history .feature-row .icon-card {
        width: 58px;
        height: 58px;
        border-radius: 8px;
      }

  .history .feature-row .icon-card svg {
        width: 30px;
        height: 30px;
      }

  .history .feature-row h3 {
        color: #071326;
        font-family: var(--font-body);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.18;
      }

  .history .feature-row p {
        margin-top: 8px;
        color: rgba(48, 65, 89, 0.78);
        font-size: 17px;
        line-height: 1.42;
      }
}

@media (min-width: 741px) and (max-width: 1240px) {
  .history__inner {
        display: grid;
        grid-template-columns: minmax(270px, 0.72fr) minmax(380px, 1.28fr);
        grid-template-areas:
          "copy visual"
          "details details";
        gap: clamp(18px, 2.4vw, 28px) clamp(28px, 4vw, 50px);
        align-items: start;
        width: 100%;
        max-width: 1180px;
        min-height: 100vh;
        min-height: 100svh;
        margin: 0 auto;
        padding: clamp(24px, 3.6vw, 42px) clamp(20px, 3.4vw, 44px) clamp(24px, 3.4vw, 42px);
        overflow: hidden;
      }

  .history .lead {
        width: auto;
        max-width: 390px;
        margin-top: clamp(18px, 2.4vw, 28px);
        color: rgba(48, 65, 89, 0.86);
        font-family: var(--font-body);
        font-size: clamp(16px, 1.8vw, 19px);
        line-height: 1.48;
      }

  .history__details {
        position: static;
        grid-area: details;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(12px, 1.6vw, 18px);
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
      }

  .history .feature-row {
        position: relative;
        display: grid;
        grid-template-columns: clamp(48px, 5.6vw, 60px) minmax(0, 1fr);
        gap: clamp(10px, 1.4vw, 14px);
        align-items: start;
        min-height: 0;
        padding: clamp(12px, 1.6vw, 16px);
        border: 1px solid rgba(169, 218, 197, 0.62);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 16px 34px rgba(27, 75, 60, 0.07);
      }

  .history .feature-row .icon-card {
        width: clamp(48px, 5.6vw, 60px);
        height: clamp(48px, 5.6vw, 60px);
        border-radius: 8px;
      }

  .history .feature-row .icon-card svg {
        width: clamp(25px, 3vw, 32px);
        height: clamp(25px, 3vw, 32px);
      }

  .history .feature-row h3 {
        color: #071326;
        font-family: var(--font-body);
        font-size: clamp(17px, 2.05vw, 23px);
        font-weight: 800;
        line-height: 1.14;
      }

  .history .feature-row p {
        margin-top: 6px;
        color: rgba(48, 65, 89, 0.78);
        font-size: clamp(14px, 1.65vw, 17px);
        line-height: 1.36;
      }
}

@media (max-width: 740px) {
  .history h2 {
        max-width: 100%;
        color: #071326;
        font-family: var(--font-body);
        font-size: clamp(30px, 8.7vw, 38px);
        font-weight: 840;
        line-height: 1.09;
      }

  .history .lead {
        width: 100%;
        margin-top: 20px;
        color: rgba(48, 65, 89, 0.86);
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.52;
      }

  .history__visual {
        position: static;
        grid-area: visual;
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
      }

  .history-chart {
        position: relative;
        inset: auto;
        z-index: 2;
        display: block;
        width: 100%;
        max-width: none;
        margin-top: -38px;
      }

  .history .feature-row h3 {
        color: #071326;
        font-family: var(--font-body);
        font-size: 20px;
        font-weight: 800;
        line-height: 1.16;
      }
}

/* Additional approved overrides from the previous inline style block. */

@media (min-width: 741px) {
  .history__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(520px, 0.78fr) minmax(610px, 1.22fr);
        grid-template-areas:
          "copy visual"
          "details visual";
        gap: clamp(14px, 2.1vh, 22px) clamp(34px, 4vw, 66px);
        align-content: center;
        align-items: start;
        width: 100%;
        max-width: 1460px;
        min-height: 100vh;
        min-height: 100svh;
        margin: 0 auto;
        padding: clamp(44px, 6.1vh, 52px) clamp(32px, 3.8vw, 56px) clamp(14px, 2.2vh, 22px);
        overflow: hidden;
      }

  .history .eyebrow {
        display: flex;
        align-items: center;
        gap: clamp(14px, 1.2vw, 18px);
        margin: 0 0 clamp(18px, 3.2vh, 30px);
        font-size: clamp(14px, min(1.1vw, 2.2vh), 18px);
        line-height: 1.16;
      }

  .history .eyebrow::before {
        content: "";
        display: block;
        flex: 0 0 clamp(44px, 4vw, 62px);
        width: clamp(44px, 4vw, 62px);
        height: 2px;
        background: currentColor;
      }

  .history h2 {
        max-width: 620px;
        color: #071326;
        font-family: var(--font-body);
        font-size: clamp(46px, min(3.85vw, 6vh), 54px);
        font-weight: 840;
        line-height: 1.08;
        letter-spacing: 0;
      }

  .history-title__nowrap {
        color: #071326 !important;
        white-space: nowrap;
      }

  .history .lead {
        width: auto;
        max-width: 520px;
        margin-top: clamp(18px, 3vh, 28px);
        color: rgba(48, 65, 89, 0.86);
        font-family: var(--font-body);
        font-size: clamp(17px, min(1.45vw, 2.65vh), 22px);
        line-height: 1.48;
      }

  .history__visual {
        position: relative;
        grid-area: visual;
        inset: auto;
        display: block;
        width: 100%;
        height: clamp(430px, 62vh, 500px);
        min-height: 0;
        align-self: start;
        pointer-events: none;
      }

  .history .feature-row h3 {
        color: #071326;
        font-family: var(--font-body);
        font-size: clamp(18px, min(1.42vw, 2.55vh), 22px);
        font-weight: 800;
        line-height: 1.18;
      }
}

@media (min-width: 741px) and (max-width: 1240px) {
  .history__inner {
        grid-template-columns: minmax(270px, 0.72fr) minmax(380px, 1.28fr);
        gap: clamp(16px, 2vw, 24px) clamp(28px, 4vw, 50px);
        max-width: 1180px;
        padding: clamp(38px, 5.8vh, 48px) clamp(20px, 3.4vw, 44px) clamp(24px, 3.4vw, 42px);
      }

  .history__copy {
        max-width: 410px;
      }

  .history .lead {
        max-width: 390px;
        font-size: clamp(16px, 1.8vw, 19px);
        line-height: 1.48;
      }

  .history__visual {
        height: auto;
      }

  .history-dashboard {
        position: relative;
        inset: auto;
        width: 100%;
      }

  .history-chart {
        position: relative;
        inset: auto;
        width: min(64%, 430px);
        margin: clamp(-58px, -5.2vw, -36px) 2% 0 auto;
      }

  .history__details {
        max-width: 390px;
        gap: clamp(10px, 1.3vw, 15px);
      }
}

/* Desktop artboard lock: keeps the approved screen-5 composition stable on wide screens. */
@media (min-width: 1241px) {
  .history {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100svh;
  }

  .history::before {
    display: block;
    inset: 3.2% -9% -8% 46.5%;
    border-radius: 50%;
    background: rgba(223, 244, 235, 0.78);
    transform: rotate(-7deg);
  }

  .history::after {
    display: block;
    inset: auto -14% -18% 35%;
    height: 31%;
    background: rgba(217, 246, 232, 0.66);
  }

  .history > .molecule--tr {
    top: -1.4%;
    right: -0.5%;
    width: min(18.7vw, 312px);
  }

  .history > .molecule--bl {
    left: 5.2%;
    bottom: -5.5%;
    width: min(14vw, 235px);
    opacity: 0.18;
  }

  .history__inner {
    --artboard-width: min(100vw, calc(100svh * 1672 / 941));
    --visual-shift: max(0px, calc((100vw - var(--artboard-width)) * 0.7));
    container-type: inline-size;
    display: block;
    position: relative;
    width: var(--artboard-width);
    max-width: 1672px;
    aspect-ratio: 1672 / 941;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  @supports not (height: 100svh) {
    .history__inner {
      --artboard-width: min(100vw, calc(100vh * 1672 / 941));
      width: var(--artboard-width);
    }
  }

  .history__copy {
    position: absolute;
    left: 4.45%;
    top: 8.4%;
    width: 40.8%;
    max-width: none;
  }

  .history .eyebrow {
    gap: 1.08cqw;
    margin: 0 0 1.55cqw;
    font-size: 1.02cqw;
    line-height: 1.2;
  }

  .history .eyebrow::before {
    flex: 0 0 2.87cqw;
    width: 2.87cqw;
    height: 0.18cqw;
  }

  .history h2 {
    max-width: 43cqw;
    font-size: 3.55cqw;
    line-height: 1.11;
    transform: scaleX(0.88);
    transform-origin: left top;
  }

  .history .lead {
    max-width: 36.5cqw;
    margin-top: 1.55cqw;
    font-size: clamp(17px, 1.2vw, 22px);
    line-height: 1.48;
  }

  .history__visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .history-dashboard {
    position: absolute;
    top: 6.3%;
    left: calc(42.35% + var(--visual-shift, 0px));
    right: auto;
    bottom: auto;
    width: 55.35%;
    max-width: none;
  }

  .history-chart {
    position: absolute;
    top: 56.8%;
    left: calc(64.6% + var(--visual-shift, 0px));
    right: auto;
    bottom: auto;
    z-index: 2;
    width: 29.4%;
    max-width: none;
    margin: 0;
  }

  .history__details {
    position: absolute;
    left: 4.45%;
    top: 52.5%;
    display: grid;
    grid-auto-rows: auto;
    gap: clamp(22px, 1.55cqw, 28px);
    width: 31.8%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .history .feature-row {
    position: relative;
    display: grid;
    grid-template-columns: 4.25cqw minmax(0, 1fr);
    align-items: start;
    gap: 1.33cqw;
    height: auto;
    min-height: 4.25cqw;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .history .feature-row:not(:last-child)::after {
    content: none;
  }

  .history .feature-row > div {
    min-width: 0;
    padding-top: 0.47cqw;
  }

  .history .feature-row .icon-card {
    width: 4.25cqw;
    height: 4.25cqw;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0.9cqw;
    background: rgba(226, 246, 237, 0.88);
  }

  .history .feature-row .icon-card svg {
    width: 2.18cqw;
    height: 2.18cqw;
    stroke-width: 2.05;
  }

  .history .feature-row h3 {
    margin: 0;
    color: #071326;
    font-size: clamp(17px, 1.12vw, 20.5px);
    line-height: 1.18;
  }

  .history .feature-row p {
    margin: 0.58cqw 0 0;
    color: rgba(48, 65, 89, 0.86);
    font-size: clamp(16.5px, 1.08vw, 20px);
    line-height: 1.4;
  }
}

/* Tablet repair: align screen 5 behavior with the approved screen 4 rhythm. */
@media (min-width: 861px) and (max-width: 1240px) {
  .history__inner {
    grid-template-columns: minmax(388px, 0.86fr) minmax(0, 1.14fr);
    grid-template-areas:
      "copy visual"
      "details visual";
    gap: clamp(18px, 2.2vw, 26px) clamp(28px, 3.4vw, 42px);
    max-width: 1120px;
    padding: calc(var(--np-header-offset) + 64px) clamp(42px, 5.4vw, 56px) 58px;
    align-content: center;
    align-items: center;
  }

  .history__copy {
    max-width: none;
  }

  .history .eyebrow {
    margin-bottom: 16px;
  }

  .history h2 {
    max-width: 440px;
    font-size: clamp(38px, 4.8vw, 48px);
    line-height: 1.08;
    word-break: normal;
    overflow-wrap: normal;
  }

  .history-title__nowrap {
    white-space: normal;
  }

  .history .lead {
    max-width: 420px;
    margin-top: 20px;
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.46;
  }

  .history__visual {
    align-self: center;
    justify-self: center;
    width: 100%;
  }

  .history-dashboard {
    width: min(100%, 660px);
  }

  .history-chart {
    width: min(64%, 400px);
    margin-top: clamp(-50px, -4.8vw, -34px);
  }

  .history__details {
    grid-template-columns: 1fr;
    align-self: start;
    justify-self: start;
    width: 100%;
    max-width: 430px;
    gap: 12px;
    margin: 0;
  }

  .history .feature-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 12px 14px;
    border: 1px solid rgba(7, 84, 61, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 13px 26px rgba(27, 75, 60, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
  }

  .history .feature-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(0, 121, 67, 0.76), rgba(117, 196, 157, 0.12));
  }

  .history .feature-row:not(:last-child)::after {
    content: none;
  }

  .history .feature-row .icon-card {
    width: 46px;
    height: 46px;
    border-radius: 8px;
  }

  .history .feature-row .icon-card svg {
    width: 24px;
    height: 24px;
  }

  .history .feature-row > div {
    min-width: 0;
    padding-top: 0;
  }

  .history .feature-row h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.22;
  }

  .history .feature-row p {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.35;
    overflow-wrap: break-word;
  }
}

@media (min-width: 741px) and (max-width: 860px) {
  .history {
    min-height: auto;
    overflow: hidden;
  }

  .history::before,
  .history::after {
    display: none;
  }

  .history > .molecule--tr {
    top: -2%;
    right: -8%;
    width: min(34vw, 260px);
    opacity: 0.18;
  }

  .history > .molecule--bl {
    left: 5%;
    bottom: -44px;
    width: min(25vw, 210px);
    opacity: 0.16;
  }

  .history__inner {
    container-type: normal;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "visual"
      "details";
    width: 100%;
    max-width: 920px;
    min-height: auto;
    height: auto;
    aspect-ratio: auto;
    gap: 24px;
    margin: 0 auto;
    padding: calc(var(--np-header-offset) + 56px) clamp(34px, 5vw, 54px) 64px;
    overflow: hidden;
  }

  .history__copy,
  .history__visual,
  .history__details {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    transform: none;
  }

  .history__copy {
    grid-area: copy;
    justify-self: stretch;
    max-width: 720px;
  }

  .history .eyebrow {
    gap: 12px;
    margin: 0 0 13px;
    font-size: 14px;
    line-height: 1.2;
    white-space: normal;
  }

  .history .eyebrow::before {
    flex: 0 0 36px;
    width: 36px;
    height: 2px;
  }

  .history h2 {
    max-width: 700px;
    font-size: clamp(42px, 6vw, 56px);
    line-height: 1.05;
    transform: none;
  }

  .history-title__nowrap {
    white-space: normal;
  }

  .history .lead {
    max-width: 700px;
    margin-top: 18px;
    font-size: clamp(18px, 2.2vw, 21px);
    line-height: 1.48;
  }

  .history__visual {
    grid-area: visual;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 0;
    height: auto;
    pointer-events: none;
    isolation: isolate;
  }

  .history-dashboard,
  .history-chart {
    position: relative;
    display: block;
    inset: auto;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .history-dashboard {
    z-index: 1;
    width: min(100%, 760px);
  }

  .history-chart {
    z-index: 2;
    width: min(84%, 620px);
    margin-top: clamp(-52px, -5vw, -32px);
  }

  .history__details {
    grid-area: details;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    justify-self: center;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
  }

  .history .feature-row {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    max-width: none;
    padding: 14px;
    border: 1px solid rgba(7, 84, 61, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 13px 26px rgba(27, 75, 60, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
  }

  .history .feature-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(0, 121, 67, 0.76), rgba(117, 196, 157, 0.12));
  }

  .history .feature-row:not(:last-child)::after {
    content: none;
  }

  .history .feature-row .icon-card {
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }

  .history .feature-row .icon-card svg {
    width: 25px;
    height: 25px;
  }

  .history .feature-row > div {
    min-width: 0;
    padding-top: 0;
  }

  .history .feature-row h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.22;
  }

  .history .feature-row p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.36;
    overflow-wrap: break-word;
  }
}

@media (max-width: 740px) {
  .history__details {
    grid-area: features;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, 430px);
    max-width: calc(100vw - 40px);
    margin: 0 auto;
    padding: 0;
    justify-self: center;
  }

  .history .feature-row {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    max-width: none;
    min-width: 0;
    min-height: 0;
    padding: 12px 14px;
    border: 1px solid rgba(7, 84, 61, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 13px 26px rgba(27, 75, 60, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
  }

  .history .feature-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(0, 121, 67, 0.76), rgba(117, 196, 157, 0.12));
  }

  .history .feature-row:not(:last-child)::after {
    content: none;
  }

  .history .feature-row .icon-card {
    grid-column: 1;
    width: 38px;
    height: 38px;
    min-width: 0;
    min-height: 0;
  }

  .history .feature-row .icon-card svg {
    width: 21px;
    height: 21px;
  }

  .history .feature-row > div {
    grid-column: 2;
    min-width: 0;
    padding-top: 0;
  }

  .history .feature-row h3 {
    margin: 0;
    color: var(--green, #07543d);
    font-size: 18px;
    line-height: 1.22;
  }

  .history .feature-row p {
    margin: 5px 0 0;
    color: var(--muted, rgba(21, 33, 29, 0.66));
    font-size: 14px;
    line-height: 1.36;
    overflow-wrap: break-word;
  }
}

@media (min-width: 1241px) {
  .history h2 {
    margin-top: clamp(10px, 1.25svh, 18px);
  }

  .history__visual {
    transform: translateY(clamp(12px, 1.45svh, 22px));
  }
}

@media (min-width: 861px) and (max-width: 1240px) {
  .history h2 {
    margin-top: 12px;
  }

  .history__visual {
    margin-top: 14px;
  }
}