@media screen {
  @layer page.diabetes-technology {

    @font-face {
      font-family: MontserratRegular;
      src: local('Montserrat Regular'), 
          local('Montserrat-Regular'), 
          url('../fonts/Montserrat/Montserrat-Regular.woff2') format('woff2');
      font-display: fallback;
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: MontserratBold;
      src: local('Montserrat Bold'), 
          local('Montserrat-Bold'), 
          url('../fonts/Montserrat/Montserrat-Bold.woff2') format('woff2');
      font-display: fallback;
      font-weight: 700;
      font-style: normal;
    }

    :root {
      /* Color */
      --diabetes-black: #000;
      --diabetes-blue: #0571b0;
      --diabetes-teal: #008575;
      --diabetes-white: #fff;

      /* Font Family */
      --diabetes-font-regular: MontserratRegular, sans-serif;
      --diabetes-font-bold: MontserratBold, sans-serif;

      /* Font Size */
      --diabetes-font-size: 1rem;
      --diabetes-font-size-1: clamp(16px, calc( 1rem + ((1vw - 5px) * 1.1450)), 22px);
      --diabetes-font-size-2: clamp(25px, calc( 1.5625rem + ((1vw - 5px) * 0.9542)), 30px);
      --diabetes-font-size-3: clamp(25px, calc( 1.5625rem + ((1vw - 5px) * 2.8626)), 40px);
      --diabetes-font-size-4: clamp(40px, calc( 2.5rem + ((1vw - 5px) * 1.9084)), 50px);
      --diabetes-font-size-5: clamp(40px, calc( 2.5rem + ((1vw - 5px) * 7.4627)), 60px);
      --diabetes-font-size-6: clamp(40px, calc( 2.5rem + ((1vw - 5px) * 14.9254)), 80px);
      --diabetes-font-size-7: clamp(80px, calc( 5rem + ((1vw - 5px) * 3.8168)), 100px);
      --diabetes-font-size-8: clamp(90px, calc( 5.625rem + ((1vw - 5px) * 5.7252)), 120px);
      
      /* Line Height */
      --diabetes-line-height: 1.375rem;
      --diabetes-line-height-1: clamp(20px, calc( 1.25rem + ((1vw - 5px) * 0.9542)), 25px);
      --diabetes-line-height-2: clamp(30px, calc( 1.875rem + ((1vw - 5px) * 0.9542)), 35px);
      --diabetes-line-height-3: clamp(30px, calc( 1.875rem + ((1vw - 5px) * 2.8626)), 45px);
      --diabetes-line-height-4: clamp(45px, calc( 2.8125rem + ((1vw - 5px) * 1.9084)), 55px);
      --diabetes-line-height-5: clamp(45px, calc( 2.8125rem + ((1vw - 5px) * 4.8507)), 58px);
      --diabetes-line-height-6: clamp(45px, calc( 2.8125rem + ((1vw - 5px) * 16.7910)), 90px);
      --diabetes-line-height-7: clamp(100px, calc( 6.25rem + ((1vw - 5px) * 5.7252)), 130px);
      --diabetes-line-height-8: 1;

      /* Gaps */
      --diabetes-gap-1: 14px;
      --diabetes-gap-2: clamp(14px, calc( 0.875rem + ((1vw - 5px) * 3.4351)), 32px);
      --diabetes-gap-3: clamp(14px, calc( 0.875rem + ((1vw - 5px) * 8.9552)), 38px);
      --diabetes-gap-4: clamp(32px, calc( 2rem + ((1vw - 5px) * 3.0534)), 48px);
      --diabetes-gap-5: clamp(40px, calc( 2.5rem + ((1vw - 5px) * 5.3435)), 68px);
      --diabetes-gap-6: clamp(68px, calc( 4.25rem + ((1vw - 5px) * 3.0534)), 84px);

      /* Gradient */
      --diabetes-gradient-x: linear-gradient(90deg, var(--diabetes-blue), var(--diabetes-teal) );
      
      /* Gutter */
      --diabetes-gutter-x: 32px;

      /* Limits */
      --diabetes-limit: 1120px;
      --diabetes-limit-max: calc( var(--diabetes-limit) + var(--diabetes-gutter-x) * 2 );
    }

    /* Namespace */
    diabetes-technology {
      display: block;
      font-family: var(--diabetes-font-regular);
      font-size: 16px;
      line-height: 22px;
      word-wrap: break-word;
    }


    /* SHARED */
    @layer shared {
      img {
        block-size: auto;
        margin-inline: auto;
        max-inline-size: 100%;
      }
      picture { 
        align-items: center;
        display: flex; 
        place-content: center;
      }
      strong { 
        font-family: var(--diabetes-font-bold); 
      }
      sup {
        top: -2px;
      }

      pint-wrap {
        display: block;
      }
    }


    /* COMPONENTS */
    @layer components {


      /* Grid */
      @layer grid {
        :where(pint-grid, .pint-grid) {
          display: grid;
          gap: var(--diabetes-gap-2);
          list-style: none;
          margin: 0;
          padding: 0;
          row-gap: var(--diabetes-gap-4);
        }
        @media (min-width: 550px) and (max-width: 767.95px) {
          :where(pint-grid, .pint-grid)[data-type="3col"] {
            grid-template-columns: repeat(2, 1fr);
          }
          :where(pint-grid, .pint-grid)[data-type="3col"] > :last-child {
            transform: translateX(50%);
          }
        }
        @media (min-width: 768px) {
          :where(pint-grid, .pint-grid)[data-type="2col"] {
            grid-template-columns: repeat(2, 1fr);
          }
          :where(pint-grid, .pint-grid)[data-type="3col"] {
            grid-template-columns: repeat(3, 1fr);
          }
          
          /* 1 to 2 column ratio */
          :where(pint-grid, .pint-grid)[data-type="1-2"] {
            grid-template-columns: 1fr 2fr;
          }
        }
      }


      /* Headline Horizontal Line */
      @layer headline-line {
        .headline-line {
          background: linear-gradient(180deg, 
            rgba(0,0,0,0) calc(50% - 1px), 
            rgba(192,192,192,1) calc(50%), 
            rgba(0,0,0,0) calc(50% + 1px)
          );
        }
        .headline-line span {
          background-color: var(--diabetes-white);
          display: inline-block;
          margin-inline: auto;
          padding-inline: var(--diabetes-gap-2)
        }
      }


      /* Headline Text Gradient */
      @layer text-gradient {
        pint-text-gradient {
          background: var(--diabetes-gradient-x);
          background-clip: text;
          font-family: var(--diabetes-font-bold);
          display: inline-block;
          -webkit-text-fill-color: transparent;
        }
        pint-text-gradient[type="blue"] {
          background: var(--diabetes-blue);
          background-clip: text;
        }
        pint-text-gradient[type="teal"] {
          background: var(--diabetes-teal);
          background-clip: text;
        }
      }


    }


    /* SECTIONS */

    /* Background Gradient */
    diabetes-technology .gradient-bg {
      background: var(--diabetes-gradient-x);
      color: var(--diabetes-white);
    }

    /* Background Image */
    pint-bg {
      background-position: top right;
      background-size: cover;
      display: block;
    }
    @media (min-width: 768px) {
      pint-bg[type="active"] { background-image: url('https://d3pavutnpk3eih.cloudfront.net/photos/diabetes/bg-active.webp'); }
      pint-bg[type="lattice"] { background-image: url('https://d3pavutnpk3eih.cloudfront.net/photos/diabetes/bg-lattice.webp'); }
    }
    @media (max-width: 767.95px) {
      pint-bg[type="active"] { background-image: url('https://d3pavutnpk3eih.cloudfront.net/photos/diabetes/bg-active-m.webp'); }
      pint-bg[type="lattice"] { background-image: url('https://d3pavutnpk3eih.cloudfront.net/photos/diabetes/bg-lattice-m.webp'); }
    }

    /* Content Limit */
    diabetes-technology pint-content-width {
      display: block;
      margin-inline: auto;
      max-inline-size: var(--diabetes-limit-max);
      padding: var(--diabetes-gap-6) var(--diabetes-gutter-x);
    }
    diabetes-technology pint-content-width > :first-child {
      margin-block-start: 0 !important;
    }
    diabetes-technology pint-content-width > :last-child {
      margin-block-end: 0 !important;
    }


    /* --- */


    /* Section: Intro */
    @layer section.intro {
      @media (min-width: 768px) {
        .section-intro pint-content-width {
          padding-inline-start: 70px;
        }
      }
      /* Arrow */
      .section-intro .icon-circle-arrow-right {
        inset: 0 auto auto 0;
        position: absolute;
      }
      @media (min-width: 1260px) {
        .section-intro .icon-circle-arrow-right {
          transform: translate(0, 7px);
        }
      }
      /* H1 */
      .section-intro :is(h1, .h1) {
        font-size: var(--diabetes-font-size-6);
        line-height: var(--diabetes-line-height-6);
        margin: 0;
        position: relative;
      }
      @media (max-width: 1259.95rem) {
        .section-intro :is(h1, .h1) pint-text-gradient {
          padding-inline-start: 50px;
        }
      }
      .section-intro :is(h1, .h1) pint-text-gradient {
        display: block;
        font-family: var(--diabetes-font-bold);
        font-size: var(--diabetes-font-size-3);
        line-height: var(--diabetes-line-height-3);
        margin-block-end: 1.6875rem;
        text-transform: uppercase;
      }
      /* H2 */
      .section-intro :is(h2, .h2) {
        display: grid;
        font-size: var(--diabetes-font-size-2);
        gap: var(--diabetes-gap-3);
        line-height: var(--diabetes-line-height-2);
        margin: var(--diabetes-gap-4) 0 0;
        max-inline-size: 1050px;
        align-items: center;
        position: relative;
      }
      @media (min-width: 768px) {
        .section-intro :is(h2, .h2) {
          grid-template-columns: auto 1fr;
        }
      }
      @media (max-width: 809.95px) {
        .section-intro :is(h2, .h2) {
          align-items: start;
          line-height: 1;
          row-gap: 4px;
        }
      }
      .section-intro :is(h2, .h2) pint-text-gradient {
        font-size: var(--diabetes-font-size-8);
        line-height: var(--diabetes-line-height-8);
      }
    }


    /* Section: Active Care */
    @layer section.active-care {
      .section-active-care {
        font-family: var(--diabetes-font-bold);
        font-size: var(--diabetes-font-size-2);
        line-height: var(--diabetes-line-height-2);
        text-align: center;
      }
      .section-active-care h2 {
        font-family: var(--diabetes-font-bold);
        font-size: var(--diabetes-font-size-4);
        line-height: var(--diabetes-line-height-4);
        margin: 0;
      }
      .section-active-care svg {
        margin-inline: auto;
        margin-block-end: var(--diabetes-gap-1);
      }
      .section-active-care picture {
        margin-block: var(--diabetes-gap-5);
      }
    }


    /* Section: Patented & Clinically Proven */
    @layer section.patented-proven {
      /* Image Grid */
      .section-patented-proven .diagram :where(pint-grid, .pint-grid) {
        row-gap: var(--diabetes-gap-1);
      }
      .section-patented-proven .diagram h2 {
        border-block-end: 1px solid var(--diabetes-black);
        font-family: var(--diabetes-font-bold);
        font-size: var(--diabetes-font-size);
        line-height: var(--diabetes-line-height);
        margin: 0 0 19px;
        text-transform: uppercase;
      }
      .section-patented-proven .diagram picture {
        margin-block-end: var(--diabetes-gap-1);
      }
      .section-patented-proven .diagram p {
        margin: 0;
      }
      @media (max-width: 767.95px) {
        .section-patented-proven .diagram h2,
        .section-patented-proven .diagram p {
          text-align: center;
        }
      }

      /* Headline CTA */
      .section-patented-proven .cta {
        font-size: var(--diabetes-font-size-2);
        line-height: var(--diabetes-line-height-2);
        margin-block-start: var(--diabetes-gap-5);
      }
      .section-patented-proven .cta h2 {
        font-size: var(--diabetes-font-size-5);
        line-height: var(--diabetes-line-height-5);
        margin: 0;
      }
      .section-patented-proven .cta p {
        margin: 0;
      }
    }


    /* Section: CTA */
    @layer section.cta {
      .section-cta {
        text-align: center;
      }
      .section-cta icon-circle {
        background-color: var(--diabetes-white);
        block-size: clamp(100px, calc( 6.25rem + ((1vw - 5px) * 14.9254)), 140px);
        border-radius: 50%;
        box-sizing: border-box;
        align-items: center;
        display: flex;
        inline-size: clamp(100px, calc( 6.25rem + ((1vw - 5px) * 14.9254)), 140px);
        justify-content: center;
        margin: 0 auto var(--diabetes-gap-1);
      }
      .section-cta h3 {
        font-size: var(--diabetes-font-size-2);
        line-height: var(--diabetes-line-height-2);
        margin: 0;
        text-transform: uppercase;
      }
      .section-cta h3 strong {
        display: block;
        font-family: var(--diabetes-font-regular);
        font-size: var(--diabetes-font-size-4);
        line-height: var(--diabetes-line-height-4);
        margin-block-end: calc( var(--diabetes-gap-1) / 2 );
        text-transform: unset;
      }
    }


    /* Section: Info */
    @layer section.info {
      .section-info {
        font-size: var(--diabetes-font-size-2);
        line-height: var(--diabetes-line-height-2);
        text-align: center;
      }
      @media (min-width: 768px) {
        .section-info br {
          display: none;
        }
      }
    }


    /* Section: Results */
    @layer section.results {

      /* Intro */
      @layer intro {
        /* H1 */
        .section-results .intro :is(h2, .h2) {
          font-size: var(--diabetes-font-size-3);
          line-height: var(--diabetes-line-height-3);
          margin: 0;
          position: relative;
        }
        .section-results .intro :is(h2, .h2) strong {
          display: block;
          font-family: var(--diabetes-font-regular);
          font-size: var(--diabetes-font-size-6);
          line-height: var(--diabetes-line-height-6);
          margin-block-end: var(--diabetes-gap-2);
        }
        .section-results .intro .icon-circle-arrow-right {
          block-size: clamp(30px, calc( 1.875rem + ((1vw - 5px) * 7.4627)), 50px);
          inline-size: clamp(30px, calc( 1.875rem + ((1vw - 5px) * 7.4627)), 50px);
          inset: 0 auto auto 0;
          position: absolute;
        }
        @media (min-width: 768px) {
          .section-results .intro :is(h2, .h2) {
            padding-inline-start: 70px;
          }
          .section-results .intro .icon-circle-arrow-right {
            transform: translate(0, 27px);
          }
        }
        @media (max-width: 767.95px) {
          .section-results .intro :is(h2, .h2) {
            padding-block-start: 50px;
          }
        }
      }

      /* Chart */
      @layer chart {
        .section-results .chart {
          font-size: var(--diabetes-font-size-1);
          line-height: var(--diabetes-line-height-1);
          text-align: center;
        }
        .section-results .chart :where(pint-grid, .pint-grid) {
          row-gap: var(--diabetes-gap-6);
        }
        .section-results .chart :where(h2, .h2) {
          font-family: var(--diabetes-font-bold);
          font-size: var(--diabetes-font-size-4);
          line-height: var(--diabetes-line-height-4);
          margin-block: var(--diabetes-gap-1) var(--diabetes-gap-5);
        }
        .section-results .chart :where(h3, .h3) {
          font-family: var(--diabetes-font-bold);
          font-size: var(--diabetes-font-size-3);
          line-height: var(--diabetes-line-height-3);
          margin: 0 0 var(--diabetes-gap-5);
          text-transform: uppercase;
        }
        .section-results .chart pint-text-gradient {
          display: block;
          font-size: var(--diabetes-font-size-8);
          line-height: var(--diabetes-line-height-8);
          margin-block-end: var(--diabetes-gap-1);
        }
        .section-results .chart em {
          display: block;
          font-size: var(--diabetes-font-size-4);
          font-style: normal;
          line-height: var(--diabetes-line-height-4);
          margin-block-end: calc( var(--diabetes-gap-1) / 2 );
        }
        .section-results .chart strong {
          display: block;
          font-size: var(--diabetes-font-size-2);
          line-height: var(--diabetes-line-height-2);
          margin-block: var(--diabetes-gap-5) calc( var(--diabetes-gap-1) / 2 );
        }
        .section-results .chart picture {
          align-items: center;
          display: flex;
          justify-content: center;
          margin-block-start: var(--diabetes-gap-4);
        }
      }

    }


    /* Section: Patient Outcomes */
    @layer section.patient-outcomes {
      .section-patient-outcomes {
        font-size: var(--diabetes-font-size-2);
        line-height: var(--diabetes-line-height-2);
      }
      .section-patient-outcomes .pint-grid {
        column-gap: var(--diabetes-gap-6);
      }
      .section-patient-outcomes h2 {
        font-size: var(--diabetes-font-size-5);
        line-height: var(--diabetes-line-height-5);
        margin: 0 0 var(--diabetes-gap-5);
      }
      .section-patient-outcomes em {
        display: block;
        font-family: var(--diabetes-font-bold);
        font-size: var(--diabetes-font-size-7);
        font-style: normal;
        line-height: var(--diabetes-line-height-7);
        margin: 0 0 var(--diabetes-gap-1);
      }
      @media (min-width: 550px) and (max-width: 767.95px) {
        .section-patient-outcomes h2,
        .section-patient-outcomes :where(pint-grid, .pint-grid) {
          text-align: center;
        }
      }
    }


    /* Section: Reference */
    @layer section.reference {
      .section-reference {
        text-align: center;
      }
    }

  }
}