/* White Paper page (/general-7). */

.wp-hero { position: relative; max-width: var(--page); height: 692px; margin: 0 auto; }
.wp-hero__back { position: absolute; left: 477px; top: 35px; width: 883px; height: 622px; object-fit: cover; }
.wp-hero__band { position: absolute; left: 0; right: 0; top: 133px; height: 349px; overflow: hidden; background: var(--navy); }
.wp-hero__band-img { width: 100%; height: 100%; object-fit: cover; }
.wp-hero__panel { position: absolute; left: 0; top: 0; width: 50%; height: 100%; }
.wp-hero__panel > img { width: 100%; height: 100%; object-fit: cover; }
.wp-hero__text { position: absolute; left: 115px; top: 70px; width: 432px; color: var(--cream); }
.wp-hero__text h1 { margin-left: 47px; font: 700 56px/76px var(--f-display); letter-spacing: -2.8px; }
.wp-hero__text p { margin-top: 13px; font: 300 16px/28.8px var(--f-body); letter-spacing: -0.16px; }

.wp-pillars { position: relative; height: 543px; overflow: hidden; color: var(--cream); }
.wp-pillars__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-pillars__grid {
  position: relative; display: grid; grid-template-columns: repeat(4, 245px); gap: 91px;
  max-width: var(--page); margin: 0 auto; padding: 129px 0 0 93px;
}
.wp-pillar h2 { margin-bottom: 16px; font: 700 20px/26px var(--f-display); letter-spacing: -0.2px; text-align: center; }
.wp-pillar p { font: 300 16px/24px var(--f-body); letter-spacing: -0.16px; }
.wp-pillar .wp-pillar__small { font: 400 14px/22.4px var(--f-sans); letter-spacing: 0; }
.wp-pillar:first-child .wp-pillar__small { width: 262px; }
.wp-pillar:last-child .wp-pillar__small { width: 262px; }
.wp-pillar ul { margin: 5px 0 0; padding-left: 29px; font: 300 16px/24px var(--f-body); letter-spacing: -0.16px; }
.wp-pillar li { width: 218px; margin-bottom: 0; }
.wp-pillar li + li { margin-top: 0; }

.wp-framework { padding: 32px 16px 38px; text-align: center; }
.wp-framework h2 { font: italic 400 38px/51px var(--f-display); letter-spacing: -1.52px; color: #030b54; }
.wp-framework p { width: 680px; max-width: 100%; margin: 27px auto 0; font: 300 18px/32.4px var(--f-body); letter-spacing: -0.18px; }
.wp-github {
  display: inline-flex; align-items: center; justify-content: center;
  width: 346px; max-width: 100%; height: 40px; margin-top: 32px; border-radius: 30px;
  background: #282626; color: var(--cream); text-decoration: none;
  font: 400 14px/1 var(--f-sans); letter-spacing: 0.4px;
}
.wp-github:hover { background: var(--gold); }

@media (max-width: 1240px) {
  .wp-hero__back { left: auto; right: 80px; width: 61%; }
  .wp-hero__text { left: 40px; width: calc(100% - 64px); }
  .wp-hero__text h1 { margin-left: 0; }
  .wp-pillars { height: auto; }
  .wp-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; padding: 80px 40px; }
  .wp-pillar .wp-pillar__small, .wp-pillar li { width: auto !important; }
}

/* Mobile: Wix 320px units, see site.css */
@media (max-width: 760px) {
  .wp-hero { display: flex; flex-direction: column; height: auto; }
  .wp-hero__back { position: static; width: 100%; height: calc(248 * var(--m)); }
  .wp-hero__band { position: relative; top: 0; height: calc(285 * var(--m)); overflow: visible; }
  .wp-hero__band-img { position: absolute; inset: 0; }
  .wp-hero__panel { width: 100%; }
  .wp-hero__text { left: calc(21 * var(--m)); top: calc(74 * var(--m)); width: calc(276 * var(--m)); }
  .wp-hero__text h1 {
    position: absolute; left: calc(32 * var(--m)); top: calc(-172 * var(--m)); margin: 0;
    font-size: calc(30 * var(--m)); line-height: calc(40 * var(--m)); letter-spacing: calc(-1.5 * var(--m)); white-space: nowrap;
  }
  .wp-hero__text p { margin: 0; font-size: calc(16 * var(--m)); line-height: calc(28.8 * var(--m)); }

  .wp-pillars { height: calc(1230 * var(--m)); }
  .wp-pillars__grid { grid-template-columns: 1fr; gap: calc(113 * var(--m)); padding: calc(65 * var(--m)) calc(20 * var(--m)) 0 calc(21 * var(--m)); }
  .wp-pillar h2 { margin-bottom: calc(22 * var(--m)); font-size: calc(20 * var(--m)); line-height: calc(26 * var(--m)); }
  .wp-pillar p, .wp-pillar ul { font-size: calc(15 * var(--m)); line-height: calc(22.5 * var(--m)); }
  .wp-pillar ul { padding-left: calc(27 * var(--m)); margin-top: calc(4 * var(--m)); }
  .wp-pillar .wp-pillar__small { font-size: calc(14 * var(--m)); line-height: calc(22.4 * var(--m)); }

  .wp-framework { height: calc(379 * var(--m)); padding: calc(40 * var(--m)) calc(20 * var(--m)) 0; }
  .wp-framework h2 { font-size: calc(26 * var(--m)); line-height: calc(35 * var(--m)); letter-spacing: calc(-1.04 * var(--m)); }
  .wp-framework p { margin-top: calc(24 * var(--m)); font-size: calc(16 * var(--m)); line-height: calc(28.8 * var(--m)); }
  .wp-github {
    display: block; width: 100%; height: calc(42 * var(--m)); margin-top: calc(23 * var(--m)); padding: 0 calc(8 * var(--m));
    line-height: calc(42 * var(--m)); font-size: calc(15 * var(--m)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}