.app-root {
  border-bottom-right-radius: var(--radius1);
  border-bottom-left-radius: var(--radius1);
  overflow: clip;
}


/*
.testerButton,
select,
button,
.nav-item {
  transition: opacity .3s, background .3s var(--ease1);
}
*/

@keyframes rainbow {
  0% {
    background-color: #ffc9f8;
  }
  10% {
    background-color: #ffc9d7;
  }
  20% {
    background-color: #ffdbc9;
  }
  30% {
    background-color: #fffbc9;
  }
  40% {
    background-color: #e2ffc9;
  }
  50% {
    background-color: #c9ffd0;
  }
  60% {
    background-color: #c9fff1;
  }
  70% {
    background-color: #c9edff;
  }
  80% {
    background-color: #c9cdff;
  }
  90% {
    background-color: #e6c9ff;
  }
  100% {
    background-color: #ffc9f8;
  }
}



#about,
.infoInformation,
.customProjectBody {
  padding: var(--margin-y) var(--margin-x);
}

#buy {
  padding: var(--margin-y) var(--margin-x); 
  place-content: center;
  display: flex;
}

#tester {
  padding: 0;
}

#features {
  padding: var(--margin-y) var(--margin-x);
}

#customDetails {
  padding: 0 var(--margin-x) var(--margin-y) var(--margin-x);
}

.page.customPage {
  padding: 0 var(--margin-x) var(--margin-y) var(--margin-x); 
}

.typefacesSection {
  padding: var(--margin-y) var(--margin-x); 
}


/* ==========================================================================
   TYPEFACES PAGE
   ========================================================================== */

.page.typefacesPage {
  background: var(--purple1);
  min-height: 100vh;
}

.indexLanding {
  height: 100vh;
  width: 100vw;
  background: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
}

.landingVideo {
  height: 80%;
  display: flex;
  justify-content: center;
  width: 100%;
}

.landingWordmark {
  max-width: 80%;
  max-height: 80%;
  display: block;
}

.typefacesSectionInput {
  position: sticky;
  top: 1.25rem;
  z-index: 10;
  margin: calc( (var(--button1) + var(--space-l)) * -1 ) auto var(--space-l);
  width: auto;
  min-width: 0;
  field-sizing: content;
  max-width: calc(100vw - (var(--margin-x) * 2));
  background: var(--purple3);
  font-family: inherit;
  font-size: var(--font-size4);
  text-align: center;
  cursor: text;
}

.typefacesSectionInput::placeholder {
  text-align: center;
  color: var(--black);
}

.typefacesGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  gap: var(--margin-x);
}

.typefaceCard {
  text-decoration: none;
  color: var(--black);
  background: var(--white);
  margin: 0;
  overflow: hidden;
  aspect-ratio: 7/4;
}

.typefacesSection:not(.is-previewing) .typefaceCard.is-transitioning-blurb .typefaceDisplay .typefaceName {
  display: none;
}

.typefacesSection:not(.is-previewing) .typefaceCard.is-transitioning-blurb .typefaceDisplay .typefaceBlurb {
  display: block !important;
}

.typefacePreview {
  display: none;
  font-size: 10vw;
  text-wrap: auto;
}

.typefacesSection.is-previewing .typefaceDisplay .typefaceName,
.typefacesSection.is-previewing .typefaceDisplay .typefaceBlurb {
  display: none !important;
}

.typefacesSection.is-previewing .typefaceDisplay .typefacePreview {
  display: block !important;
}

.typefacesSection.is-previewing.is-preview-length1 .typefaceDisplay .typefacePreview {
  font-size: 12vw !important;
}

.typefacesSection.is-previewing.is-preview-length2 .typefaceDisplay .typefacePreview {
  font-size: 10vw !important;
}

.typefacesSection.is-previewing.is-preview-length3 .typefaceDisplay .typefacePreview {
  font-size: 8vw !important;
}

.typefacesSection.is-previewing.is-preview-length3 .typefaceDisplay .typefacePreview {
  font-size: 6vw !important;
}

.typefacesSection.is-previewing .typefaceCard.is-transitioning-blurb .typefaceDisplay .typefacePreview {
  display: none !important;
}

.typefacesSection.is-previewing .typefaceCard.is-transitioning-blurb .typefaceDisplay .typefaceName {
  display: block !important;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .testerButton:hover,
  html:not(.is-touch-like) select:hover {
    opacity: 0.7;
  }

  html:not(.is-touch-like) .typefacesSection:not(.is-previewing) .typefaceCard:hover .typefaceDisplay .typefaceName {
    display: none;
  }

  html:not(.is-touch-like) .typefacesSection:not(.is-previewing) .typefaceCard:hover .typefaceDisplay .typefaceBlurb {
    display: block !important;
  }

  html:not(.is-touch-like) .typefacesSection.is-previewing .typefaceCard:hover .typefaceDisplay .typefacePreview {
    display: none !important;
  }

  html:not(.is-touch-like) .typefacesSection.is-previewing .typefaceCard:hover .typefaceDisplay .typefaceName {
    display: block !important;
  }
}

.typefaceDisplay {
  margin: 0;
  height: 100%;
  text-wrap: nowrap;

  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

@media (max-width: 1000px) {

  .typefacesGrid {
    grid-template-columns: 1fr;
  }

  .typefaceCard {
    aspect-ratio: 8/4;
  }

  .typefaceName {
    font-size: calc(var(--typeface-name-size) * 2) !important;
  }
}


/* ==========================================================================
   INFO PAGE
   ========================================================================== */

.infoPage {
  background: var(--grey1);
}

.infoWrap {
  margin: 0 auto;
  justify-content: center;
}

.infoAbout {
  position: relative;
  align-content: center;
}

:root {
  --text-block-width: 42rem;
}

.navHighlighted {
}

.infoAbout .centerText {
  position: relative;
  margin: 0 var(--margin-x);
}

.infoBody {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.centerText p {
  margin: 0;
  max-width: 50rem;
}

.bigTitle {
  margin: 0;
  padding-top: var(--margin-y);
  line-height: 0.9;
}

.bigTitle + .centerText p {
  margin-top: 2rem;
}

.centerText p + p {
  margin-top: 2rem;
}

.infoLinks {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.infoLink {
  text-align: center;
  width: 100%;
}

.infoInformation {

}

.infoInformationBody {
  display: grid;
  gap: var(--space-xl);

  align-items: start;
  justify-items: center;
  justify-content: center;
}

.infoInfoGroup {
  border-radius: var(--radius1);
  overflow: hidden;
  position: relative;
  transition: max-height var(--trans-m) ease, box-shadow var(--trans-m) var(--ease1);
  width: var(--infoCardWidth)
}

.infoInfoGroup.is-collapsed {
}

.infoInfoGroup.is-collapsed .infoInfoItem {
  pointer-events: none;
}

.infoInfoGroupTitle {
  margin: 0;
  padding: var(--space-m) var(--space-l);
  text-align: center;
  background: var(--purple1);
}

.infoInfoItem {
  padding: var(--space-xl) var(--space-l) 0 var(--space-l);
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: var(--space-m);
  align-items: start;
  background: var(--white);
  width: 100%;
}

.infoInfoItem + .infoInfoItem {

}

.infoInfoItem.subheading {
  padding-top: 1rem;
}

.infoInfoItem:last-child {
  padding-bottom: var(--space-xl);
}

@media (max-width: 950px) {
  .infoInfoItem {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .infoInfoItemHeading,
  .infoInfoItemText {
    width: 100%;
    max-width: none;
  }
}

.infoInfoGroupLinks {
  padding: var(--space-xl) var(--space-l) var(--space-l) var(--space-l);
  background: var(--white);
}

.infoInfoItemHeading,
.infoInfoItemText p,
.infoLegalItem dt,
.infoLegalItem dd {
  margin: 0;
}

.infoInfoItemHeading {
  max-width: 20rem;
  margin-top: 0.1rem;
}

.infoInfoItemHeadingNumber {
  display: inline-block;
  width: 2rem;
}

.infoInfoItemHeading.subheading {
  color: var(--black);
  opacity: 0.3;
}

.infoInfoItemText {

}

.infoInfoItemHeading,
.infoLinks {
  min-width: 6rem;
}

.infoInfoItemText p + p {
  margin-top: 1rem;
}

.infoInfoGroupLinks .infoLinks {
  margin-top: 0;
  min-width: 0;
}

.infoLinks {
  align-items: center;
  height: 100%;
}



#infoLegal {
  background: var(--white);
}

.legalGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-l);
  text-wrap: balance;
}
/*
.infoLegalList {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-l);
}

.infoLegalItem dd {
  margin-top: var(--space-s);
}

@media (max-width: 1000px) {
  .infoWrap,
  .infoInfoItem {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .infoLegalList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .infoLegalList {
    grid-template-columns: 1fr;
  }
}
*/

.app-root.is-route-entering {
  /* Incoming route content is prepared here while the veil is opaque. */
  visibility: hidden;
}

.spaRouteTransitionScreen {
  position: fixed;
  inset: 0;
  z-index: 23;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity var(--spa-route-screen-current-fade-ms, var(--spa-route-screen-fade-out-ms, 450ms)) var(--ease2),
    background-color var(--spa-route-screen-current-fade-ms, var(--spa-route-screen-fade-out-ms, 450ms)) var(--ease2);
  will-change: opacity;
}

.spaRouteTransitionScreen.is-visible {
  opacity: 1;
}

/* ==========================================================================
   HEADER (NAV)
   ========================================================================== */

#header {
  width: auto;
  position: fixed;
  top: var(--nav-y);
  left: var(--nav-x);
  z-index: 24;
  gap: var(--space-l);
  display: grid;
  gap: 0.2rem;
  justify-content: left;
  justify-items: left;
}

#header.projectPage,
#header.infoPage {

}

#header.typefacesPage,
#header.customPage,
#header.customProjectPage {

}

.nav-item {
  transition: background-color var(--trans-m) var(--ease1);
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .nav-item:hover,
  html:not(.is-touch-like) .buttonBlack:hover .headerBasketBadge {
    background: var(--purple1);
    color: var(--black);
  }
}

.header-item {
  display: none;
  position: relative;
}

.header-item.is-revealed {
  display: flex;
}

#header-basket {
  margin-right: 0.2rem;
}

.headerBasketBadge {
display: inline-block;
position: absolute;
background: var(--black);
color: var(--white);
padding: 0;
border-radius: 5rem;
height: var(--button2);
width: var(--button2);
top: 0;
right: calc(var(--button2) * -1 - .1rem);
}

.headerBasketCount {
  font-size: var(--font-size2);
  display: block;
  text-align: center;
  line-height: var(--button2);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


#navScreen {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: var(--grey8);
  z-index: 21;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease2);
}

/* ==========================================================================
   PROJECT NAV
   ========================================================================== */

#projectNav,
#infoNav,
#privacyNav,
#termsNav {
  position: fixed;
  top: var(--space-s);
  bottom: auto;
  left: auto;
  width: auto;
  display: flex;
  justify-content: right;
  right: var(--space-s);
  z-index: 22;
  height: auto;
}

#projectNav.is-fixed,
#infoNav.is-fixed,
#privacyNav.is-fixed,
#termsNav.is-fixed {
  position: fixed;
  top: var(--nav-y);
  bottom: auto;
  left: auto;
  right: var(--nav-x);
}

.sectionLinks {
  display: inline-flex;
  gap: var(--space-s);
  width: fit-content;
}

.sectionLinks[aria-label="Project sections"],
.sectionLinks[aria-label="Info sections"],
.sectionLinks[aria-label="Privacy sections"],
.sectionLinks[aria-label="Terms sections"] {
display: grid;
gap: 0.2rem;
justify-content: right;
justify-items: right;
}

.projectNavLink,
.infoNavLink,
.privacyNavLink,
.termsNavLink {
  display: none;
}

.projectNavLink.is-active,
.projectNavLink.is-revealed,
.infoNavLink.is-active,
.infoNavLink.is-revealed,
.privacyNavLink.is-active,
.privacyNavLink.is-revealed,
.termsNavLink.is-active,
.termsNavLink.is-revealed {
  display: inline-flex;
}

.sectionLink {
  display: inline-flex;
}

.sectionLink a {
  text-decoration: none;
  border: none;
  color: var(--black);
}



[data-page-type='typeface-project'] {
  background: var(--white);
}

/* ==========================================================================
   PROJECT LANDING
   ========================================================================== */

#projectLanding {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  justify-content: center;
  height: 100vh;
  background: var(--black);
  width: 100vw;
}

.projectLandingHero {
  margin: 0;
  width: 100%;
  height: auto;
height: 100vh;
align-items: center;
display: flex;
background: var(--black);
}

.projectLandingHero .svg-inject,
.projectLandingHero svg.svg-inject {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--white);
}

#projectLandingTitle {
  text-align: center;
  color: var(--white);
  margin-bottom: 2vh;
}

.projectLandingBubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@media (max-width: 800px) {
  .projectLandingBubbles {display: none;};
}

@keyframes bubbleBob {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.45rem;
  }
}

.projectLandingBubble {
  position: absolute;
  left: 50%;
  top: 50%;
  --bubble-y: 0px;
  --bubble-rotate: 0deg;
  --bubble-scale: 0.95;
  transform: translate(-50%, calc(-50% + var(--bubble-y))) rotate(var(--bubble-rotate)) scale(var(--bubble-scale));
  transform-origin: center center;
  translate: 0 0;
  background: var(--purple1);
  color: var(--black);
  border-radius: 999vw;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s var(--ease1);
  will-change: opacity, transform, translate;
  animation-name: bubbleBob;
  animation-duration: 4.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.projectLandingBubble.is-visible {
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

#about {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xl);
  max-width: var(--narrow-block);
  margin: auto;
  background: var(--white);
}

.about-info {
  grid-column: 1 / span 2;
}

.about-blurb {
  grid-column: 3 / span 4;
}

@media (max-width: 800px) {
  .about-info {
    grid-column: 1 / span 6;
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: var(--space-l);
  }

  .customIntroSection .about-info {
    grid-template-columns: 1fr;
  }

  .about-info .detailsGroup + .detailsGroup {
    margin-top: 0;
  }

  .about-blurb {
    grid-column: 1 / span 6;
  }

  .about-info {
    order: 1;
  }
}

#details {
  padding: var(--margin-y) var(--margin-x) 0 var(--margin-x);
  display: flex;
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  max-width: var(--narrow-block);
  margin: auto;
}

.detailsGrid {
  display: grid;
  padding: var(--margin-y) 0 0 0;
  max-width: var(--narrow-block);
  margin: auto;

  grid-template-columns: repeat(6, 1fr);
  gap: var(--margin-x);
}

.detailsGroup1 {
  grid-column: 1 / span 2;
}

.detailsGroup2 {
  grid-column: 3 / span 4;
}

.detailsGroupValue {
  opacity: 0.5;
  margin-top: 0.2rem;
}

.detailsGroupValue span {
  width: 4rem;
  display: inline-block;
}

.detailsGroup + .detailsGroup {
  margin-top: var(--space-l);
}

@media (max-width: 800px) {

  .detailsGrid {
    grid-template-columns: 1fr;
  }

.detailsGroup1 {
  grid-column: 1 / span 6;
}

.detailsGroup2 {
  grid-column: 1 / span 6;
}

}

/* ==========================================================================
   TESTER
   ========================================================================== */

#tester {
  display: flex;
  flex-wrap: wrap;
  background: var(--purple1);
  margin: 0 var(--margin-x);
  border-radius: var(--radius1);
}

.tester {
  position: relative;
}

.tester + .tester {  }

#tester .tester {
  flex: 0 0 100%;
  min-width: 0;
}

#tester .tester[data-tester-width="50"] {
  display: none;
}

/* Half width on desktop */
@media (min-width: 900px) {
  #tester .tester[data-tester-width="50"] {
    flex: 0 0 50%;
    display: block;
    display: flex;
  }

  [data-tester-width="50"] .testerStage {
    padding-right: 1.5vw !important;
  }

  [data-tester-width="50"] + [data-tester-width="50"] .testerStage {
    padding-left: 1.5vw !important;
    padding-right: 3vw !important;
  }
}

.testerControls {
  gap: 0 var(--space-m);
  align-items: center;
  opacity: 0.5;
  transition: opacity var(--trans-s) var(--ease1);

}

.testerControlsMain {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

@media (max-width: 900px) {
  .testerControls { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .tester:hover .testerControls { opacity: 1; }
}

@media (max-width: 800px) {
  #tester,
  .testerControls--sticky {
    pointer-events: none;
  }

  #tester .testerSpecimen {
    -webkit-user-select: none;
    user-select: none;
  }
}

.testerControls--sticky {
  position: fixed;
  left: 2rem;
  right: 0;
  bottom: 0;
  width: calc(100% - 4rem);
  z-index: 30;
  background: var(--purple3);
  opacity: 1;
  transition: opacity var(--trans-s) var(--ease1);
  border-top-left-radius: var(--radius1);
  border-top-right-radius: var(--radius1);

    left: 0;
    right: 0;
    bottom: var(--margin-x);
    width: fit-content;
    min-width: 50vw;
    max-width: 100vw;
    border-radius: var(--radius1);
    margin: auto;
}

.testerControls--sticky.is-bounce-in {
  transform-origin: center bottom;
  animation: fadeSlide 0.1s var(--ease3);
}

.testerControls--sticky.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.testerControls--sticky.is-removed {
  display: none;
}

.testerLabel {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: center;
  color: var(--black);
  flex: 0 0 auto;
  cursor: pointer;
}

.testerLabel .dropCaret {
  pointer-events: none;
}

.testerLabel--ghost {
  visibility: hidden;
  display: none;
  pointer-events: none;
  flex: 0 0 0;
  width: 0;
  overflow: hidden;
}

.testerSliders {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  min-width: 0;
  align-items: center;
}

.testerSliderControl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  min-width: 0;
}

.testerSliderLabelWrap {
  position: relative;
  flex: 0 0 max-content;
  min-width: max-content;
}

.testerSliderLabelWrap .rangeLabel,
.testerSliderReadout {
  transition: opacity 0s var(--ease3);
}

.testerSliders .rangeLabel {
  flex: 0 0 auto;
}

.testerSliders .testerRange {
  flex: 0 0 var(--tester-slider-track-width, 10rem);
  min-width: 0;
  max-width: var(--tester-slider-track-width, 10rem);
  width: var(--tester-slider-track-width, 10rem);
}

.testerSliders.is-single-slider .testerSliderControl {
  flex: 1 1 auto;
}

.testerSliders.is-single-slider .testerRange {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

.testerLabel--slider,
.testerVarAxis {
  flex: 1 1 20rem;
}


.testerVarAxis span {
  text-transform: uppercase;
}

.testerInput,
.testerSelect {

}

/* Custom Style dropdown (enhanced select) */
.testerSelect--nativeHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.testerDropdown {
  position: relative;
  display: inline-block;
  width: var(--tester-dropdown-button-width, auto);
}

.testerDropdownButton {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.75rem;

  font: inherit;
  width: auto;
  padding: 0;
  min-width: calc(var(--tester-dropdown-text-width, 0px) + 1.6rem);

  border: none;
  background: transparent;
  cursor: pointer;

  color: var(--black);
  text-align: left;
}

.testerDropdownCaret {
  width: 0.75em;
  flex: 0 0 auto;
  display: inline-block;
  text-align: center;
  line-height: 1;
}

.testerDropdownMenu {
  position: absolute;
  left: -0.3rem;
  bottom: calc(100% + 1px);
  width: fit-content;
  min-width: var(--tester-dropdown-button-width, auto);
  background: var(--purple1);
  padding: 0;
  margin: 0;
  z-index: 29;
  display: none;
  border-left: 1px solid var(--black);
  border-right: 1px solid var(--black);
}

.testerDropdown.is-open .testerDropdownMenu { display: block; }

.testerControls--sticky .testerDropdownMenu {
  top: auto;
  bottom: calc(100% + 1px);
  bottom: calc(100% + 1px + calc(var(--font-size2) / 2))
}

.testerDropdownOption {
  font: inherit;
  display: block;
  width: 100%;
  padding: 0 0.5rem;
  line-height: calc(var(--font-size2) * 2.4);

  border: none;


  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--black);
  text-wrap: nowrap;
}

.testerDropdownOption:focus {
  background: rgba(0, 0, 0, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .testerDropdownOption:hover {
    background: rgba(0, 0, 0, 0.08);
  }
}

.testerDropdownOption.is-selected,
.testerDropdownOption[aria-selected="true"] {

  color: var(--black);
}

.testerDropdownButtonText {
  white-space: nowrap;
  display: inline-block;
  min-width: var(--tester-dropdown-text-width, auto);
}


/* ---- Tester sliders (range) ---- */

.testerRange {
  -webkit-appearance: none;
  appearance: none;
  max-width: 30rem;
  height: var(--font-size2);
  background: transparent;
  cursor: pointer;
}

.testerRange:focus { outline: none; }

.testerRange::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: var(--font-size2);
  background: var(--white);
  border-radius: var(--radius2);
}

.testerRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--font-size2);
  height: var(--font-size2);
  border-radius: 10vw;
  background: var(--black);
  border: 0;
}

.testerRange::-moz-range-track {
  height: var(--font-size2);
  background: var(--white);
  border-radius: var(--radius2);
}

.testerRange::-moz-range-thumb {
  width: var(--font-size2);
  height: var(--font-size2);
  border-radius: 10vw;
  background: var(--black);
  border: 0;
}

.testerRange::-moz-focus-outer { border: 0; }

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .testerRange:hover::-webkit-slider-thumb,
  html:not(.is-touch-like) .testerRange:hover::-moz-range-thumb {
    transform: scale(1.02);
  }
}

.rangeLabel {
  opacity: 1;
  color: var(--black);
}

.testerSliderReadout {
  opacity: 0;
}

.testerSizeReadout,
.testerVarReadout {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--black);
  white-space: nowrap;
}

.testerSliderControl.is-thumb-hover .testerSliderLabelWrap .rangeLabel,
.testerSliderControl.is-thumb-dragging .testerSliderLabelWrap .rangeLabel {
  opacity: 0;
}

.testerSliderControl.is-thumb-hover .testerSliderReadout,
.testerSliderControl.is-thumb-dragging .testerSliderReadout {
  opacity: 1;
}

.testerButton {
  font: inherit;
  padding: 0;
  border: none;

  border-radius: 0.6rem;
  background: transparent;
  cursor: pointer;
}

.testerButton[aria-pressed='false'] {
  opacity: 0.2;
}

.testerOT { margin-top: 1.25rem; }

.testerOTTitle {
  margin-bottom: 0.6rem;
}

.testerOTGrid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}

.testerOTButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex: 0 0 100%;
  width: 100%;
  max-height: calc(0.5rem + (var(--font-size2) * var(--line-height)));
  transition-duration: 0.2s, var(--trans-l);
  transition-property: opacity, max-height;
  transition-timing-function: var(--ease1);

  opacity: 1;
  margin-top: 0.5rem;
}

.testerOTButtons.is-hidden {
  margin-top: 0rem;
  max-height: 0rem;
  opacity: 0;

}

.testerTypographyControls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex: 0 0 100%;
  width: 100%;
  max-height: calc(0.5rem + (var(--font-size2) * var(--line-height)));
  transition-duration: 0.2s, var(--trans-l);
  transition-property: opacity, max-height;
  transition-timing-function: var(--ease1);
  opacity: 1;
  margin-top: 0.5rem;
  overflow: hidden;
}

.testerTypographyControls.is-hidden {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
}

.testerTypographyControl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 50%;
  min-width: 0;
}

.testerTypographyLabelWrap {
  position: relative;
  flex: 0 0 auto;
}

.testerTypographyLabelWrap .rangeLabel,
.testerTypographyReadout {
  transition: opacity 0s var(--ease3);
}

.testerTypographyReadout {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  color: var(--black);
  white-space: nowrap;
}

.testerTypographyControl.is-thumb-hover .testerTypographyLabelWrap .rangeLabel {
  opacity: 0;
}

.testerTypographyControl.is-thumb-dragging .testerTypographyLabelWrap .rangeLabel {
  opacity: 0;
}

.testerTypographyControl.is-thumb-hover .testerTypographyReadout {
  opacity: 1;
}

.testerTypographyControl.is-thumb-dragging .testerTypographyReadout {
  opacity: 1;
}

.testerTypographyControl .testerRange {
  flex: 1 1 auto;
  min-width: 0;
}

.testerOTToggle {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--black);
}

.testerOTToggleCaret {
  display: inline-block;
  line-height: 1;
}

.testerAlignButtons {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  flex: 0 0 auto;
}

.testerAlignIcon {
  display: inline-flex;
  width: 1.4rem;
  height: 1rem;
}

.testerAlignIcon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.testerAlignButton.is-active,
.testerAlignButton[aria-pressed="true"] {
  color: var(--black);
  opacity: 1 !important;
}

.testerOTButton.is-active,
.testerOTButton[aria-pressed="true"] {
  opacity: 1;
  background: var(--white);
  border-radius: 2rem;
}

.testerOTButton {
  padding: 0 0.5rem;
  margin: 0 0.2rem;
}

.testerToggle {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.6rem;
  padding: 0.55rem 0.7rem;
}

.testerToggle input { transform: translateY(1px); }

.testerStyleLabel {
  position: absolute;
  top: 1.5rem;
  left: 0;
  width: 100%;
  text-align: center;
}

.testerStage {
  padding: calc(2.9rem + 4vw) 3vw calc(2.6rem + 4vw) 3vw;
  text-align: center;
  caret-color: var(--black);
  color: var(--black);
  overflow: hidden;
  transition: box-shadow var(--trans-m) var(--ease1);
  width: 100%;
  align-content: center;
}

.tester + .tester {
  border-top: 1px solid var(--black);
}

.testerImage {
  display: block;
  width: 100%;
  height: auto;
}

.testerSpecimen {
  outline: none;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.0;
  overflow: visible;
  /* WebKit can clip variable-font ascenders at tight line-height values.
     Keep visual line-height at 1.0 while adding hidden top headroom. */
  padding-top: 0.2em;
  margin-top: -0.2em;
}

.testerSpecimen.is-multicol {
  display: grid;
  grid-template-columns: repeat(var(--tester-columns, 2), minmax(0, 1fr));
  column-gap: 1em;
  align-items: start;
  padding-top: 0;
  margin-top: 0;
}

.testerSpecimenColumn {
  min-width: 0;
  white-space: pre-wrap;
  word-break: inherit;
  padding-top: 0.2em;
  margin-top: -0.2em;
}

.testerSpecimenColumnSizer {
  box-sizing: border-box;
  z-index: -1;
}

.tester--image {
  margin: 0;
  border-top: 1px solid;
}

/* ==========================================================================
   FEATURES
   ========================================================================== */


#tester {

}

#features {
  background: var(--white);
}

#buy {
  background: var(--purple1);
}

.features {
  display: grid;
}

.features + .features {
  margin-top: var(--space-l);
}

.features-grid {
  gap: var(--margin-x);
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column: 1 / span 6;
  height: fit-content;
}

.features-grid > .feature {
  /*
  flex: 0 0 calc((100% - (var(--margin-x) * 2)) / 3);
  max-width: calc((100% - (var(--margin-x) * 2)) / 3);
  */

}

.features-grid > .feature:nth-child(5n+4) {

}

.features-grid > .feature:nth-child(5n+5) {

}

/*
@media (max-width: 1100px) {
  .features-grid > .feature {
    flex-basis: calc((100% - var(--margin-x)) / 2);
    max-width: calc((100% - var(--margin-x)) / 2);
  }
}
*/

@media (max-width: 900px) {

  .features-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .features-grid > .feature {
    grid-column: 1 / span 1 !important;
  }

}

.feature-images {
  position: relative;
  width: 100%;
  height: 100%;
  align-content: center;
}

.feature1,
.feature2 {
  opacity: 1;
  
}

.feature-images img,
.feature-images svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  align-self: center;
  user-select: none;
}

.feature-images svg,
.feature-images svg * {
  vector-effect: non-scaling-stroke;
}

.st1 {
  opacity: 1;
}

/* Ensure the container has height (from the first image) */
.feature-images img:first-child,
.feature-images svg:first-child {
  position: relative;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */

#gallery {
  background: var(--grey10);
  padding: var(--margin-y) 0;
  min-height: calc(100vh + 1px);
  display: flex;
  align-items: center;
  width: 100vw;
  overflow-x: hidden;
}

.galleryCarousel {
  position: relative;
}

/* Hide occasional 1px subpixel seams at carousel edges during motion. */
.galleryCarousel::before,
.galleryCarousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--grey10);
  pointer-events: none;
  z-index: 1;
}

.galleryCarousel::before {
  left: 0;
}

.galleryCarousel::after {
  right: 0;
}

.gallery {
  display: flex;
  gap: var(--margin-x);
  padding: 0 var(--margin-x);
  box-sizing: border-box;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  align-items: center;
  height: -webkit-fill-available;
}

.gallery::-webkit-scrollbar {
  display: none;
}

.galleryItem {
  position: relative;
  flex: 0 0 calc((100% - var(--margin-x)) / 2);
  margin: 0;
  overflow: visible;
  scroll-snap-align: start;
}

.galleryItem img,
.galleryItem svg,
.galleryItem video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  border-radius: var(--radius1);
}

.galleryItemLabel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2rem;
  margin: 0;
  padding: var(--space-m) var(--space-s) var(--space-s);
  /*background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));*/
  color: var(--white);
  text-align: center;
  z-index: 1;
}

.galleryItemLabelLink {
  color: inherit;
  text-decoration: none;
  border: none;
}

.galleryCarouselButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--button1);
  height: var(--button1);
  border-radius: 999px;
  border: none;
  background: var(--purple1);
  color: var(--black);
  font: inherit;
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans-s) var(--ease1);
  z-index: 2;
  cursor: pointer;
}

.galleryCarouselButton--prev {
  left: calc(var(--space-l) - 1rem);
}

.galleryCarouselButton--next {
  right: calc(var(--space-l) - 1rem);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .galleryCarousel:hover .galleryCarouselButton {
    opacity: 1;
    pointer-events: auto;
  }
}

.gallery.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

@media (max-width: 900px) {
  .galleryItem {
    flex-basis: 100%;
  }
}


/* ==========================================================================
   GLYPH CHART
   ========================================================================== */

#glyphset {
  padding: var(--margin-y) var(--margin-x) var(--margin-y) var(--margin-x);
}

:root {
  --glyphCells-aspect: 1.2;
  --glyphCells-size: 0.6;
  --glyphCells-line: 1.3;
}

.glyphChart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

/* Glyph Chart Left */

.glyphChartOverview {
  position: sticky;
  top: var(--margin-x);
  min-width: 0;
  overflow: visible;
  background: var(--purple1);
  outline: none;
  z-index: 3;
  border-radius: var(--radius1);
  overflow: hidden;

  height: calc(100vh - (var(--margin-x)*2));
  display:  grid;
  grid-template-rows: auto 1fr auto;
  transition: box-shadow var(--trans-m) var(--ease1);
}

.glyphChartOverviewTop {
  display: flex;
  justify-content: space-between;
  gap: var(--space-l);
  outline: none;
}

select {
  border: none;
  background: none;
  color: var(--black);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.glyphChartOverviewTop,
.glyphChartReadout {
  background: var(--purple1);
  z-index: 10;
}

.glyphChartBigWrapHolder {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  align-items: center;
}

.glyphChartBigWrap {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: visible;
  align-items: flex-end;
  width: 100%;
}

.glyphChartBig {
  font-size: 55vh;
  font-size: 30vw;
  font-size: 45vmin;
  line-height: 1;

  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: center;

  border-left: 1px solid var(--grey9);
  border-right: 1px solid var(--grey9);

  padding: 0;
  margin: 0;

  padding: 50vh 0 50vh 0;
  margin: -50vh 0 -50vh 0;
  user-select: auto;
  -webkit-user-select: auto;
  z-index: 1;
}

.glyphChartMetrics {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glyphMetricLine {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--grey9);
}

.glyphMetricLine span {
  position: absolute;
  left: 8px;
  top: -10px;
  background: var(--purple1);
  padding: 0 6px;
}

.glyphChartStyle {
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.glyphChartStyle .testerLabel {
  gap: 0.35rem;
  color: var(--black);
}

.glyphChartStyle select {
  color: var(--black);
}

.glyphChartReadout--corner {
  left: 0;
  z-index: 2;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}

.glyphChartReadoutLine {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-l);
}

@media (max-width: 1100px) { /* Make space for text wrapping onto second line */
  .glyphChartReadoutLine:first-child{ min-height: calc( var(--font-size1) * 2 * var(--line-height) ); }
}

.glyphChartReadoutCharacter {
  display: flex;
  justify-content: space-between;
}

.glyphChartReadoutValue {
  text-align: left;
  text-wrap: balance;
  margin-right: 1rem;
}

.glyphChartReadoutFeatures {

}


/* Glyph Chart Right */

.glyphChartGrid {

}

.glyphGroupHeader {
  text-align: center;
}

.glyphGroup {
  overflow: hidden;
  transition: max-height var(--trans-m) var(--ease1);
}

.glyphGroupToggle {
  position: relative;
  width: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--black);
  text-align: center;
  font: inherit;
  cursor: pointer;
}

.glyphGroupCaret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75em;
  display: inline-block;
  text-align: center;
  line-height: 1;
}

.glyphGroup.is-collapsed .glyphCells {
  opacity: 0;
  pointer-events: none;
}

.glyphCellGlyph {
  position: relative;
  z-index: 2;
  pointer-events: none;
  text-align: center;
  color: var(--black);
}

.glyphCell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--purple3);
  border-radius: var(--radius2); 
  opacity: 0;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .glyphCell:hover::before {
    opacity: 1;
  }
}

.glyphCell.is-selected::before {
  background-color: var(--purple1);
}

.glyphCell.is-selected::before {
  opacity: 1;
}

.glyphCells {
  display: grid;
  gap: 0;
  opacity: 1;
  transition: opacity var(--trans-m) var(--ease1);
}

.glyphCell {
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--grey0);
  transition: background var(--trans-s) var(--ease1);
  z-index: 1;
  position: relative;
  place-items: center;
}

.glyphCell.is-selected {
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .glyphCell:hover {
    z-index: 2;
  }
}


/* ==========================================================================
   BUY SECTION
   ========================================================================== */

.buyLayout,
.basketCardsGrid {
  gap: 0 1rem;
  align-items: start;
  justify-items: center;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  width: min(100%, calc( var(--basketCardWidth) * 2 + 1rem ));
}

@media (max-width: 1600px) {
  .buyLayout,
  .basketCardsGrid {
    width: 100%;
  }
}


.buyLayout {
  grid-template-columns: repeat(2,1fr);
}

.basketCardsGrid {
  grid-template-columns: repeat(1,1fr);
  margin: auto;
}

.buyProducts,
.buyLicensing,
.basketCard  {
  background: var(--white);
  border-radius: var(--radius1);
  overflow: hidden;
  transition: box-shadow var(--trans-m) var(--ease1), opacity var(--trans-m) var(--ease1);
}

.buyProducts,
.buyLicensing {
  width: 100%;
}

.basketCard {
  width: var(--basketCardWidth);
}

@media (max-width: 800px) {
  .basketCard {
    width: 100%;
  }
}

.basketCard + .basketCard {
  margin-top: var(--margin-x);
}

.buyProducts {
  background: var(--grey1);
}
/*
@media (max-width: 1100px) {
.buyProducts,
.buyLicensing,
.basketCard,
.trialsPage .basketCard--trials {
  width: min(50rem, 100%);
  }
}
*/
.basketGroupTitle,
.buyLicensingTitle {
  margin: 0;
  font: inherit;
}

.stylesLabel {
  color: var(--grey7);
}

.basketGroup {
  overflow: hidden;
  transition: max-height var(--trans-m) ease, box-shadow var(--trans-m) var(--ease1);
}

.basketGroup.is-collapsed .basketRows {
  pointer-events: none;
}

.basketRows {
  padding: var(--space-m) 0;
  background: var(--grey1);
}

.basketRows.basketCardItemsList {
  background: none;
}

.basketRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-items: center;
  color: var(--black);
  cursor: pointer;
  position: relative;
}

.basketRow + .basketRow {
  padding-top: var(--space-s);
}


.trialsFontLine,
.basketRowName {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  line-height: 1;
  text-align: center;
  transition: opacity var(--trans-m) var(--ease1);
}

.basketRowName {
  opacity: 0.2;
  max-width: 90%;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .basketRow:hover .basketRowName {
    opacity: 0.4;
  }
}

.basketStyleLine {
  display: block;
}

.basketRowPrice {
  line-height: 1;
  white-space: nowrap;
  position: absolute;
  right: var(--space-l);
  top: 55%;
  transform: translateY(-50%);
  opacity: 0.2;
  transition: opacity var(--trans-m) var(--ease1);
}

/*
.basketRow:active .basketRowName {
  animation: bounce 0.2s ease-in-out;
}
*/

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .basketRow:hover .basketRowPrice {
    opacity: 0.4;
  }
}

.basketRow.is-selected .basketRowName,
.basketRow.is-selected [data-price-label].basketRowPrice {
  opacity: 1 !important;
}

.basketRow--packageFamily {
  cursor: default;
  pointer-events: none;
  padding-bottom: var(--space-m);
}

.basketRow--packageFamily .basketRowName {
  font-family: var(--site-font);
  font-size: inherit;

}

.basketCardFamilySpacer {
  display: none;
}

.basketRow.is-disabled {
  /*cursor: default;*/
}

.basketRow.is-disabled .basketRowName {
  opacity: 0.2;
}

.basketRow.is-disabled .basketRowPrice {
  opacity: 1;

}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .basketRow.is-disabled:hover {
    color: var(--black);
  }
}

.buyLicensingControls {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
  padding: var(--space-l) var(--space-l);
}

.buyLicensing {
  position: sticky;
  bottom: calc(50% - var(--margin-y));
  align-self: end;
  padding: var(--space-m) 0;
}

@media (max-width: 1200px) {
  .buyLayout {
    grid-template-columns: repeat(1,1fr);
    width: var(--basketCardWidth);
  }
  .buyLicensing {
    margin-top: var(--margin-x);
    position: relative;
    bottom: 0;
  }
  .buyProducts,
  .buyLicensing {
    width: var(--basketCardWidth);
  }
}

@media (max-width: 800px) {
  .buyProducts,
  .buyLicensing {
    width: 100%;
  }
}

.basketSelectWrap {
  display: block;
  position: relative;
}

.basketSelectWrap::after {
  content: "▼";
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
}

.basketSelect {
  width: 100%;
  border: 0;
  background: var(--grey2);
  color: var(--black);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}

.is-no-licensing {
  color: var(--grey7);
}

.basketTotalAddWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
  padding: var(--space-l);
}

.basketSubTotal {
  background: var(--grey1);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  pointer-events: none;
}

.basketAddRemoveButton {
  width: 100%;
/*
  border: 0;
  background: var(--black);
  color: var(--white);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
*/
}

.basketAddRemoveButton:disabled,
.basketAddRemoveButton[aria-disabled="true"] {
  opacity: 0.15;
  cursor: default;
}

/* ==========================================================================
   BASKET PAGE
   ========================================================================== */

.page.basketPage {
  background: var(--purple1);
}

.page.basketPage {
  align-content: center;
}

.basketBody {
  padding: var(--margin-y) var(--margin-x) 6rem var(--margin-x);
  min-height: 100vh;
}

.basketCardStyles {
  background: var(--grey1);
  padding: 2rem 0;
  transition: opacity var(--trans-l) var(--ease1);
}

.basketCardStylesSummaries {
  padding-top: var(--space-l);
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

.basketCardStylesSummary {
  display: flex;
  justify-content: center;
}

.basketCardStylesSummaryInner {
  background: var(--white);
  text-align: center;
  display: grid;
  gap: 0;
  border-radius: var(--radius2);
  padding: var(--font-size2) var(--space-l);
}

.basketCardItemsList {
  margin: 0;
  padding: 0;
}

.basketCardItem {
  cursor: pointer;
}

.basketCardItemName {
  word-break: break-word;
}

.basketCardItemRemove {
  opacity: 0.2;
  pointer-events: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--black);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.basketCardLicensing,
.basketCard.basketCard--customer {
  background: var(--white);
  transition: opacity var(--trans-l) var(--ease1);
}

.basketDeletePlaceholder {
  overflow: hidden;
  transition: height 1.5s var(--ease1);
}

.basketCard.is-delete-overlay {
  position: absolute;
  margin: 0 !important;
  z-index: 20;
  pointer-events: none;
  transition:
    left var(--trans-m) ease,
    top var(--trans-m) ease,
    width var(--trans-m) ease,
    height var(--trans-m) ease,
    opacity var(--trans-m) var(--ease1);
}

.basketCard.is-delete-overlay > * {
  transition: opacity var(--trans-m) var(--ease1);
}

.basketCard.is-delete-faded {
  opacity: 0;
}

.basketDeleteLabel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--trans-l) var(--ease1);
  pointer-events: none;
}

.basketCardLicensingControls {
  display: grid;
  gap: var(--space-m);
}

.basketCardUsage {
  display: grid;
  gap: var(--space-m);
}

.basketField {
  display: grid;
  align-items: center;
  gap: var(--space-s);
  cursor: text;
}

.basketField.is-incomplete .basketUsageInput {
  outline: 1px solid var(--black);
}

.basketToggleField.is-incomplete {
  outline: 1px solid var(--black);
}

.basketUsageLabel {
  color: var(--black);
  white-space: nowrap;
  padding-left: 1.25rem;

}

.basketField[hidden] {
  display: none !important;
}

.basketUsageInput {
  width: 100%;
  border: 0;
  background: var(--grey2);
  color: var(--black);
  font-family: inherit;
  text-align: left;
}

.basketUsageInput::placeholder {
  color: var(--grey7);
  opacity: 1;
  text-align: left;
}

.basketToggleRows,
.basketCardFooter,
.trialsCardFooter {
  padding-top: var(--space-m);
}

.basketCardFooter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

.basketCardSubtotal {
  background: var(--grey2);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: var(--space-l);
  pointer-events: none;
}

.basketCardRemoveButton {
  width: 100%;
  border: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  cursor: pointer;
}

.basketStatusCard {
text-align: center;
display: flex;
align-items: center;
position: absolute;
top: 48%;
left: 50%;
width: 100%;
transform: translate(-50%,-50%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--trans-l) ease, visibility 0s linear var(--trans-l);
cursor: default;
}

@keyframes basketStatusPulse {
  0% { opacity: 1; }
  25% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}

[data-basket-page].is-basket-status .basketStatusCard {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--trans-l) var(--ease1);
}

[data-basket-page] .basketStatusCard.is-overlay-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-basket-page].is-basket-status .basketStatusCard.is-looping,
[data-basket-page] .basketStatusCard.is-overlay-visible.is-looping {
  animation: basketStatusPulse 2.4s linear infinite;
}

[data-basket-page]:not(.is-ready) .basketStatusCard {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.basketStatusTitle {
  margin: 0;
  background: var(--white);
  align-content: center;
  border-radius: var(--radius1);
  cursor: default;
}

.basketCustomerFields {
  display: grid;
  gap: var(--space-m);
}

.basketToggleField {
  background: var(--grey2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-m);
  position: relative;
  text-align: left;
  cursor: default;
}

.basketToggle {
  border: 0;
  background: var(--black);
  color: var(--white);
  font: inherit;
  cursor: pointer;
  position: absolute;
  /*right: calc(var(--font-size2) / 2.5);*/
  right: 0;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .basketToggle:hover {
    background: var(--grey9);
  }
}

.basketToggle[aria-pressed="false"] {
  background: var(--grey5);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .basketToggle[aria-pressed="false"]:hover {
    background: var(--grey4);
  }
}

#basketStickyWrap {
  position: sticky;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  z-index: 20;
}

#basketNavGradient {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6rem;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 201, 248, 0.8) 50%, rgba(255, 201, 248, 0) 100%);
  opacity: 1;
  visibility: visible;
  /*transition: opacity var(--trans-l) ease, visibility 0s linear var(--trans-l);*/
}

#basketNav {
  position: absolute;
  left: 0;
  bottom: var(--margin-x);
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 9;
  opacity: 1;
  visibility: visible;
  /*transition: opacity var(--trans-l) ease, visibility 0s linear var(--trans-l);*/
}

.basketSpacer {
  height: 1.5rem;
}

[data-basket-page].is-empty #basketNav,
[data-basket-page].is-empty #basketNavGradient,
[data-basket-page].is-basket-status #basketNav,
[data-basket-page].is-basket-status #basketNavGradient,
[data-basket-page].is-stage4-reveal-pending #basketNav,
[data-basket-page].is-stage4-reveal-pending #basketNavGradient,
[data-basket-page].is-basket-outcome #basketNav,
[data-basket-page].is-basket-outcome #basketNavGradient {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /*transition: opacity var(--trans-l) ease, visibility 0s linear var(--trans-l);*/
}

[data-basket-page]:not(.is-ready) #basketNav,
[data-basket-page]:not(.is-ready) #basketNavGradient {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.basketNavButton:disabled {
  cursor: default;
  pointer-events: none;
  background: var(--grey3);

}

.basketNavTotal {
  background: var(--white);
  color: var(--black);
  min-width: min(14rem, 70vw);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  pointer-events: none;
}

.basketStageTwoOnly {
  display: none;
}

.basketStageThreeOnly {
  display: none;
}

.basketStageFourOnly {
  display: none;
}

[data-basket-stage="2"] .basketStageOneOnly {
  display: none !important;
}

[data-basket-stage="2"] .basketStageTwoOnly {
  display: block;
}

[data-basket-stage="2"] .basketCardStylesSummary {
  display: flex;
}

[data-basket-stage="2"] .basketCardStylesSummary.is-empty {
  display: none;
}

[data-basket-stage="2"] .basketCardUsage {
  display: grid;
}

[data-basket-stage="2"] .basketCardItem {
  pointer-events: none;
  cursor: default;
}

[data-basket-stage="2"] .basketRowPrice {
  display: none;
}

[data-basket-stage="3"] .basketCard--package {
  display: none !important;
}

[data-basket-stage="3"] .basketStageThreeOnly {
  display: grid;
}

[data-basket-stage="4"] .basketCard--package,
[data-basket-stage="4"] .basketCard--customer {
  display: none !important;
}

[data-basket-stage="4"] .basketStageFourOnly {
  display: grid;
}

[data-basket-stage="4"] .basketCard--payment {
  margin-top: 0;
}

[data-basket-page].is-stage4-reveal-pending[data-basket-stage="4"] .basketCard--payment {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

[data-basket-stage="4"] .basketCard--payment .basketPaymentElementWrap,
[data-basket-stage="4"] .basketCard--payment .basketToggleRows,
[data-basket-stage="4"] .basketCard--payment .trialsCardFooter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms var(--ease1);
}

[data-basket-page].is-basket-status .basketCardsGrid {
  display: none;
}

[data-basket-page].is-basket-outcome .basketCardsGrid:first-of-type {
  display: none;
}

[data-basket-page].is-basket-outcome .basketCardsGrid:last-of-type {
  display: grid;
}

[data-basket-page].is-basket-outcome .basketCard--customer,
[data-basket-page].is-basket-outcome .basketCard--payment {
  display: none !important;
}

[data-basket-page].is-basket-outcome .basketCheckoutOutcomeCard {
  display: block;
}

/* ==========================================================================
   TRIALS PAGE
   ========================================================================== */

.trialsFonts {
  text-align: center;
  display: grid;
}

.trialsFontLine {
  /*padding: var(--space-s) 0;*/
}

.trialsFontLine + .trialsFontLine {
  padding-top: var(--space-s);
}

.basketCardBody {
  display: grid;
  gap: var(--space-l);
  padding: var(--space-l) var(--space-l) var(--space-l) var(--space-l);
}

.basketIntro {
  padding: 0 var(--space-l);
  color: var(--grey7);
  transition: color 1s var(--ease1);
}

.basketIntro p {
  margin: 0;
  text-align: center;
}

.basketToggleRows {
  display: grid;
  gap: var(--space-m);
}

.basketPaymentOutcomeLink {
  background: var(--black);
  color: var(--white);
}

.basketPaymentOutcomeMessage,
.basketPaymentOutcomeLink {
  text-align: center;
}

.basketPaymentOutcomeMessage span {
  color: var(--grey7);
}

.basketPaymentOutcomeLink {
  display: block;
  text-decoration: none;
}

[data-basket-page].is-checkout-success .basketStatusCard {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.basketCheckoutOutcomeCard {
  display: none;
}

.basketCheckoutOutcomeCard {
  margin-top: 0;
}

[data-basket-page].is-checkout-success .basketCheckoutOutcomeCard,
[data-basket-page].is-basket-outcome .basketCheckoutOutcomeCard {
  display: block;
}

[data-basket-page].is-checkout-success #basketNav,
[data-basket-page].is-checkout-success #basketNavGradient {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /*transition: opacity var(--trans-l) ease, visibility 0s linear var(--trans-l);*/
}

/* ==========================================================================
   CUSTOM PAGE
   ========================================================================== */

.page.customPage,
.page.customProjectPage {
  min-height: 100vh;
  overflow: hidden;
}

.page.customPage {
  background: var(--grey1);
}

.page.customProjectPage {
  background: var(--grey1);
}

.customIntroSection {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-xl);
  max-width: var(--narrow-block);
  margin: auto;
  padding: var(--margin-y) 0;
}

.customProjectsList {
  display: grid;
  gap: var(--margin-x);
}

.customProjectsEmpty {
  background: var(--grey1);
  border-radius: var(--radius1);
  padding: var(--space-l);
}

.customProjectCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
  overflow: visible;
  text-decoration: none;
  color: inherit;
}

.customProjectImages {
  display: block;
  line-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius1);
  overflow: hidden;
  transition: box-shadow var(--trans-m) var(--ease1), transform var(--trans-m) var(--ease1);
  transform: translateZ(0);
}

.customProjectImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  transition: transform var(--trans-m) var(--ease1);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.customProjectImages.is-transitioning-hover {
  transform: translateY(-0.2rem);
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .customProjectImages:hover {
    transform: translateY(-0.2rem);
  }
}

.customProjectImagePlaceholder,
.customProjectHeroPlaceholder {
  display: grid;
  place-items: center;
  color: var(--grey7);
}

.customProjectTitle {
  padding-top: 0;
}

.customProjectSubtitle {
  margin-top: var(--space-m);
}

.customProjectSummary {
  margin: var(--space-m) 0 0;
  opacity: 0.5;
  transition: opacity var(--trans-m) var(--ease1);
}

.customProjectCard.is-transitioning-hover .customProjectSummary {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .customProjectCard:hover .customProjectSummary {
    opacity: 1;
  }
}

/* ==========================================================================
   CUSTOM PROJECT PAGE
   ========================================================================== */

#customProjectNav {
  position: fixed;
  top: var(--nav-y);
  right: var(--nav-x);
  z-index: 22;
}

.customProjectBackLink {
  display: inline-flex;
  width: var(--button2);
}

.customProjectSection {
  padding: 0 var(--margin-x); 
}

.customProjectWrap {
  margin: 0 auto;
  display: grid;
  justify-items: center;
}

.customProjectHead {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  max-width: var(--text-block-width);
  width: 100%;
}

.customProjectHeading {
  margin: 0;
}

.customProjectSubheading {
  margin: 0;
}

/*
.customProjectHero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--grey3);
  border-radius: var(--radius1);
  display: block;
  margin-top: var(--space-m);
}
*/

.customProjectHero {
width: 100vw;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transform: translateX(calc(var(--margin-x) * -1));
height: auto;
align-items: center;
}

.customProjectLayout {
  width: 100%;
  display: grid;
}

.customProjectBlock {
  width: 100%;
  width: calc(100vw - var(--margin-x) - var(--margin-x));
}

.customProjectTextBlock .centerText {
  display: grid;
  justify-content: center;
}

.customProjectTextBlock {
  padding: var(--space-xl) 0;
}

.customProjectTextBlock p {
  margin: 0;
  max-width: 50rem;
}

.customProjectTextBlock p + p {
  margin-top: var(--space-m);
}

.customProjectImagesGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--margin-x);
}

.customProjectLayoutImageItem {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius1);
}

.customProjectImagesBlock:last-child {
  margin-bottom: var(--margin-y);
}

.customProjectLayoutImageItem.is-w100 { grid-column: span 6; }
.customProjectLayoutImageItem.is-w50 { grid-column: span 3; }
.customProjectLayoutImageItem.is-w33 { grid-column: span 2; }
.customProjectLayoutImageItem.is-w66 { grid-column: span 4; }

.customProjectLayoutImage {
  width: 100%;
  object-fit: cover;
  display: block;
}

.customProjectLayoutVideo {
  background: var(--grey1);
  transform: scale(1.01);
}

.customProjectLayoutImageItem.is-w33 .customProjectLayoutImage,
.customProjectLayoutImageItem.is-w66 .customProjectLayoutImage,
.customProjectLayoutImageItem.is-w50 .customProjectLayoutImage {
  height: calc(50vw - (var(--margin-x) * 1.1)) ;
}

.customProjectLayoutImageItem.is-w100 .customProjectLayoutImage {
  height: auto;
}

.customProjectBody {
  max-width: var(--text-block-width);
}

.customProjectBody p {
  margin: 0;
}

.customProjectBody p + p {
  margin-top: var(--space-m);
}

#customDetails {
  display: flex;
  justify-content: center;
}

.customDetailsGrid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4rem;
  background: var(--white);
  padding: var(--space-l);
  border-radius: var(--radius1);

}

@media (max-width: 700px) {

  .basketCardFooter {
    grid-template-columns: 1fr;
  }

  .customProjectsList {
    gap: var(--space-xl);
  }

  .customProjectCard {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .customProjectSubtitle,
  .customProjectSummary {
    margin-top: var(--space-s);
  }

  .customProjectImagesGrid {
    grid-template-columns: 1fr;
  }

  .customProjectLayoutImageItem {
    grid-column: 1 / -1 !important;
  }

  .customDetailsGrid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
  }

  .customProjectLayoutImageItem.is-w33 .customProjectLayoutImage,
  .customProjectLayoutImageItem.is-w66 .customProjectLayoutImage,
  .customProjectLayoutImageItem.is-w50 .customProjectLayoutImage {
    height: auto;
  }
}

@media (max-width: 500px) {

  .customDetailsGrid {
    grid-template-columns: 1fr;
  }

}

/* ==========================================================================
   ADMIN PAGES
   ========================================================================== */

body .adminPage {
  background: var(--grey1);
  padding: var(--margin-x);
}

.adminOrdersPage .basketCard {
    max-width: 100%;
    width: 100%;
}

.adminOrdersPage .basketCardBody {
  display: block;
}

.adminOrdersBody {
}

body.adminPage #header,
body.adminPage #footer,
body.adminPage #footerRevealSpacer,
body[data-spa-page-type="admin"] #header,
body[data-spa-page-type="admin"] #footer,
body[data-spa-page-type="admin"] #footerRevealSpacer {
  display: none;
}

.adminOrdersLayout {
  display: grid;
  gap: var(--margin-x);
    grid-template-columns: 2.6fr 1fr;
    align-items: start;
}

.adminOrdersCard {
  margin-top: 0 !important;
  background: var(--white);
}

.adminOrdersCard{
  position: sticky;
  top: var(--margin-x);
  height: calc(100vh - var(--margin-x) - var(--margin-x));
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.adminOrdersCard::-webkit-scrollbar {
  display: none;
}

.adminOrdersFilters {
  margin-top: 1rem;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(6, 1fr);
}

.adminOrdersFilters > * {
  flex-grow: 1;
}

.adminOrdersFilter {
  display: grid;
  gap: var(--space-s);
}

.adminOrdersFilter .textInput {
  width: 100%;
  background: var(--grey2);
  font: inherit;
  cursor: text;
}

.adminOrdersToggle {
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
}

.adminOrdersFilterActions {
  display: flex;
  justify-content: center;
}

.adminOrdersFilterActions button {
  width: 100%;
}

.adminOrdersResultMessage {
  color: var(--grey7);
  font-size: var(--font-size4);
}

.adminOrdersResultMessage.is-error {
  color: #f43;
}

.adminOrdersTableWrap {
  overflow-x: auto;
}

.adminOrdersTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.adminOrdersTable th,
.adminOrdersTable td {
  padding: var(--space-s);
  border-bottom: 1px solid var(--grey2);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.adminOrdersTable tbody tr {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch-like) .adminOrdersTable tbody tr:hover {
    background: var(--purple4);
  }
}

.adminOrdersTable tbody tr.is-selected {
  background: var(--purple3);
}

.adminOrdersDetailList {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
}

.adminOrdersDetailList div {
  gap: 0.15rem;
}

.adminOrdersDetailList dt {

}

.adminOrdersDetailList dd {
  margin: 0;
  color: var(--grey7);
  word-break: break-word;
}

[data-admin-packages-list] {
  display: grid;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem; 
}

.adminOrdersPackageBlock {
  background: var(--grey1);
  border-radius: var(--radius2);
  padding: var(--space-m);
  font-size: var(--font-size1);
  flex-grow: 1;
  max-width: 100%;
}

.adminOrdersPackageBlock p {
  margin: 0;
}

.adminOrdersPackageBlock p + p {
  margin-top: 0.5rem;
}

.adminOrdersPackageBlock span {
  color: var(--grey7); 
}

.adminOrdersStatusBlocks {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom:1rem;
}

.adminOrdersStatusBlock {
background: var(--grey2);
border-radius: var(--radius2);
padding: var(--space-m);
flex-grow: 1;
max-width: 100%;
}

.adminOrdersStatusBlock.is-fulfilled,
.adminOrdersStatusBlock.is-sent,
.adminOrdersStatusBlock.is-ready {
  display: none;
}

.adminOrdersStatusBlock.is-failed {
  background: var(--purple4);
  background: #fba;
}

.adminOrdersStatusBlock h3,
.adminOrdersStatusBlock p {
  margin-bottom: 0;
  font-size: var(--font-size1);
}

.adminOrdersActionRow,
.adminOrdersLinkRow {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.adminOrdersActionRow button,
.adminOrdersActionRow a {
  width: 100%;
  font: inherit;
  font-size: var(--font-size4);
}

.adminOrdersLinkRow a {
  text-decoration: none;
}

.adminOrdersActionRow .button1.is-complete {
  background: var(--grey6);
  cursor: default;
  pointer-events: none;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.footerRevealSpacer {
  /*
  height: var(--footer-height, 45rem);
  height: 100vh;
  */
  position: relative;
  z-index: 2;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 2;
  background: var(--white);
}

main[data-basket-page] {
  position: static;
  z-index: auto;
}

#header,
#projectNav,
#infoNav,
#privacyNav,
#termsNav {
  transition: top 2s var(--ease1);
}

html.is-footer-nav-hidden #header,
html.is-footer-nav-hidden #projectNav,
html.is-footer-nav-hidden #infoNav,
html.is-footer-nav-hidden #privacyNav,
html.is-footer-nav-hidden #termsNav {
  top: calc(-1 * (var(--button2) + (var(--nav-y) * 2))) !important;
}

#footer.siteFooter {
  --footer-reveal-progress: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--black);
  color: var(--white);
}

.siteFooterContent {
  /*
  min-height: var(--footer-height, 45rem);
  height: var(--footer-height, 45rem);
  height: 100vh;
  */
  padding: var(--margin-y) var(--margin-x) var(--margin-x);
  padding: calc(var(--margin-y) / 2) var(--margin-x) var(--margin-x) var(--margin-x);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: calc(var(--margin-y) / 2);
  opacity: calc(0 + (var(--footer-reveal-progress) * 1));
  transform: translateY(calc(-0.5rem + (var(--footer-reveal-progress) * 0.5rem)));
  transition: opacity 0.12s, transform 0.12s linear;
  will-change: opacity;

  transform: translateY(calc(1rem - (var(--footer-reveal-progress) * 1rem)));
}

.siteFooterTop {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.siteFooterBlurbBig {
  margin: 0;
  max-width: 34ch;
  display: block;
}

.siteFooterBlurbSmall {
  margin: 0;
  max-width: 34ch;
  display: none;
}

.siteFooterBlurbBig span,
.siteFooterBlurbSmall {
  color: var(--purple1);
}

.siteFooterLists {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: clamp(1rem, 2vw, 2rem);
}

.siteFooterList {
  display: grid;
  align-content: start;
}

.siteFooterList + .siteFooterList {
  margin-top: 1rem;
}

.siteFooterListTitle {
  margin: 0 0 0.05rem;
}

.siteFooterListItems {
  display: grid;
}

.siteFooterList a {
  display: inline-block;
  width: fit-content;
  color: var(--grey7);
}

.siteFooterBottom {
  display: grid;
  align-items: end;
  gap: 0.45rem;
}

.siteFooterWordmark {
  width: 100%;
  height: auto;
  display: block;
  /* squash 
  transform: scaleY(min(1, calc(var(--footer-reveal-progress) * 1.5)));
  transform-origin: bottom;
  /* squash */
}

.siteFooterCopyright {
  margin: 0;
  color: var(--grey7);
  position: absolute;
  text-align: right;
  right: var(--margin-x);
}
/*
@media (max-width: 1200px) {
  .siteFooterTop {
    grid-template-columns: 1fr;
  }

  .siteFooterBlurb {
    max-width: 100%;
  }
}

@media (max-width: 800px) {
  .siteFooterLists {
    grid-template-columns: 1fr 1fr;
  }

  .siteFooterListTitle,
  .siteFooterList a {
    font-size: var(--font-size4);
  }
}

@media (max-width: 560px) {
  .footerRevealSpacer {
    height: var(--footer-height-mobile, 36rem);
  }

  .siteFooterContent {
    min-height: var(--footer-height-mobile, 36rem);
    gap: 1.5rem;
  }

  .siteFooterBlurb {
    font-size: clamp(1.3rem, 7.4vw, 2.3rem);
  }

  .siteFooterLists {
    grid-template-columns: 1fr;
  }

  .siteFooterCopyright {
    font-size: var(--font-size3);
  }
}
*/
.cookieBanner {
position: fixed;
right: var(--margin-x);
bottom: var(--margin-x);
z-index: 40;
max-width: min(28rem, calc(100vw - (var(--margin-x) * 2)));
padding: var(--space-m);
display: none;
grid-template-columns: 1fr auto;
gap: var(--space-m);
align-items: end;
background: var(--purple4);
border-radius: var(--radius2);
/*animation: rainbow .4s infinite linear;*/
transition: opacity .2s var(--ease1);
}

.cookieBanner.is-visible {
display: grid;
}

.cookieBannerText {
display: grid;
gap: 0.15rem;
}

.cookieBannerTitle,
.cookieBannerMessage,
.cookieBannerLink,
.cookieBannerButton {
font-size: var(--font-size1);
}

.cookieBannerTitle {
color: var(--black);
}

.cookieBannerMessage {
color: var(--grey9);
text-wrap: balance;
}

.cookieBannerMessage a {
  color: var(--black);
}

.cookieBannerActions {
display: flex;
gap: var(--space-s);
align-items: center;
justify-content: end;
}

.cookieBannerLink {
white-space: nowrap;
}

.cookieBannerButton {
min-width: 0;
}

.adblockBanner {
  z-index: 39;
}

@media (max-width: 700px) {
  .cookieBanner {
    left: var(--margin-x);
    right: var(--margin-x);
    bottom: var(--margin-x);
    max-width: 100%;
  }

  .cookieBannerActions {
    justify-content: start;
    flex-wrap: wrap;
  }
}

/* ========================================================================== 
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
    .siteFooterBlurbBig {
      display: none;
    }
    .siteFooterBlurbSmall {
      display: block;
    }

    .infoInfoItemHeading {
      opacity: 0.3;
    }
}

@media (max-width: 800px) {

    .stylesLabel,
    .siteFooterBlurbSmall,
    .typefacesSectionInput {
      display: none;
    }

    .stylesLabel,
    .basketTotalAddWrap,
    .siteFooterTop,
    .siteFooterLists {
      grid-template-columns: 1fr;
    }

    .siteFooterList {
      grid-template-columns: 1fr 1.5fr;;
    }

    .siteFooterCopyright {
      font-size: 2.1vw;
    }

    .basketGroupTitle, .buyLicensingTitle {
      text-align: left;
    }

    .basketRow {
      justify-items: left;
    }

    .basketRowName {
      max-width: 80%;
      padding-left: var(--space-l);
      text-align: left;
    }

    .basketUsageInput::placeholder {
      opacity: 0;
    }

    .basketNavTotal {
      min-width: 0px;
    }

    .glyphChartGrid {
      margin-top: 0;
    }

    .glyphCell.is-selected::before,
    .glyphCell::before {
      background: var(--grey0);
    }

    .infoBody {
      padding-top: var(--button2);
    }
}


:root {--glyphsetMany: 10; --glyphsetWidth: calc( 50vw - ((var(--space-l)/2) + var(--margin-x)) );}

@media (max-width: 1800px) {
  :root {--glyphsetMany: 10; --glyphsetWidth: calc( 50vw - ((var(--space-l)/2) + var(--margin-x)) );}
}

@media (max-width: 1600px) {
  :root {--glyphsetMany: 9; --glyphsetWidth: calc( 50vw - ((var(--space-l)/2) + var(--margin-x)) );}
}

@media (max-width: 1400px) {
  :root {--glyphsetMany: 8; --glyphsetWidth: calc( 50vw - ((var(--space-l)/2) + var(--margin-x)) );}
}

@media (max-width: 1200px) {
  :root {--glyphsetMany: 7; --glyphsetWidth: calc( 50vw - ((var(--space-l)/2) + var(--margin-x)) );}
}

@media (max-width: 1000px) {
  :root {--glyphsetMany: 6; --glyphsetWidth: calc( 50vw - ((var(--space-l)/2) + var(--margin-x)) );}

  .legalGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
:root {--glyphsetMany: 6; --glyphsetWidth: calc( 50vw - ((var(--space-l)/2) + var(--margin-x)) );}
}

@media (max-width: 800px) {
:root {--glyphsetMany: 8; --glyphsetWidth: calc( 100vw - ((var(--margin-x))*2) );}

  .glyphChart { grid-template-columns: 1fr; }

  .glyphChartOverview {
    display: none;
  }

  .glyphChartGrid {
    padding: 0;
  }
}

@media (max-width: 700px) {
:root {--glyphsetMany: 7; --glyphsetWidth: calc( 100vw - ((var(--margin-x))*2) );}
}

@media (max-width: 600px) {
:root {--glyphsetMany: 6; --glyphsetWidth: calc( 100vw - (var(--margin-x)*2) );}
}

@media (max-width: 500px) {
:root {--glyphsetMany: 5; --glyphsetWidth: calc( 100vw - (var(--margin-x)*2) );}
}

@media (max-width: 400px) {
:root {--glyphsetMany: 4; --glyphsetWidth: calc( 100vw - (var(--margin-x)*2) );}
}

.glyphCells { grid-template-columns: repeat(var(--glyphsetMany), minmax(0, 1fr)); }
.glyphCellGlyph {
  font-size: calc(var(--glyphsetWidth) / var(--glyphsetMany) * var(--glyphCells-size));
  line-height: calc(var(--glyphsetWidth) / var(--glyphsetMany) * var(--glyphCells-line));
  height: calc(var(--glyphsetWidth) / var(--glyphsetMany) * var(--glyphCells-aspect));
}