/* Global styles and variables */
    :root {
      --aru-blue: #071D49;
      --blue-light: #EFF4FF;
      --grey-light: #c4c4c4;
      --grey-mid: #C0C0C0;
      --hyperlink-blue: #3274F7;
      --hyperlink-hover: #53067e;
      --white: #FFFFFF;
      --h-margin-body: clamp(1.13rem, 2.88vw + 0.55rem, 2.63rem);
      --h-margin-header-footer: clamp(1.25rem, 1.04vw + 0.75rem, 1.50rem);
      --list-alignment: 1.5rem;

      --size--1: .875rem; /*14px*/
      --size-0: 1rem; /*16px*/
      --size-1: 1.125rem; /*18px*/
      --size-2: 1.25rem; /*20px*/
      --size-3: 1.5rem; /*24px*/
      --size-4: clamp(1.125rem, 1.2vw + .88rem, 1.75rem); /*h1 size index subheading*/
      --size-5: clamp(1.5rem, 1.68vw + 1.16rem, 2.375rem); /*h1 size index*/
   }
/* Font faces and fallback fonts */
    @font-face {
      font-family: LatoRegular;
      font-style: normal;
      font-weight: 300;
      src: url(https://du11hjcvx0uqb.cloudfront.net/dist/fonts/lato/extended/Lato-Regular-bd03a2cc27.woff2);
      font-display: swap;
    }

    @font-face {
      font-family: LatoWeb;
      src: url(https://du11hjcvx0uqb.cloudfront.net/dist/fonts/lato/extended/Lato-Bold-cccb897485.woff2);
      font-style: normal;
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      ascent-override: 79.5%;
      font-family: LatoRegularFallback;
      font-stretch: 90%;
      size-adjust: 99%;
      src: local("Arial");
    }
    @font-face {
      ascent-override: 79.5%;
      font-family: LatoWebFallback;
      font-stretch: 90%;
      font-weight: bold;
      size-adjust: 97%;
      src: local("Arial");
    }
/* Base styles */
    p, ul, li, h1, h2 {
      margin: 0;
      padding: 0;
    }
    body {
      color: var(--aru-blue);
      display: flex;
      flex: 0;
      flex-direction: column;
      font-family: LatoRegular, LatoRegularFallback, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: var(--size-0);
      line-height: 1.5rem;
      margin: 0 auto;
      max-width: 72rem;
      min-height: 100vh;
    }
    a:focus-visible {
      outline-offset: 6px;
    }
/* Header styles */
    .header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      margin: clamp(0.75rem, 2.08vw + -0.25rem, 1.25rem) var(--h-margin-header-footer) 0;
    }

    .header__image {
      grid-row: 1;
    }
    .header__image--canvas {
      margin-top: .375rem;
      width: clamp(5.63rem, 7.21vw + 4.18rem, 9.38rem);
    }
    .header__image--aru {
      justify-self: end;
      width: clamp(3.69rem, 7.45vw + 2.20rem, 7.56rem);
    }
    .header__subheading--help {
      margin-bottom: clamp(2.13rem, 0.84vw + 1.96rem, 2.56rem);
    }

/* Main content styles */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 0 var(--h-margin-body);
    }

    .main--help {
      max-width: 37rem;
    }
    .main__header-1 {
      font-family: LatoWeb, LatoWebFallback, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: var(--size-5);
      grid-column: 1 / span 2;
      grid-row: 2;
      align-self: center;
      line-height: clamp(1.875rem, 2vw + 1.47rem, 2.397rem);
      margin: clamp(3.06rem, 1.80vw + 2.70rem, 4.00rem) 0 clamp(1.13rem, 3.00vw + 0.52rem, 2.69rem);
    }

    .main__header-1--help {
      font-size: var(--size-3);
      grid-column: 1 / span 2;
      grid-row: 3;
      line-height: clamp(1.5rem, 2.28vw + 1.04rem, 2.68rem);
      margin: 0 0 clamp(1.13rem, 3.00vw + 0.52rem, 2.69rem);
    }
    .main__header-2--help {
      font-family: LatoWeb, LatoWebFallback, "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: var(--size-2);
      line-height: 1.75rem;
      margin-bottom: .375rem;
    }
    .main__subheading {
      font-size: var(--size-4);
      line-height: clamp(1.50rem, 2.28vw + 1.04rem, 2.69rem);
      margin-bottom: clamp(1.69rem, 7.93vw + 0.10rem, 5.81rem);
    }
    .main__subheading--center {
      text-align: center;
    }
    .main__list {
      margin-bottom: 1rem;
      margin-left: var(--list-alignment);
    }
    .main__screenshot {
      aspect-ratio: 143/321;
      margin: 0 0 1rem var(--list-alignment);
      max-width: 100%;
    }
    .main__list-and {
      display: block;
      text-indent: calc(-1 * var(--list-alignment));
      text-transform: uppercase;
    }

    .section-space {
      margin-bottom: 2.6525rem;
    }
    .options {
      display: grid;
      grid-template-columns: 1fr;
      list-style-type: none;
      margin: 0 auto clamp(1.69rem, 7.93vw + 0.10rem, 5.81rem);
      max-width: 398px;
      row-gap: 1.25rem;
    }
    .options__item {
      border: 1.5px solid var(--grey-mid);
      border-radius: .625rem;
      cursor: pointer;
      display: grid;
      grid-template-rows: 1fr auto auto;
      padding: clamp(0.50rem ,0.60vw + 0.38rem , 0.81rem) .75rem;
    }
    .options__line-break {
      display: list-item;
      margin-left: 1rem;
      padding-left: .75rem;
    }
    .options__line-break::marker {
      content: "\2022";
    }
    .options__lead {
      margin: 0 clamp(0px ,0.48vw + -0.10rem , 0.25rem) clamp(0.75rem, 2.34vw + -0.38rem, 1.31rem);
    }
    .options__cta {
      background-color: var(--aru-blue);
      border: 2px solid transparent;
      border-radius: 7px;
      color: var(--white);
      display: flex;
      font-size: var(--size-1);
      justify-content: center;
      margin-bottom: clamp(0.19rem, 1.32vw + -0.08rem, 0.88rem);
      padding: clamp(0.53rem ,0.66vw + 0.40rem , 0.88rem) .75rem;
      text-decoration: none;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .options__cta:hover,
    .options__cta:focus {
      background-color: var(--blue-light);
      border-color: var(--aru-blue);
      color: var(--aru-blue);
    }
    .options__description {
      text-align: center;
    }
    .help-link {
      color: var(--hyperlink-blue);
      text-decoration: underline;
    }
    .help-link:hover,
    .help-link:focus {
      color: var(--hyperlink-hover);
      outline-offset: 3px;
    }
    .help-link--center {
      align-self: center;
    }
    .back {
      align-items: center;
      display: flex;
      gap: .3125rem;
      margin: 1.875rem 0 2.3125rem;
    }

/* Footer styles */
    .footer {
      border-top: 1px solid var(--grey-light);
      padding: .6875rem var(--h-margin-header-footer) 1.375rem;
    }
    .footer__list {
      list-style-type: none;
      margin-bottom: .75rem;
    }
    .footer__list-item {
      font-size: var(--size--1);
    }
    .footer__list-item a {
      color: var(--aru-blue);
      text-decoration: none;
    }
    .footer__list-item a:hover,
    .footer__list-item a:focus {
      color: var(--hyperlink-hover);
      text-decoration: underline;
    }

/* Responsive styles */
    @media (min-width: 768px) {
      .options {
        column-gap: clamp(1.00rem, 22.40vw + -9.75rem, 6.38rem);
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
      }
      .back {
        margin-top: .3125rem;
      }
      .footer {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        padding-bottom: 1.125rem;
      }
      .footer__list {
        column-gap: 1rem;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
      }
    }

