* {
   box-sizing: border-box;
}

a {
   color: inherit;
   cursor: pointer;
   text-decoration: none;
}

.accordion {
   border: 1px solid #D6D6D6;
   border-radius: 20px;
   margin-bottom: 10px;
   padding: 30px 40px;
   transition: background-color 500ms;
}

.accordion .iconPlus {
   display: block;
}

.accordion .iconMinus {
   display: none;
}

.accordion.open {
   background-color: rgb(249, 249, 245);
}

.accordion.open .iconPlus {
   display: none;
}

.accordion.open .iconMinus {
   display: block;
}

.accordionCopy {
   /* Used for offsetHeight calculation in script. Otherwise height is off due to collapsing margins. */
   padding-top: 0.05px;
}

.accordionCopy li {
   color: #333;
}

.accordionCopy ul, .legal ul {
   list-style-type: initial;
}

.accordionDropdown {
   height: 0;
   overflow: hidden;
   transition: height 500ms;
}

.accordionGroup:not(:last-child) {
   margin-bottom: 60px;
}

.accordionGroupHeading, .legalHeading {
   line-height: 1.2;
   margin: 0 0 0.5em;
}

.accordionGroupSubheading {
   color: #333;
}

.accordionMain {
   align-items: center;
   column-gap: 24px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
}

.accordionText {
   font-size: 20px;
   font-weight: 300;
   line-height: 1.5;
}

.accordionText h2, .accordionGroupSubheading {
   font-size: 25px;
   font-weight: 400;
   line-height: 1.8;
}

.arrow {
   cursor: pointer;
   display: inline-block;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 25px;
}

.arrowsContainer {
   position: relative;
}

.arrowLeft {
   margin-right: 20px;
   right: 100%;
}

.arrowRight {
   left: 100%;
   margin-left: 20px;
}

.badge {
   background-color: #FFEDC0;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.85px;
   padding: 10px 16px;
   text-transform: uppercase;
   width: max-content;
}

.blurbAuthor {
   align-items: center;
   display: inline-flex;
   font-size: 20px;
   font-weight: 300;
   margin-bottom: 32px;
   text-transform: uppercase;
}

.blurbSource {
   padding-top: 16px;
}

body {
   color: #070E37;
   font-family: "Public Sans", Roboto, Helvetica, Arial, sans-serif;
   margin: 0;
}

.buttonMobileMenu {
   display: none;
   cursor: pointer;
}

.carousel {
   padding: 96px 0;
}

.carouselItem {
   display: grid;
   grid-template-columns: 4fr 6fr;
   column-gap: 50px;
   transition: opacity 0.5s;
}

.carouselItem.dim {
   opacity: 0;
}

.carouselItem.hide {
   display: none;
}

.carouselDots {
   align-items: center;
   column-gap: 10px;
   display: flex;
   justify-content: center;
   margin-top: 30px;
}

.carouselGifWrapper {
   align-self: center;
   grid-column-start: 2;
   grid-row: 1 / 3;
}

.carouselText p {
   color: #62686E;
   font-size: 20px;
   font-weight: 300;
   margin: 0 0 28px 0;
}

.carouselText p > * {
   vertical-align: middle;
}

.carouselText p img {
   margin-right: 14px;
}

.container {
   padding: 0 60px;
}

.contentWrapper {
   margin: auto;
   max-width: 1150px;
}

.contentWrapper.reviews {
   max-width: 1000px;
}

.features section:not(:last-child) .section {
   border-bottom: 2px dotted #BEC6CE;
}

.featureText {
   font-size: 20px;
   font-weight: 300;
}

.carouselText h2, .featureText h2, .promoText h2, .accordionGroupHeading, .legalHeading {
   font-family: "Zilla Slab", serif;
   font-size: 40px;
   font-weight: 400;
}

.dot {
   background-color: rgba(34, 34, 34, 0.4);
   border-radius: 50%;
   cursor: pointer;
   height: 14px;
   width: 14px;
}

.dot.active {
   background-color: #222;
}

.faqsHeading {
   width: 67%;
}

.faqsText {
   font-size: 25px;
   line-height: 1.8;
   margin-top: 40px;
}

.fineprint {
   color: #F6F5EF;
   font-size: 10px;
}

.flexImageLeft {
   flex: 0 0 50%;
   margin-right: 100px;
}

.flexImageRight {
   flex: 0 0 50%;
   margin-left: 100px;
   order: 2;
}

.footer {
   color: #FFF;
   padding: 96px 0;
}

.footer .linkThreadit {
   background-color: #DCF5EF;
   color: #072037;
}

.footer .linkThreadit:hover {
   color: #DCF5EF;
}

.footer p {
   font-family: "Zilla Slab", serif;
   font-size: 40px;
   margin-bottom: 60px;
   max-width: 50%;
}

.footerContent {
   border-bottom: 2px dotted #6F6F6F;
   padding-bottom: 120px;
}

.footerData {
   align-items: center;
   display: flex;
   justify-content: space-between;
   margin-top: 64px;
}

.footerData a:hover {
   opacity: 0.7;
}

.footerLinks {
   align-items: center;
   display: flex;
   font-size: 12px;
   text-transform: uppercase;
}

.footerLinks a:not(:last-child) {
   margin-right: 48px;
}

.footerWrapper {
   background-color: #072037;
}

.gifThreadit {
   max-width: 100%;
}

.gifThreaditWrapper {
   cursor: pointer;
   position: relative;
}

.gifThreaditWrapper:hover .iconPlayVideo {
   display: block;
}

.header {
   align-items: center;
   display: flex;
   height: 150px;
}

.headerWrapper {
   position: sticky;
   top: 0;
   z-index: 1;
}

.headerWrapper, .reviewsWrapper, .section1Wrapper {
   background-color: #F8F7F3;
}

.iconPlayVideo {
   display: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.image {
   width: 100%;
}

.imageMax {
   max-width: 100%;
}

.indent {
   text-indent: 2.5em;
}

.indentDouble {
   text-indent: 5em;
}

.legal li {
   color: #333;
   line-height: 1;
}

li {
   margin-bottom: 0.5em;
}

.linkArea120 {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.3px;
   line-height: 1.7em;
   margin: 0 30px;
}

.linkInline {
   color: #070E37;
   overflow-wrap: break-word;
   text-decoration: underline;
}

.linkThreadit {
   background-color: #072037;
   border-radius: 6px;
   border: none;
   color: #DCF5EF;
   display: inline-block;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.3px;
   padding: 14px 26px;
}

.linkThreadit:hover {
   background-color: #3D5B6E;
}

.logo {
   max-width: 23vw;
   width: 154px;
}

.logoWrapper {
   flex-grow: 1;
}

.mainHeading {
   font-family: "Zilla Slab", serif;
   font-size: 90px;
   font-weight: 400;
   line-height: 0.95;
   margin: 0 0 0.3em;
}

.marginBottom0 {
   margin-bottom: 0;
}

.marginTop0 {
   margin-top: 0;
}

.marginTopExtra {
   margin-top: 1.5em;
}

nav a:not(.linkThreadit) {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.5px;
}

.navDesktop {
   align-items: center;
   column-gap: 50px;
   display: flex;
   height: 100%;
}

.navDesktop a:not(.linkThreadit) {
   display: flex;
   align-items: center;
   height: 100%;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
}

.navDesktop a.currentPage {
   border-top-color: #FC5959;
}

.navMobile {
   display: none;
   flex-direction: column;
   align-items: center;
   row-gap: 32px;
   background-color: inherit;
   border-top: 2px dotted #BEC6CE;
   position: fixed;
   top: 80px;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 30px;
   overflow: auto;
}

.navMobile a.currentPage {
   color: #FC5959;
}

.navMobile.showMobile {
   display: flex;
}

.portrait {
   border-radius: 50%;
   margin-right: 20px;
}

.promo a {
   color: #070E37;
   font-weight: 600;
   text-decoration: underline;
}

.promoText p {
   color: #62686E;
   font-size: 20px;
   font-weight: 300;
}

.promoWrapper {
   background-color: #DCF5EF;
}

.red {
   color: #FC5959;
}

.reviews {
   letter-spacing: 0.75px;
   padding: 96px 0;
   text-align: center;
}

.reviews h2 {
   font-size: 20px;
   text-transform: uppercase;
}

.reviews p {
   font-family: "Zilla Slab", serif;
   font-size: 54px;
   line-height: 1.2;
}

.section {
   padding: 96px 0;
}

.section1Actions {
   align-items: center;
   display: flex;
   column-gap: 40px;
}

.section1FlexLeft {
   flex-basis: 37%;
}

.section1Text {
   margin: 28px 0;
}

.sectionFlex {
   align-items: center;
   display: flex;
}

.sectionFlex.sectionImageRight {
   justify-content: space-between;
}

.shutdownNotice {
   align-items: baseline;
   color: #fc5a59;
   column-gap: 10px;
   display: flex;
   margin-left: 200px;
}

.shutdownNoticeCopy {
   display: flex;
}

.shutdownNoticeIcon {
   display: flex;
}

.support {
   padding-bottom: 96px;
}

.text {
   font-size: 20px;
   font-weight: 300;
   line-height: 1.5;
}

ul {
   list-style-type: "-";
}

.videoCloseButton {
   cursor: pointer;
   position: absolute;
   top: 0;
   right: 0;
   margin: 20px;
   opacity: 0.8;
   width: 30px;
}

.videoCloseButton:hover {
   opacity: 1;
}

.videoThreaditContainer {
   background-color: rgba(7,32,55,.9);
   display: none;
   align-items: center;
   justify-content: center;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
}

.videoThreaditContainer.showVideo {
   display: flex;
}

.videoThreaditSpace {
   padding-top: 56.25%;
   position: relative;
}

.videoThreaditWrapper {
   /* ensures video fits on short, wide screens; otherwise, it's too tall */
   max-width: min(940px, calc(100vh * 16 / 9));
   width: 100%;
}

.videoThreaditWrapper iframe {
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.watchVideo {
   cursor: pointer;
   font-size: 14px;
   letter-spacing: 0.3px;
}

.watchVideo:hover {
   text-decoration: underline;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
   .blurbAuthor {
      margin-bottom: 0;
   }

   .blurbSource {
      align-items: center;
      display: flex;
      justify-content: space-between;
   }

   .header {
      height: 180px;
   }

   .shutdownNotice {
      margin-left: 40px;
   }
}

@media screen and (max-width: 1024px) {
   .blurbAuthor {
      font-size: 12px;
   }

   .blurbText > * {
      display: block;
      text-align: left;
   }

   .blurbText .comma {
      display: none;
   }

   .carouselItem {
      display: block;
   }

   .carouselGifWrapper {
      margin-bottom: 50px;
   }

   .flexImageLeft, .flexImageRight {
      margin: 0;
   }

   .footerData {
      flex-direction: column;
   }

   .footerLinks {
      margin-bottom: 80px;
   }

   .reviews h2 {
      font-size: 12px;
   }

   .reviews p {
      font-size: 40px;
   }

   .section1FlexLeft {
      margin-bottom: 35px;
   }

   .sectionFlex {
      display: block;
   }
}

@media screen and (max-width: 768px) {
   .accordion {
      padding: 20px;
   }

   .accordionText h2, .faqsText, .accordionGroupSubheading {
      font-size: 20px;
      line-height: 1.2;
   }

   .arrowLeft {
      margin-right: 0;
   }

   .arrowRight {
      margin-left: 0;
   }

   .buttonMobileMenu {
      display: block;
   }

   .container {
      padding-left: 30px;
      padding-right: 30px;
   }

   .faqsHeading {
      width: initial;
   }

   .featureText, .promoText p, .carouselText p, .accordionText {
      font-size: 14px;
   }

   .carouselText h2, .featureText h2, .promoText h2, .accordionGroupHeading {
      font-size: 28px;
   }

   .footer p {
      font-size: 22px;
      max-width: initial;
   }

   .footerLinks {
      justify-content: space-between;
      width: 100%;
   }

   .footerLinks a:not(:last-child) {
      margin-right: 10px;
   }

   .header {
      height: 140px;
   }

   .mainHeading {
      font-size: 44px;
      line-height: 1.1;
   }

   .navDesktop {
      display: none;
   }

   .reviews, .section, .carousel {
      padding-bottom: 48px;
      padding-top: 48px;
   }

   .reviews p {
      font-size: 22px;
      line-height: 1.36;
   }

   .shutdownNotice {
      margin-left: 40px;
   }

   .support {
      padding-bottom: 48px;
   }

   .text {
      font-size: 14px;
   }
}
