/* set variables */
:root {
  --light-grey: #F0F0F3;
  --red: #B22424;
  --dark-red: #871212;
  --grey: #727272;
}

.button.signup-button:not(#header .button.signup-button) {
  gap: 10px;
  padding: 20px 25px;
  background: var(--red);
  color: var(--white);
  box-shadow: inset 0 -4px 0 var(--dark-red);
  transition: 200ms ease-out;
}
  .button.signup-button:hover,
  .button.signup-button:focus {
    transform: scale(1.025);
  }
  .button svg {
    width: 20px;
  }

/* hero banner */

#sg-hero {
  position: relative;
  background: var(--purple);
  padding: 60px 0 80px;
}
#sg-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  justify-content: center;
}
#sg-hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}
  #sg-hero .text {
    text-align: center;
    padding-bottom: 0;
  }
  #sg-hero .text {
    gap: 20px;
  }
  #sg-hero .text h1 {
    font-size: clamp(3.25rem, 2.6667rem + 1.2153vw, 4.125rem);
    margin-bottom: 15px;
    line-height: 1.05;
    text-wrap: balance;
  }
  #sg-hero .text p {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.3;
    letter-spacing: 1px;
    text-wrap: balance;
    margin-bottom: 10px;
  }
  #sg-hero .text p.small {
    font-size: 18px;
    font-weight: 400;
  }
  #sg-hero .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding-top: 20px;
  }
    #sg-hero .button {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 26px 30px !important;
      color: var(--white);
    }
      #sg-hero .button:after {
        display: none;
      }
    #sg-hero .buttons p {
      font-size: 14px;
      font-weight: 600;
      color: var(--light-purple);
      line-height: 1.2;
      letter-spacing: 1px;
    }
@media screen and (max-width: 1024px) {
  #sg-hero .container {
    grid-template-columns: minmax(0, 1fr);
  }
  #sg-hero .text {
    align-items: center;
    text-align: center;
  }
  #sg-hero .text p {
    line-height: 1.3;
  }
  #sg-hero .buttons {
	  margin-top: 20px;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  #sg-hero .text h1 {
    font-size: 46px;
  }
  #sg-hero .text > p {
    font-size: 20px;
  }
}
@media screen and (max-width: 580px) {
  #sg-hero {
    padding: 30px 0 30px;
  }
  #sg-hero .container {
    padding: 0 10vw;
    gap: 20px;
  }
}

.trust-banner {
  padding: 30px 20px;
  background: var(--dark-purple);
}
.trust-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
}
  .trust-banner .container > p {
    font-size: 30px;
    font-weight: 700;
    color: var(--orange);
    line-height: 1.1;
    text-align: center;
  }
  .trust-banner .blocks {
    display: flex;
    gap: 70px;
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
  }
    .trust-banner .blocks .block {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .trust-banner .blocks svg {
      flex-shrink: 0;
      width: 30px;
    }

@media screen and (max-width: 768px) {
  .trust-banner .blocks {
    gap: 30px;
  }
}
@media screen and (max-width: 580px) {
  .trust-banner .blocks {
    flex-direction: column;
  }
}

@media screen and (max-width: 580px) {
  body.single-study-guide .main {
    padding: 50px 0;
  }
}
.balanced,
.balanced * {
  text-wrap: balance;
}
.main.grey-bg {
  background: #F0F0F3;
}
.main.centered .container {
  text-align: center !important;
}
body.single-study-guide .main h2 {
  font-size: 48px;
  margin-bottom: 15px;
}
body.single-study-guide .main h2.medium {
  font-size: 38px;
}
body.single-study-guide .main h2.small {
  font-family: var(--heading);
  font-size: 28px;
  margin: 0 0 10px;
}
  body.single-study-guide .main h2 span,
  body.single-study-guide .main h3 span {
    color: #555280;
  }
body.single-study-guide .main h3 {
  font-family: var(--text);
  font-size: 28px;
  font-weight: 700;
  color: var(--purple);
  line-height: 1.2;
  margin-bottom: 15px;
  text-wrap: balance;
}
body.single-study-guide .main p {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
}
body.single-study-guide .main p.balance {
  text-wrap: balance;
}
body.single-study-guide .main p.small-text {
  font-size: 14px;
  line-height: 1.2;
  color: var(--grey);
  margin: 0;
}
body.single-study-guide .main p:not(:last-of-type) {
  margin: 0 0 30px;
}
.trust-banner + .main h2:first-of-type {
  font-size: 52px;
  line-height: 1;
  margin: 0 0 10px;
}
.trust-banner + .main h2 {
  margin: 0 0 15px;
}
.main.split .container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px 120px;
}
.main.split .sidebar {
  min-width: 560px;
  padding: 20px 40px 40px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid #bfbfd8;
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
}
  .main.split .sidebar h2 {
    font-size: 44px;
  }
@media screen and (max-width: 1024px) {
  .main.split .container {
    grid-template-columns: 1fr;
  }
  .main.split .sidebar {
    min-width: 0;
    text-align: center;
  }
}
.button-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
  .button-cta p {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: var(--grey);
    letter-spacing: 0.5px;
    text-align: center;
  }
.features-list {
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--black);
  text-align: left;
}
  .features-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
  }
  .features-list li svg {
    width: 26px;
    flex-shrink: 0;
  }
  .features-list li a {
    display: contents;
  }

#test-data-chart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 30px;
}
  #test-data-chart .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 262px;
    padding: 30px;
    background: #403D74;
    border-radius: 12px;
    text-align: center;
  }
  #test-data-chart .block.highlight {
    transform: scale(1.1);
    background: var(--purple);
  }
  #test-data-chart .block svg {
    height: 54px;
  }
  #test-data-chart .block .number {
    font-size: 40px;
    font-weight: 700;
    color: var(--orange);
    line-height: 1.3;
  }
    #test-data-chart .block.highlight .number {
      font-size: 52px;
      line-height: 1;
    }
  #test-data-chart .block .title {
    font-size: clamp(0.875rem, 0.7083rem + 0.3472vw, 1.125rem);
    color: var(--white);
    line-height: 1.1;
  }
    #test-data-chart .block.highlight .title {
      font-size: clamp(0.9375rem, 0.6458rem + 0.6076vw, 1.375rem);
    }
@media screen and (max-width: 1024px) {
  #test-data-chart {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  #test-data-chart .block {
    min-width: 0;
    padding: 20px;
  }
}
@media screen and (max-width: 768px) {
  #test-data-chart {
    grid-template-columns: 1fr;
  }
  #test-data-chart .block {
    padding-bottom: 30px;
  }
}
.testimonial-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 50px 40px;
  margin: 60px auto 30px;
  background: #ededf4;
  border: 1px solid #dad9fd;
  border-radius: 12px;
  max-width: 790px;
}
  .testimonial-block p {
    position: relative;
    font-size: 24px;
    font-style: italic;
    line-height: 1.3;
  }
    .testimonial-block p .quote {
      position: absolute;
    }
    .testimonial-block p .quote.left {
      top: -10px;
      left: -30px;
    }
    .testimonial-block p .quote.right {
      transform: rotate(180deg);
      bottom: -10px;
      right: -30px;
    }
  .testimonial-block cite {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    margin-top: 30px;
  }
  .testimonial-block cite img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
.accordion {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto 30px;
}
.accordion h3 {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 9px 20px;
  margin: 10px 0 0 !important;
  background: var(--orange);
  font-family: var(--text);
  font-size: clamp(1rem, 0.75rem + 0.5208vw, 1.375rem) !important;
  font-weight: 700;
  color: var(--purple);
  line-height: 1.4;
  text-align: left;
  border-radius: 12px;
  transition: var(--transition-fast);
  cursor: zoom-in;
}
  .accordion h3:hover,
  .accordion h3:focus {
    background: var(--purple);
    color: var(--white) !important;
  }
.accordion h3::after {
  content: '';
  width: 28px;
  height: 28px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23262262' d='M344 120C344 106.7 333.3 96 320 96C306.7 96 296 106.7 296 120L296 296L120 296C106.7 296 96 306.7 96 320C96 333.3 106.7 344 120 344L296 344L296 520C296 533.3 306.7 544 320 544C333.3 544 344 533.3 344 520L344 344L520 344C533.3 344 544 333.3 544 320C544 306.7 533.3 296 520 296L344 296L344 120z'/></svg>") no-repeat center;
  background-size: contain;
}
.accordion h3:hover::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23ffffff' d='M344 120C344 106.7 333.3 96 320 96C306.7 96 296 106.7 296 120L296 296L120 296C106.7 296 96 306.7 96 320C96 333.3 106.7 344 120 344L296 344L296 520C296 533.3 306.7 544 320 544C333.3 544 344 533.3 344 520L344 344L520 344C533.3 344 544 333.3 544 320C544 306.7 533.3 296 520 296L344 296L344 120z'/></svg>") no-repeat center;
}
.accordion h3.ui-accordion-header-active {
  border-radius: 12px 12px 0 0;
  cursor: zoom-out;
}
.accordion .ui-accordion-header-active::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23262262' d='M96 320C96 306.7 106.7 296 120 296L520 296C533.3 296 544 306.7 544 320C544 333.3 533.3 344 520 344L120 344C106.7 344 96 333.3 96 320z'/></svg>") no-repeat center;
  background-size: contain;
}
.accordion .ui-accordion-header-active:hover::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23ffffff' d='M96 320C96 306.7 106.7 296 120 296L520 296C533.3 296 544 306.7 544 320C544 333.3 533.3 344 520 344L120 344C106.7 344 96 333.3 96 320z'/></svg>") no-repeat center;
}
div.accordion-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}
.accordion .ui-accordion-content {
  width: 100%;
  padding: 20px;
  background: var(--white);
  border-radius: 0 0 12px 12px;
}
  .accordion .ui-accordion-content p {
    margin: 0;
    font-size: 18px !important;
  }

#pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px;
  justify-content: center;
  padding: 30px 0;
}
  #pricing-cards .card {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    border-radius: 13px;
    background: #F0F0F3;
  }
  #pricing-cards .card.monthly {
    padding: 0 0 2px;
  }
  #pricing-cards .card.semi-annual {
    border: 1px solid #bfbed8;
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
  }
  #pricing-cards .card .heading {
    position: relative;
    padding: 10px 20px;
    background: var(--green);
    font-size: 22px;
    font-weight: 700;
    color: var(--purple);
    line-height: 1.2;
    border-radius: 12px 12px 0 0;
  }
  #pricing-cards .card.semi-annual .heading {
    background: var(--purple);
    color: var(--white);
  }
  #pricing-cards .card .badge {
    position: absolute;
    top: -25px;
    right: -15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 18px;
    line-height: 1.1;
    background: var(--orange);
    color: var(--purple);
  }
    #pricing-cards .card .badge svg {
      width: 20px;
    }
  #pricing-cards .card .price {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1;
    text-align: left;
  }
    #pricing-cards .card .amount {
      font-size: 52px;
      font-weight: 700;
      color: var(--purple);
    }
    #pricing-cards .card .amount .per {
      font-size: 20px;
      font-weight: 400;
      color: var(--black);
    }
    #pricing-cards .card .meta {
      font-size: 16px;
      flex-basis: 100%;
    }
  #pricing-cards .card .pricing-details {
    padding: 30px;
    background: #F0F0F3;
    border-radius: 0 0 12px 12px;
  }
  #pricing-cards .card .features-list {
    font-size: 18px;
    margin-top: 30px;
  }
.typical-cost {
  font-size: 26px !important;
  font-weight: 600;
  line-height: 1.3;
}
  .typical-cost span {
    display: block;
    font-size: 22px !important;
    font-weight: 400;
  }
@media screen and (max-width: 768px) {
  #pricing-cards {
    display: flex;
    flex-direction: column-reverse;
  }
  #pricing-cards .card {
    max-width: 100%;
  }
  #pricing-cards .card .price {
    justify-content: center;
    text-align: center;
  }
}
@media screen and (max-width: 580px) {
  #pricing-cards {
    padding-top: 40px;
  }
  #pricing-cards .card .badge {
    transform: scale(0.8) translateX(-50%);
    top: -27px;
    right: auto;
    left: calc(50% - 15px);
    width: inherit;
  }
}

#practice-test-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-items: center;
  margin-top: 30px;
}
  #practice-test-cards .test-card {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #b9b9b9;
    border-radius: 12px;
    cursor: zoom-in;
    transition: var(--transition-normal);
  }
  #practice-test-cards .test-card img {
    transition: var(--transition-normal);
  }
  #practice-test-cards .test-card:hover,
  #practice-test-cards .test-card:focus {
    border: 1px solid var(--purple);
    background: var(--purple);
  }
  #practice-test-cards .test-card:hover img,
  #practice-test-cards .test-card:focus img {
    opacity: 0.5;
  }
@media screen and (max-width: 768px) {
  #practice-test-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Lightbox base */
.ic-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.ic-lb.is-open { display: block; }

/* Backdrop fade */
.ic-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  opacity: 0;
  transition: opacity 220ms ease;
}

/* Dialog pop/zoom */
.ic-lb__dialog {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  padding: 24px;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

/* Open state transitions */
.ic-lb.is-open .ic-lb__backdrop { opacity: 1; }
.ic-lb.is-open .ic-lb__dialog   { opacity: 1; transform: translateY(0) scale(1); }

/* Figure / image */
.ic-lb__figure {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.ic-lb__img {
  max-width: min(1100px, 100%);
  max-height: 80vh;
  width: 100%;
  object-fit: contain;
  border-radius: 14px;
  display: block;
  background: rgba(255,255,255,.03);
}

/* Caption */
.ic-lb__caption {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  text-align: center;
  max-width: 900px;
}

/* Close button */
.ic-lb__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  padding-top: 4px;
  border-radius: 999px;
  border: 3px solid var(--purple);
  cursor: pointer;
  font-size: 18px;
  transition: var(--transition-fast);
}
  .ic-lb__close:hover,
  .ic-lb__close:focus {
    transform: scale(1.075);
    background: var(--purple);
    color: var(--white);
  }

/* Nav buttons */
.ic-lb__nav {
  width: 48px;
  height: 48px;
  padding-bottom: 4px;
  border-radius: 999px;
  border: 3px solid var(--purple);
  cursor: pointer;
  font-size: 28px;
  transition: var(--transition-fast);
  line-height: 1;
  justify-self: center;
}
.ic-lb__nav:hover,
.ic-lb__nav:focus {
  transform: scale(1.075);
  padding-bottom: 6px;
  background: var(--purple);
  color: var(--white);
}

/* Subtle image swap animation when cycling */
.ic-lb__dialog.ic-lb__swapping .ic-lb__img {
  opacity: .6;
  transform: scale(.995);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Mobile tweak */
@media (max-width: 700px) {
  .ic-lb__dialog {
    grid-template-columns: 44px 1fr 44px;
    padding: 14px;
  }
  .ic-lb__img {
    max-height: 75vh;
    border-radius: 12px;
  }
}


#footer {
  padding: 60px 0;
  background: var(--purple);
}
#footer .container {
  display: grid;
  grid-template-columns: minmax(33%, 1fr) minmax(33%, 1fr) minmax(28%, 1fr);
  gap: 2%;
}
  #footer .logo__contact-info,
  #footer .logo__contact-info .contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  #footer .logo__contact-info .logo {
    position: relative;
    z-index: 9;
    display: block;
    width: 250px;
    height: auto;
  }
    #footer .logo__contact-info .logo img {
      width: 100%;
      max-width: none;
    }
  #footer .logo__contact-info .contact-info {
    gap: 10px;
  }
  #footer .logo__contact-info .contact-info *,
  #footer .logo__contact-info .meta-links {
    color: var(--white);
    font-size: 16px;
  }
  #footer .logo__contact-info .contact-info li {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  #footer .logo__contact-info .contact-info svg {
    width: 20px;
  }
  #footer .logo__contact-info .contact-info a {
    font-weight: 400;
    text-decoration: none !important;
  }
    #footer .logo__contact-info .contact-info a:hover,
    #footer .logo__contact-info .contact-info a:focus {
      color: var(--orange);
    }
  #footer .logo__contact-info .meta-links {
    display: flex;
    gap: 10px;
  }
  #footer .logo__contact-info .meta-links a {
    font-weight: 400;
    color: var(--white);
  }
  #footer .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }
    #footer .footer-nav ul {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    #footer .footer-nav ul#footer-menu {
      padding-top: 5px;
    }
    #footer .footer-nav h2 {
      font-family: var(--text);
      font-size: 24px;
      font-weight: 700;
      color: var(--green);
      line-height: 1.3;
      margin: 0;
    }
    #footer .footer-nav a {
      font-size: 18px;
      font-weight: 400;
      color: var(--white);
      line-height: 1.2;
      text-decoration: none !important;
    }
      #footer .footer-nav a:hover,
      #footer .footer-nav a:focus {
        color: var(--orange);
      }
  #footer .info__button {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: baseline;
    max-width: 60%;
    justify-self: end;
  }
  #footer .info__button p {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.4;
    text-wrap: balance;
  }
@media screen and (max-width: 1024px) {
  #footer .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 'logo nav' 'info info';
    gap: 40px;
  }
  #footer .logo__contact-info {
    grid-area: logo;
  }
  #footer .footer-nav {
    grid-area: nav;
    grid-template-columns: repeat(2, auto);
  }
  #footer .info__button {
    grid-area: info;
    align-items: center;
    max-width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  #footer .container {
    grid-template-columns: 1fr;
    grid-template-areas: 'info' 'nav' 'logo';
  }
  #footer .logo__contact-info {
    align-items: center;
  }
  #footer .logo__contact-info .contact-info {
    align-items: center;
  }
  #footer .footer-nav {
    text-align: center;
  }
  #footer .info__button {
    flex-direction: column-reverse;
    grid-area: info;
    align-items: center;
    max-width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 420px) {
  #footer .footer-nav {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  #footer .logo__contact-info {
    flex-direction: column-reverse;
    gap: 40px;
  }
  #footer .logo__contact-info .contact-info {
    gap: 15px;
  }
  #footer .logo__contact-info .contact-info li {
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
  }
  #footer .logo__contact-info .contact-info li i {
    display: none;
  }
}