.about-page {
      background: #fff
}

.about-main {
      padding-top: var(--header-height);
      overflow: hidden
}

.about-hero,
.about-section {
      width: min(var(--max), 100%);
      margin: 0 auto;
      padding-left: var(--page-gutter);
      padding-right: var(--page-gutter)
}

.about-hero {
      display: grid;
      grid-template-columns: minmax(0,1.44fr) minmax(290px,1.16fr);
      gap: clamp(48px, 7vw, 110px);
      align-items: start;
      min-height: 625px;
      padding-top: calc(var(--page-entry-space));
      padding-bottom: 84px
}

.about-hero-copy {
      max-width: 640px
}

.about-hero h1 {
      max-width: 635px;
      margin: 0;
      color: var(--ink);
      font-size: clamp(3.4rem, 5vw, 4.7rem);
      line-height: 1.04
}

.about-hero-copy>p:last-of-type {
      max-width: 570px;
      margin: 26px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.65
}

.about-actions {
      display: flex;
      align-items: center;
      gap: 25px;
      margin-top: 30px
}

.about-actions .text-link {
      padding-left: 0
}

.context-preview {
      min-width: 0;
      overflow: hidden;
      border: 1px solid #d7e3f1;
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(34, 73, 122, .11)
}

.context-preview__top {
      height: 54px;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
      color: #7587a1;
      font-size: 10px
}

.context-preview__brand {
      color: #102a56;
      font: 700 13px/1 "Manrope", sans-serif
}

.context-preview__secure {
      margin-left: auto;
      padding: 5px 8px;
      border-radius: 6px;
      background: #ecf8f2;
      color: var(--green);
      font-size: 9px;
      font-weight: 600
}

.context-preview__body {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      min-height: 296px
}

.context-preview__body aside {
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 16px;
      padding-top: 25px;
      background: #0c2c4d
}

.context-preview__body aside span {
      width: 18px;
      height: 18px;
      border: 1px solid rgba(255, 255, 255, .27);
      border-radius: 5px
}

.context-preview__body aside .is-active {
      border-color: #78abfa;
      background: var(--blue);
      box-shadow: 0 0 0 5px rgba(255, 255, 255, .07)
}

.context-preview__content {
      position: relative;
      padding: 22px 25px;
      background: #fbfcfe
}

.patient-context {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 19px;
      border-bottom: 1px solid var(--line)
}

.patient-avatar {
      display: grid;
      place-items: center;
      width: 37px;
      height: 37px;
      border-radius: 50%;
      background: #eaf2fd;
      color: #285a91;
      font-size: 10px;
      font-weight: 700
}

.patient-context div {
      display: grid;
      gap: 1px
}

.patient-context strong {
      color: #14325c;
      font: 600 13px/1.25 "Manrope", sans-serif
}

.patient-context small {
      color: #8392a5;
      font-size: 9px
}

.patient-status {
      margin-left: auto;
      padding: 5px 8px;
      border-radius: 6px;
      background: #edf5ff;
      color: var(--blue);
      font-size: 9px;
      font-weight: 600
}

.context-panel {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 5px;
      min-height: 135px;
      margin-top: 19px;
      padding: 17px;
      border: 1px solid #dfe7f0;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(30, 59, 94, .035);
      animation: panelIn .45s var(--ease)
}

.context-panel[hidden] {
      display: none
}

.ui-kicker {
      color: #8391a4;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase
}

.context-panel strong {
      color: #132e57;
      font: 600 16px/1.25 "Manrope", sans-serif;
      letter-spacing: -.03em
}

.context-panel p {
      max-width: 310px;
      margin: 0;
      color: #667b99;
      font-size: 11px;
      line-height: 1.5
}

.context-preview__line {
      position: absolute;
      right: 25px;
      bottom: 25px;
      display: flex;
      align-items: center;
      gap: 6px
}

.context-preview__line span {
      width: 28px;
      height: 2px;
      background: #d6e0ec
}

.context-preview__line span:first-child {
      background: var(--blue)
}

.context-preview__caption {
      display: flex;
      align-items: center;
      gap: 9px;
      height: 44px;
      padding: 0 18px;
      border-top: 1px solid var(--line);
      color: #74869f;
      font-size: 10px
}

.live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 0 5px rgba(20, 107, 243, .11)
}

@keyframes panelIn {
      from {
            opacity: 0;
            transform: translateY(8px)
      }

      to {
            opacity: 1;
            transform: none
      }
}

.about-section {
      position: relative;
      padding-top: 130px;
      padding-bottom: 130px
}

.about-section--soft {
      background: #f7faff;
      box-shadow: 0 0 0 100vmax #f7faff;
      clip-path: inset(0 -100vmax)
}

.about-section h2 {
      margin: 0;
      color: var(--ink);
      font: 600 clamp(2.5rem, 4vw, 3.6rem)/1.08 "Manrope", sans-serif;
      letter-spacing: -.045em
}

.about-statement {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
      gap: clamp(52px, 8vw, 130px);
      align-items: start
}

.statement-copy {
      margin-top: 4px;
      padding: 4px 0 0 34px;
      border-left: 1px solid #cfdfee
}

.statement-copy>p,
.beliefs-lede,
.building-copy>p:not(.eyebrow),
.future-copy>p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.66
}

.statement-copy blockquote {
      max-width: 570px;
      margin: 26px 0 0;
      color: #145fc2;
      font: 600 25px/1.3 "Manrope", sans-serif;
      letter-spacing: -.035em
}

.beliefs-section {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
      column-gap: clamp(52px, 8vw, 130px);
      row-gap: 45px
}

.beliefs-lede {
      max-width: 590px;
      padding-top: 8px
}

.beliefs-list {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid #dce6f1;
      border-bottom: 1px solid #dce6f1
}

.beliefs-list article {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 18px;
      min-height: 182px;
      padding: 30px 28px 30px 0
}

.beliefs-list article+article {
      padding-left: 28px;
      border-left: 1px solid #dce6f1
}

.beliefs-number {
      color: #8ba0bb;
      font: 500 24px/1 "Manrope", sans-serif;
      letter-spacing: -.05em
}

.beliefs-list h3,
.build-list h3 {
      margin: 0;
      color: #112c56;
      font: 600 19px/1.28 "Manrope", sans-serif;
      letter-spacing: -.03em
}

.beliefs-list p,
.build-list p {
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.58
}

.building-section {
      display: grid;
      grid-template-columns: minmax(0, .77fr) minmax(520px, 1.23fr);
      gap: clamp(54px, 8vw, 125px);
      align-items: center
}

.building-copy {
      max-width: 490px
}

.building-copy>p:not(.eyebrow) {
      margin-top: 22px
}

.building-copy .button {
      margin-top: 26px
}

.care-path {
      overflow: hidden;
      border: 1px solid #d7e3f1;
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 18px 45px rgba(25, 54, 91, .06)
}

.care-path__head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 21px;
      border-bottom: 1px solid var(--line);
      color: #14325c;
      font: 600 14px/1 "Manrope", sans-serif
}

.care-path__head:before {
      content: "SM";
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      border-radius: 50%;
      background: #eaf2fd;
      color: #285a91;
      font: 700 9px/1 "DM Sans", sans-serif
}

.care-path__head small {
      color: #8392a5;
      font: 400 10px/1 "DM Sans", sans-serif
}

.care-path__stages {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 3px;
      padding: 35px 16px 28px
}

.care-path__stages:before {
      content: "";
      position: absolute;
      z-index: 0;
      top: 62px;
      left: 8%;
      right: 8%;
      height: 1px;
      background: #c7dcf8
}

.about-stage {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      border: 0;
      background: transparent;
      color: #6e829f;
      font: 600 11px/1.25 "DM Sans", sans-serif;
      cursor: pointer
}

.about-stage>span {
      display: grid;
      place-items: center;
      width: 47px;
      height: 47px;
      border: 1px solid #d3e2f3;
      border-radius: 50%;
      background: #fff;
      color: #66809d;
      box-shadow: 0 0 0 7px #fff;
      transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease)
}

.about-stage iconify-icon {
      font-size: 20px
}

.about-stage:hover>span,
.about-stage.is-active>span {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff
}

.about-stage.is-active>span {
      box-shadow: 0 0 0 7px #fff, 0 0 0 11px rgba(20, 107, 243, .1)
}

.about-stage.is-active {
      color: #173a73
}

.about-stage:focus-visible {
      outline: 3px solid rgba(20, 107, 243, .32);
      outline-offset: 4px;
      border-radius: 8px
}

.build-section {
      display: grid;
      grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
      gap: clamp(52px, 8vw, 125px);
      align-items: start
}

.build-list {
      border-top: 1px solid #dce6f1
}

.build-list article {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 18px;
      padding: 24px 0;
      border-bottom: 1px solid #dce6f1
}

.build-list article>span {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 9px;
      background: var(--soft);
      color: var(--blue)
}

.build-list iconify-icon {
      font-size: 21px
}

.future-section {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
      gap: clamp(52px, 8vw, 130px);
      align-items: start
}

.future-copy {
      max-width: 590px;
      padding-top: 7px
}

.future-copy p+p {
      margin-top: 15px;
      color: #1d4777;
      font: 600 18px/1.45 "Manrope", sans-serif;
      letter-spacing: -.025em
}

.about-main>.medray-practice-cta {
      margin: 0 auto 78px
}

@media(max-width:1050px) {
      .about-hero {
            grid-template-columns: 1fr;
            gap: 48px;
            min-height: 0;
            padding-top: var(--page-entry-space);
            padding-bottom: 90px
      }

      .context-preview {
            width: min(100%, 710px)
      }

      .about-section {
            padding-top: 105px;
            padding-bottom: 105px
      }

      .about-statement,
      .building-section,
      .build-section,
      .future-section {
            grid-template-columns: 1fr;
            gap: 44px
      }

      .beliefs-section {
            column-gap: 44px
      }

      .about-main>.medray-practice-cta {
            margin-bottom: 52px
      }
}

@media(max-width:760px) {
      .about-hero {
            gap: 40px;
            padding-top: var(--page-entry-space);
            padding-bottom: 66px
      }

      .about-hero h1 {
            font-size: clamp(2.7rem, 13vw, 3.7rem)
      }

      .about-hero-copy>p:last-of-type {
            font-size: 17px
      }

      .about-actions {
            flex-direction: column;
            align-items: stretch;
            gap: 12px
      }

      .about-actions .button {
            width: 100%
      }

      .about-actions .text-link {
            justify-content: center
      }

      .context-preview__body {
            grid-template-columns: 44px minmax(0, 1fr);
            min-height: 272px
      }

      .context-preview__body aside {
            padding-top: 20px
      }

      .context-preview__content {
            padding: 19px 15px
      }

      .context-preview__top {
            padding: 0 13px
      }

      .context-preview__top>span:nth-child(2) {
            display: none
      }

      .context-preview__line {
            right: 15px;
            bottom: 20px
      }

      .about-section {
            padding-top: 82px;
            padding-bottom: 82px
      }

      .about-section h2 {
            font-size: 2.5rem
      }

      .about-statement,
      .beliefs-section,
      .building-section,
      .build-section,
      .future-section {
            gap: 34px
      }

      .statement-copy {
            padding-left: 20px
      }

      .statement-copy>p,
      .beliefs-lede,
      .building-copy>p:not(.eyebrow),
      .future-copy>p {
            font-size: 16px
      }

      .statement-copy blockquote {
            font-size: 21px
      }

      .beliefs-section {
            display: block
      }

      .beliefs-lede {
            margin-top: 25px
      }

      .beliefs-list {
            display: block;
            margin-top: 38px
      }

      .beliefs-list article,
      .beliefs-list article+article {
            min-height: 0;
            padding: 24px 0;
            border-left: 0
      }

      .beliefs-list article {
            grid-template-columns: 47px minmax(0, 1fr);
            gap: 13px
      }

      .building-copy .button {
            width: 100%
      }

      .care-path__stages {
            overflow-x: auto;
            grid-template-columns: repeat(6, 96px);
            justify-content: start;
            padding: 28px 15px 23px;
            scroll-snap-type: x mandatory
      }

      .care-path__stages:before {
            left: 47px;
            right: auto;
            width: 480px;
            top: 55px
      }

      .about-stage {
            scroll-snap-align: start
      }

      .about-stage>span {
            width: 43px;
            height: 43px
      }

      .about-stage iconify-icon {
            font-size: 18px
      }

      .build-list article {
            padding: 21px 0
      }

      .about-main>.medray-practice-cta {
            margin-bottom: 40px
      }
}

@media(prefers-reduced-motion:reduce) {
      .context-panel {
            animation: none
      }

      .about-stage>span {
            transition: none
      }
}

.context-preview__controls {
      display: flex;
      gap: 4px;
      margin-left: auto
}

.context-stage {
      display: grid;
      place-items: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: 1px solid #d7e2ef;
      border-radius: 50%;
      background: #fff;
      color: #8393a7;
      font-size: 8px;
      cursor: pointer
}

.context-stage.is-active {
      border-color: var(--blue);
      background: var(--blue);
      color: #fff
}

.context-stage:focus-visible {
      outline: 3px solid rgba(20, 107, 243, .32);
      outline-offset: 2px
}

.context-preview__caption>span:nth-child(2) {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
}

.layers {
      position: relative;
      justify-self: center;
      width: min(100%, 500px);
      height: 310px
}

.layer-box {
      position: absolute;
      width: 178px;
      height: 178px;
      border: 1px solid rgba(122, 170, 236, .2);
      border-radius: 16px;
      background: rgba(109, 170, 255, .13);
      box-shadow: 0 10px 30px rgba(70, 125, 194, .05);
      transform-origin: center
}

.layer-box.a {
      top: 18px;
      right: 42px;
      background: rgba(109, 170, 255, .12)
}

.layer-box.b {
      top: 76px;
      right: 118px;
      background: rgba(87, 155, 250, .14)
}

.layer-box.c {
      top: 134px;
      right: 194px;
      background: rgba(129, 184, 255, .1)
}

.build-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px
}

.build-cards article {
      min-width: 0;
      min-height: 190px;
      padding: 18px;
      border: 1px solid #cfe0f5;
      border-radius: 10px;
      background: #fff
}

.build-cards article>span {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #e8f2ff;
      color: var(--blue)
}

.build-cards iconify-icon {
      font-size: 20px
}

.build-cards h3 {
      margin: 15px 0 0;
      color: #112c56;
      font: 600 14px/1.3 "Manrope", sans-serif;
      letter-spacing: -.02em
}

.build-cards p {
      margin: 8px 0 0;
      color: #52709a;
      font-size: 13px;
      line-height: 1.5
}

@media(max-width:1050px) {
      .layers {
            justify-self: start;
            height: 270px
      }

      .layer-box.a {
            right: 80px
      }

      .layer-box.b {
            right: 155px
      }

      .layer-box.c {
            right: 230px
      }

      .build-cards {
            width: min(100%, 720px)
      }
}

@media(max-width:760px) {
      .layers {
            width: 100%;
            height: 230px
      }

      .layer-box {
            width: 132px;
            height: 132px;
            border-radius: 14px
      }

      .layer-box.a {
            top: 10px;
            right: 16px
      }

      .layer-box.b {
            top: 52px;
            right: 72px
      }

      .layer-box.c {
            top: 94px;
            right: 128px
      }

      .build-cards {
            grid-template-columns: 1fr
      }

      .build-cards article {
            min-height: 0;
            padding: 20px
      }

      .build-cards h3 {
            font-size: 16px
      }

      .build-cards p {
            font-size: 14px
      }
}