@layer content {
    lite-youtube {
      max-width: unset;
    }
  }
@layer content {
    [price-description] {
      text-wrap: pretty;
    }
  }
@layer content {
    quote-cite {
      display: block;
    }
  }
@layer content {
    quote-block {
      align-self: start;
      background: var(--callout-color);
      border-inline-start: medium solid var(--feature-color);
      border-image: linear-gradient(
          to bottom,
          var(--accent-color),
          var(--feature-color)
        )
        1;
      container: layout / inline-size;
      display: block;
      padding: var(--gap);

      &:has([quote-image]) {
        margin-block-start: 3lh;
      }

      blockquote {
        margin: unset;
      }
    }

    [quote-image] {
      inline-size: 4lh;
      margin-block-start: -3lh;
      margin-inline: auto;
    }
  }
@layer content {
    course-includes {
      display: block;

      ul {
        display: grid;
        gap: 1lh;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 25ch), 1fr));
      }

      li {
        column-gap: var(--shim);
        display: grid;
        grid: 'icon title' auto 'icon sub' auto / 1lh auto;
      }

      strong {
        display: block;
        grid-area: title;
      }

      include-icon {
        fill: var(--feature-gradient);
        grid-area: icon;
      }

      small {
        grid-area: sub;
      }
    }
  }
@layer content {
    social-icons {
      display: flex;
      gap: 1ch;
    }
  }
@layer content {
    author-bio {
      display: block;
      margin-block-start: 1lh;
    }
  }
@layer content {
    odd-news {
      column-gap: var(--gap);
      display: grid;

      @container (inline-size > 60ch) {
        grid-template-columns: minmax(auto, 50ch) minmax(50%, 1fr);
      }
    }

    #mc_embed_signup_scroll {
      display: grid;
      gap: 0.25lh;
    }

    #mce-EMAIL {
      font-size: 1.5em;
    }
  }
@layer content {
    @property --gradient-stop {
      syntax: '<length-percentage>';
      initial-value: 0%;
      inherits: false;
    }

    [page-layout] {
      --content-grid-gap: var(--spacer);
    }

    [intro-video] {
      border: thin solid var(--feature-color);
      border-image: var(--feature-gradient) 1;
    }

    [course-cta] {
      --column: full;
      background: linear-gradient(
          24deg in oklch,
          var(--accent-color) var(--gradient-stop),
          var(--feature-color)
        )
        var(--accent-color);
      border: medium solid var(--text-color);
      border-radius: 0.25em;
      color: var(--background-color);
      display: block;
      inset-block-end: calc(var(--shim) + env(safe-area-inset-bottom));
      margin: var(--shim);
      margin-block-end: unset;
      padding: var(--shim);
      position: sticky;
      text-align: center;
      transition: --gradient-stop 200ms ease;

      &:focus-visible,
      &:hover,
      &:active {
        --gradient-stop: 75%;
      }
    }
  }
@layer tools {
    color-control {
      align-content: start;
      display: grid;
      gap: 0.5lh;
    }

    input-control {
      display: grid;
    }
  }
@layer layout {
    main-nav {
      --button-padding: var(--shim);
      position: relative;

      a:any-link {
        display: inline flow-root;
        padding: var(--button-padding);
      }

      button[popovertarget] {
        &::before {
          content: '▸';
          content: '▸' / '';
          display: inline-block;
          margin-inline-end: 0.4ch;
          rotate: var(--dropdown-icon-rotate, 0turn);
          transition: rotate 150ms;
        }
      }

      li:has(:popover-open) button[popovertarget] {
        --button-color-state: var(--active-color);
        --dropdown-icon-rotate: 0.25turn;
      }

      [popover] {
        margin-block-start: var(--shim);
        position-area: end span-start;

        @supports not (position-area: end) {
          inset: calc(var(--gap) * 1.5) var(--gap) auto auto;
        }
      }
    }

    [data-loggedin='false'] #my-account-item {
      display: none;
    }

    [data-loggedin='true'] #signin-item {
      display: none;
    }
  }
@layer layout {
  #banner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    grid-area: banner;
    justify-content: space-between;
  }

  home-link {
    a{
      text-decoration: none;
    }

    [data-logo] {
      block-size: calc(1lh * var(--logo-scale, 1));
      fill: var(--link-state, var(--text-color));
      inline-size: auto;
      translate: 0 var(--svg-logo-baseline-offset);
      vertical-align: bottom;
    }

    [logo-accent] {
      fill: var(--accent-fill, var(--accent-color));
    }
  }

  home-link,
  main-nav {
    padding: var(--banner-item-padding);
  }
}