/* =============================================
   RESOURCES LANDING PAGE STYLES
   Merged from: resource-landing-styleguide.css + resource-landing-style.css
   ============================================= */

/* Design tokens (:root variables) are defined globally in style.css — no duplication needed here. */

/* ==============================================
   COMPONENT STYLES (from resource-landing-style.css)
   ============================================== */

.whitepapers {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  align-items: center;
  position: relative;
  background-color: var(--dark-white);
  overflow: hidden;
}

.whitepapers .navbar {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  height: 98px;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-md);
  position: relative;
}

.whitepapers .frame {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 50px;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  position: relative;
  background-color: var(--white);
  border-radius: var(--radius-card);
  box-shadow:
    0px 15px 33px #0000001a, 0px 60px 60px #00000017, 0px 135px 81px #0000000d, 0px 240px 96px #00000003, 0px 374px 105px transparent;
}

.whitepapers .group {
  position: relative;
  width: 142px;
  height: 15.49px;
}

.whitepapers .div {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.whitepapers .link-text {
  position: relative;
  max-width: 100%;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: normal;
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .button {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--green);
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.whitepapers .text-wrapper {
  position: relative;
  max-width: 100%;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: normal;
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 52px;
  padding: 166px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .frame-3 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 858px;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.whitepapers .link-text-2 {
  position: relative;
  max-width: 100%;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--medium-blue);
  font-size: var(--desktop-tags-font-size);
  text-align: center;
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: normal;
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .link-text-3 {
  position: relative;
  width: 100%;
  max-width: 932px;
  font-family: var(--desktop-h1-font-family);
  font-weight: var(--desktop-h1-font-weight);
  color: #000000;
  font-size: var(--desktop-h1-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h1-letter-spacing);
  line-height: var(--desktop-h1-line-height);
  font-style: var(--desktop-h1-font-style);
}

.whitepapers .p {
  position: relative;
  width: 100%;
  max-width: 613px;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: #000000;
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

.whitepapers .comparison-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxxxl);
  padding: var(--space-xxl) var(--space-xxxxl) var(--space-xxxxx);
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .frame-4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .frame-5 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 8px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 13px;
}

.whitepapers .link-text-wrapper {
  all: unset;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--background);
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.whitepapers .link-text-4 {
  position: relative;
  max-width: 100%;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--white);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: normal;
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .div-wrapper {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--white);
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--border);
  cursor: pointer;
}

.whitepapers .frame-6 {
  display: flex;
  width: 100%;
  max-width: 322px;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  position: relative;
  background-color: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid;
  border-color: var(--border);
}

.whitepapers .union {
  position: relative;
  width: 14.88px;
  height: 17.67px;
}

.whitepapers .text-wrapper-2 {
  position: relative;
  width: 100%;border: none;
  opacity: 0.8;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: normal;
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .frame-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .link-text-5 {
  position: relative;
  width: 100%;
  max-width: 932px;
  margin-top: -1.00px;
  font-family: var(--desktop-h4-font-family);
  font-weight: var(--desktop-h4-font-weight);
  color: #000000;
  font-size: var(--desktop-h4-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h4-letter-spacing);
  line-height: var(--desktop-h4-line-height);
  font-style: var(--desktop-h4-font-style);
}

.whitepapers .frame-8 {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  grid-auto-rows: auto;
  gap: 20px;
  width: 100%;
  justify-content: center;
}

.whitepapers .frame-9 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
  text-decoration: none;
  color: inherit;
}

.whitepapers .fussionchart {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 174px;
  background-color: var(--dark-white-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--border);
}

.whitepapers .rectangle {
  position: absolute;
  top: 19px;
  left: 51px;
  width: 99px;
  height: 136px;
  background-color: #3971c029;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .rectangle-2 {
  position: absolute;
  top: 19px;
  left: 158px;
  width: 99px;
  height: 64px;
  background-color: #3971c029;
  border-radius: 4px;
}

.whitepapers .rectangle-3 {
  position: absolute;
  top: 91px;
  left: 158px;
  width: 99px;
  height: 64px;
  background-color: #3971c00f;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0px var(--space-md);
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.whitepapers .frame-11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--medium-blue);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-h6-font-family);
  font-weight: var(--desktop-h6-font-weight);
  color: var(--background);
  font-size: var(--desktop-h6-font-size);
  letter-spacing: var(--desktop-h6-letter-spacing);
  line-height: var(--desktop-h6-line-height);
  font-style: var(--desktop-h6-font-style);
}

.whitepapers .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  height: 22px;
  font-family: var(--desktop-body-small-font-family);
  font-weight: var(--desktop-body-small-font-weight);
  color: var(--background);
  font-size: var(--desktop-body-small-font-size);
  letter-spacing: var(--desktop-body-small-letter-spacing);
  line-height: var(--desktop-body-small-line-height);

  font-style: var(--desktop-body-small-font-style);
}

.whitepapers .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  opacity: 0.6;
  font-family: var(--desktop-text-size-mini-font-family);
  font-weight: var(--desktop-text-size-mini-font-weight);
  color: var(--dark-blue);
  font-size: var(--desktop-text-size-mini-font-size);
  letter-spacing: var(--desktop-text-size-mini-letter-spacing);
  line-height: var(--desktop-text-size-mini-line-height);
  white-space: nowrap;
  font-style: var(--desktop-text-size-mini-font-style);
}

.whitepapers .frame-12 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
}

.whitepapers .img {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 174px;
}

.whitepapers .frame-13 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
}

.whitepapers .group-2 {
  position: relative;
  top: 30px;
  left: 38px;
  width: 235px;
  height: 114px;
}

.whitepapers .rectangle-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 233px;
  height: 114px;
  background-color: #3971c029;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .link-text-6 {
  position: absolute;
  top: 9px;
  left: 175px;
  opacity: 0.5;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: var(--blue);
  font-size: var(--desktop-h5-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  white-space: nowrap;
  font-style: var(--desktop-h5-font-style);
}

.whitepapers .rectangle-5 {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 17px;
  height: 104px;
  background-color: #3971c029;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .rectangle-6 {
  top: 5px;
  left: 85px;
  width: 17px;
  height: 104px;
  border-color: #3971c066;
  position: absolute;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-7 {
  position: absolute;
  top: 5px;
  left: 105px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .rectangle-8 {
  position: absolute;
  top: 5px;
  left: 125px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .rectangle-9 {
  position: absolute;
  top: 5px;
  left: 25px;
  width: 17px;
  height: 104px;
  background-color: #3971c042;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .rectangle-10 {
  position: absolute;
  top: 5px;
  left: 45px;
  width: 17px;
  height: 104px;
  background-color: #3971c05c;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .rectangle-11 {
  position: absolute;
  top: 5px;
  left: 65px;
  width: 17px;
  height: 104px;
  background-color: #3971c075;
  border-radius: 4px;
  border: 1px solid;
  border-color: #3971c066;
}

.whitepapers .frame-14 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
}

.whitepapers .rectangle-12 {
  position: absolute;
  top: 29px;
  left: 97px;
  width: 115px;
  height: 116px;
  background-color: #3971c029;
  border-radius: 4px;
}

.whitepapers .link-text-7 {
  position: absolute;
  top: 103px;
  left: 170px;
  width: 30px;
  height: 28px;
}

.whitepapers .frame-15 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
}

.whitepapers .frame-16 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
}

.whitepapers .frame-17 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
}

.whitepapers .frame-18 {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: var(--card-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--card-gap);
  padding: var(--card-padding);
  background-color: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--cards-shadow);
}

.whitepapers .frame-19 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  height: fit-content;
  gap: 20px;
}

.whitepapers .rectangle-13 {
  background-color: #66d6cc5c;
  border-color: #66d6cc99;
  position: absolute;
  top: 19px;
  left: 51px;
  width: 99px;
  height: 136px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-14 {
  background-color: #66d6cc5c;
  position: absolute;
  top: 19px;
  left: 158px;
  width: 99px;
  height: 64px;
  border-radius: 4px;
}

.whitepapers .rectangle-15 {
  background-color: #66d6cc42;
  border-color: #66d6cc99;
  position: absolute;
  top: 91px;
  left: 158px;
  width: 99px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .text-wrapper-7 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--green);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .rectangle-16 {
  background-color: #66d6cc29;
  border-color: #66d6cc66;
  position: absolute;
  top: 0;
  left: 0;
  width: 233px;
  height: 114px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .link-text-8 {
  position: absolute;
  top: 9px;
  left: 175px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: var(--green);
  font-size: var(--desktop-h5-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  white-space: nowrap;
  font-style: var(--desktop-h5-font-style);
}

.whitepapers .rectangle-17 {
  background-color: #66d6cc29;
  border-color: #66d6cc66;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-18 {
  top: 5px;
  left: 85px;
  width: 17px;
  height: 104px;
  border-color: #66d6cc66;
  position: absolute;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-19 {
  border-color: #66d6cc66;
  position: absolute;
  top: 5px;
  left: 105px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-20 {
  border-color: #66d6cc66;
  position: absolute;
  top: 5px;
  left: 125px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-21 {
  background-color: #66d6cc42;
  border-color: #66d6cc66;
  position: absolute;
  top: 5px;
  left: 25px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-22 {
  background-color: #66d6cc5c;
  border-color: #66d6cc66;
  position: absolute;
  top: 5px;
  left: 45px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-23 {
  background-color: #66d6cc75;
  border-color: #66d6cc66;
  position: absolute;
  top: 5px;
  left: 65px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-24 {
  top: 29px;
  left: 97px;
  width: 115px;
  height: 116px;
  background-color: #66d6cc29;
  border-color: #66d6cc66;
  position: absolute;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .frame-20 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(1, fit-content(100%));
  height: fit-content;
  gap: 20px;
  position: relative;
  grid-row: 1 / 2;
  grid-column: 1 / 5;
  width: 100%;
}

.whitepapers .rectangle-25 {
  background-color: #ff8d285c;
  border-color: #ff8d2899;
  position: absolute;
  top: 19px;
  left: 51px;
  width: 99px;
  height: 136px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-26 {
  background-color: #ff8d285c;
  position: absolute;
  top: 19px;
  left: 158px;
  width: 99px;
  height: 64px;
  border-radius: 4px;
}

.whitepapers .rectangle-27 {
  background-color: #ff8d2842;
  border-color: #ff8d2899;
  position: absolute;
  top: 91px;
  left: 158px;
  width: 99px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .text-wrapper-8 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--colors-accents-orange);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .rectangle-28 {
  top: 29px;
  left: 97px;
  width: 115px;
  height: 116px;
  background-color: #ff8d2829;
  border-color: #ff8d2866;
  position: absolute;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-29 {
  background-color: #ff8d2829;
  border-color: #ff8d2866;
  position: absolute;
  top: 0;
  left: 0;
  width: 233px;
  height: 114px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .link-text-9 {
  position: absolute;
  top: 9px;
  left: 175px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: #ff8d28;
  font-size: var(--desktop-h5-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  white-space: nowrap;
  font-style: var(--desktop-h5-font-style);
}

.whitepapers .rectangle-30 {
  background-color: #ff8d2829;
  border-color: #ff8d2866;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-31 {
  top: 5px;
  left: 85px;
  width: 17px;
  height: 104px;
  border-color: #ff8d2866;
  position: absolute;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-32 {
  border-color: #ff8d2866;
  position: absolute;
  top: 5px;
  left: 105px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-33 {
  border-color: #ff8d2866;
  position: absolute;
  top: 5px;
  left: 125px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-34 {
  background-color: #ff8d2842;
  border-color: #ff8d2866;
  position: absolute;
  top: 5px;
  left: 25px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-35 {
  background-color: #ff8d285c;
  border-color: #ff8d2866;
  position: absolute;
  top: 5px;
  left: 45px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-36 {
  background-color: #ff8d2875;
  border-color: #ff8d2866;
  position: absolute;
  top: 5px;
  left: 65px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-37 {
  background-color: #ac7f5e5c;
  border-color: #ac7f5e99;
  position: absolute;
  top: 19px;
  left: 51px;
  width: 99px;
  height: 136px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-38 {
  background-color: #ac7f5e5c;
  position: absolute;
  top: 19px;
  left: 158px;
  width: 99px;
  height: 64px;
  border-radius: 4px;
}

.whitepapers .rectangle-39 {
  background-color: #ac7f5e42;
  border-color: #ac7f5e99;
  position: absolute;
  top: 91px;
  left: 158px;
  width: 99px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .text-wrapper-9 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: var(--colors-accents-brown);
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .rectangle-40 {
  background-color: #ac7f5e29;
  border-color: #ac7f5e66;
  position: absolute;
  top: 0;
  left: 0;
  width: 233px;
  height: 114px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .link-text-10 {
  position: absolute;
  top: 9px;
  left: 175px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: #ac7f5e;
  font-size: var(--desktop-h5-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  white-space: nowrap;
  font-style: var(--desktop-h5-font-style);
}

.whitepapers .rectangle-41 {
  background-color: #ac7f5e29;
  border-color: #ac7f5e66;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-42 {
  top: 5px;
  left: 85px;
  width: 17px;
  height: 104px;
  border-color: #ac7f5e66;
  position: absolute;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-43 {
  border-color: #ac7f5e66;
  position: absolute;
  top: 5px;
  left: 105px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-44 {
  border-color: #ac7f5e66;
  position: absolute;
  top: 5px;
  left: 125px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-45 {
  background-color: #ac7f5e42;
  border-color: #ac7f5e66;
  position: absolute;
  top: 5px;
  left: 25px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-46 {
  background-color: #ac7f5e5c;
  border-color: #ac7f5e66;
  position: absolute;
  top: 5px;
  left: 45px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-47 {
  background-color: #ac7f5e75;
  border-color: #ac7f5e66;
  position: absolute;
  top: 5px;
  left: 65px;
  width: 17px;
  height: 104px;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .rectangle-48 {
  top: 29px;
  left: 97px;
  width: 115px;
  height: 116px;
  background-color: #ac7f5e29;
  border-color: #ac7f5e66;
  position: absolute;
  border-radius: 4px;
  border: 1px solid;
}

.whitepapers .CTA {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .frame-21 {
  display: flex;
  flex-direction: column;
  height: 400px;
  align-items: center;
  gap: 20px;
  padding: 76px 221px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--green);
  border-radius: 3.65px;
  overflow: hidden;
}

.whitepapers .link-text-11 {
  position: relative;
  width: 664px;
  margin-top: -0.91px;
  font-family: var(--desktop-h2-font-family);
  font-weight: var(--desktop-h2-font-weight);
  color: transparent;
  font-size: var(--desktop-h2-font-size);
  text-align: center;
  letter-spacing: var(--desktop-h2-letter-spacing);
  line-height: var(--desktop-h2-line-height);
  font-style: var(--desktop-h2-font-style);
}

.whitepapers .span {
  color: #212344;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.whitepapers .text-wrapper-10 {
  color: #f7f4ef;
  letter-spacing: var(--desktop-h2-letter-spacing);
  font-family: var(--desktop-h2-font-family);
  font-style: var(--desktop-h2-font-style);
  font-weight: var(--desktop-h2-font-weight);
  line-height: var(--desktop-h2-line-height);
  font-size: var(--desktop-h2-font-size);
}

.whitepapers .link-text-12 {
  position: relative;
  width: 635px;
  font-family: var(--desktop-body-font-family);
  font-weight: var(--desktop-body-font-weight);
  color: var(--background);
  font-size: var(--desktop-body-font-size);
  text-align: center;
  letter-spacing: var(--desktop-body-letter-spacing);
  line-height: var(--desktop-body-line-height);
  font-style: var(--desktop-body-font-style);
}

.whitepapers .button-2 {
  all: unset;
  box-sizing: border-box;
  position: relative;
  background-color: #000000;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.whitepapers .group-3 {
  position: absolute;
  top: -644px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1436px;
  height: 1606px;
}

.whitepapers .rectangle-49 {
  position: absolute;
  top: 982px;
  left: 286px;
  width: 288px;
  height: 624px;
  background-color: #5ac0b7;
}

.whitepapers .rectangle-50 {
  position: absolute;
  top: 878px;
  left: 1px;
  width: 287px;
  height: 728px;
  background-color: #5ac0b7;
}

.whitepapers .rectangle-51 {
  position: absolute;
  top: 1036px;
  left: 574px;
  width: 287px;
  height: 546px;
  background-color: #5ac0b7;
}

.whitepapers .rectangle-52 {
  position: absolute;
  top: 947px;
  left: 861px;
  width: 288px;
  height: 659px;
  background-color: #5ac0b7;
}

.whitepapers .rectangle-53 {
  position: absolute;
  top: 1px;
  left: 1149px;
  width: 287px;
  height: 707px;
  background-color: #5ac0b7;
}

.whitepapers .line {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 1px;
  object-fit: cover;
}

.whitepapers .footer {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 820px;
  background-color: var(--dark-white);
}

.whitepapers .line-2 {
  position: absolute;
  top: 299px;
  left: 0;
  width: 100%;
  max-width: 1440px;
  height: 1px;
  object-fit: cover;
}

.whitepapers .line-3 {
  position: absolute;
  top: 400px;
  left: 0;
  width: 100%;
  max-width: 1440px;
  height: 1px;
  object-fit: cover;
}

.whitepapers .line-4 {
  position: absolute;
  top: 501px;
  left: 0;
  width: 100%;
  max-width: 1440px;
  height: 1px;
  object-fit: cover;
}

.whitepapers .line-5 {
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  max-width: 1440px;
  height: 1px;
  object-fit: cover;
}

.whitepapers .line-6 {
  position: absolute;
  top: 97px;
  left: 0;
  width: 100%;
  max-width: 1440px;
  height: 1px;
  object-fit: cover;
}

.whitepapers .rectangle-54 {
  position: absolute;
  top: 199px;
  left: 360px;
  width: 360px;
  height: 621px;
  background-color: var(--green);
}

.whitepapers .rectangle-55 {
  position: absolute;
  top: 502px;
  left: 0;
  width: 360px;
  height: 318px;
  background-color: var(--green);
}

.whitepapers .rectangle-56 {
  position: absolute;
  top: 300px;
  left: 720px;
  width: 360px;
  height: 520px;
  background-color: var(--green);
}

.whitepapers .rectangle-57 {
  position: absolute;
  top: 1px;
  left: 1080px;
  width: 360px;
  height: 820px;
  background-color: var(--green);
}

.whitepapers .button-3 {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  top: 385px;
  left: 403px;
  background-color: #000000;
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 4px;
}

.whitepapers .frame-22 {
  display: flex;
  flex-direction: column;
  width: 83px;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 230px;
  left: 403px;
}

.whitepapers .link-text-13 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  opacity: 0.5;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .frame-23 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.whitepapers .link-text-14 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .link-text-15 {
  position: relative;
  align-self: stretch;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .frame-24 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 230px;
  left: 573px;
}

.whitepapers .link-text-16 {
  position: relative;
  width: 99px;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .frame-25 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 346px;
  left: 755px;
}

.whitepapers .frame-26 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 346px;
  left: 940px;
}

.whitepapers .link-text-17 {
  position: absolute;
  top: 346px;
  left: 1128px;
  width: 99px;
  opacity: 0.5;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #000000;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .frame-27 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: absolute;
  top: 378px;
  left: 1128px;
}

.whitepapers .link-text-18 {
  position: relative;
  width: 212px;
  margin-top: -1.00px;
  font-family: var(--desktop-h5-font-family);
  font-weight: var(--desktop-h5-font-weight);
  color: #000000;
  font-size: var(--desktop-h5-font-size);
  letter-spacing: var(--desktop-h5-letter-spacing);
  line-height: var(--desktop-h5-line-height);
  font-style: var(--desktop-h5-font-style);
}

.whitepapers .frame-28 {
  display: inline-flex;
  height: 33px;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  position: relative;
  background-color: #ffffff;
  border-radius: var(--radius-sm);
}

.whitepapers .link-text-19 {
  position: relative;
  max-width: 100%;
  font-family: var(--desktop-tags-font-family);
  font-weight: var(--desktop-tags-font-weight);
  color: #071c21;
  font-size: var(--desktop-tags-font-size);
  letter-spacing: var(--desktop-tags-letter-spacing);
  line-height: var(--desktop-tags-line-height);
  white-space: normal;
  font-style: var(--desktop-tags-font-style);
}

.whitepapers .discord {
  position: relative;
  width: 25px;
  height: 25px;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
  aspect-ratio: 1;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .whitepapers .comparison-table {
    padding: 40px 32px 112px;
  }

  .whitepapers .frame-8 {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }

  .whitepapers .frame-6 {
    max-width: 100%;
  }

  .whitepapers .link-text-5 {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .whitepapers .frame-8 {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  .whitepapers .link-text-3 {
    font-size: 42px;
    line-height: 1.1;
  }

  .whitepapers .link-text-5 {
    font-size: 30px;
  }

  .whitepapers .p {
    font-size: 16px;
    line-height: 1.5;
  }

  .whitepapers .hero {
    padding: 40px 16px;
  }

  .whitepapers .comparison-table {
    padding: 40px 16px 112px;
  }

  .whitepapers .frame {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .whitepapers .frame-5 {
    justify-content: center;
  }

  .whitepapers .div {
    justify-content: center;
  }

  .whitepapers .link-text,
  .whitepapers .text-wrapper,
  .whitepapers .link-text-4,
  .whitepapers .link-text-6,
  .whitepapers .link-text-5 {
    white-space: normal;
  }

  .whitepapers .frame-6 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .whitepapers .frame-8 {
    grid-template-columns: 1fr;
  }

  .whitepapers .link-text-3 {
    font-size: 32px;
  }

  .whitepapers .link-text-5 {
    font-size: 24px;
  }

  .whitepapers .p {
    font-size: 15px;
  }
}

.whitepapers .group-4 {
  position: absolute;
  top: 651px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1393px;
  height: 152px;
}