:root {
   --page-background-start: #D8EFE7;
   --page-background-end: #FFF;
   --title-primary: #224886;
   --title-secondary: #2352AA;
   --text-primary: #3C4549;
   --text-dark: #313638;
   --header-text: #001C25;
   --footer-background: #192D52;
   --footer-text: #F0F8FE;
   --button-background: #45BEED;
   --action-background: #2C7BE4;
   --action-dark: #224886;
   --light-text: #FFFFFF;
   --surface: #FFFFFF;
   --card-border: #B1DED0;
   --card-background: #F3FAF7;
   --success-border: #59A894;
   --success-text: #2A5B51;
   --info-text: #C1E2FC;
   --info-light-text: #DCEBFC;
   --extension-active: #2C5DB0;
   --extension-panel: #2C64C2;
   --extension-ready: #2865C5;
   --social-proof-card-background: #2c5cb5;
   --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
   --legacy-dark-background: #223048;
   --legacy-section-background: #EDF3F5;
   --legacy-border: #E7ECEA;
}

body {
   font-family: "Mona Sans", sans-serif;
   font-style: normal;
   min-height: 100vh;
   background-color: var(--page-background-end);
   background-image: linear-gradient(180deg, var(--page-background-start) 0%, var(--page-background-end) 58%);
   background-position: top center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: 100% 100vh;
}

a,
button,
[role="button"] {
   transition: color .5s ease, background-color .5s ease, border-color .5s ease,
      opacity .5s ease, box-shadow .5s ease !important;
}

.htu-menu-holder {
   background: var(--legacy-dark-background);
}

header {
   background: transparent;
}

footer {
   background: var(--footer-background);
}

header .nav-link {
   color: var(--header-text) !important;
}

header .nav-link:hover,
footer a:hover {
   opacity: 0.5;
}

@media (min-width: 992px) {
   header .navbar-collapse {
      position: relative;
      justify-content: center;
   }

   header .navbar-nav {
      margin: 0 auto;
   }

   header .header-cta {
      position: absolute;
      right: 0;
   }
}

@media (max-width: 991.98px) {
   header .header-cta {
      display: inline-block;
      margin: 12px 0 8px;
   }
}

.btn-install-extension,
.feedback-btn {
   font-weight: 700;
   font-size: 16px;
   line-height: 22px;
   color: var(--light-text);
   background: var(--button-background);
   text-decoration: none;
   border-radius: 12px;
}

.btn-install-extension {
   background: var(--action-background);
}

.btn-install-extension:hover,
.feedback-btn:hover {
   opacity: 0.7;
   color: var(--light-text);
   background: var(--button-background) !important;
}

.btn-install-extension:hover {
   background: var(--action-background) !important;
}

.submit-exit {
   background-color: var(--button-background);
   border: none;
}

.submit-exit:hover {
   background-color: var(--button-background);
   border: none;
   opacity: 0.7;
}

footer a,
footer p {
   font-weight: 400;
   font-size: 14px;
   line-height: 17px;
   color: var(--light-text) !important;
}

.footer-bar {
   min-height: 224px;
   padding: 32px 32px 12px;
}

.footer-top {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
}

.footer-logo img {
   display: block;
   width: 122px;
   height: auto;
}

.footer-links {
   display: flex;
   gap: 72px;
   justify-content: flex-end;
}

.footer-links .nav-link {
   padding: 4px 0;
   color: var(--footer-text) !important;
   font-size: 18px;
   font-style: normal;
   font-weight: 500;
   line-height: 26px;
}

.footer-divider {
   display: none;
}

.footer-copyright {
   align-self: flex-end;
   margin-top: auto;
}

.footer-copyright p {
   margin: 0;
   color: var(--footer-text) !important;
   text-align: center;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
}

.first-section {
   background: url(../img/first-section-bg.webp);
   min-height: 750px;
   background-repeat: no-repeat;
   background-size: cover;
}

.home-first-section {
   background: transparent;
   min-height: 620px;
   display: flex;
   align-items: center;
}

.home-first-section-content {
   padding-top: 72px;
   padding-bottom: 72px;
}

.home-first-section-copy {
   padding-left: 0;
}

.home-first-section h1 {
   margin: 0;
   color: var(--title-primary);
   font-size: 60px;
   font-style: normal;
   font-weight: 800;
   line-height: 66px;
}

.title-line {
   display: block;
}

.title-line-one {
   color: var(--title-primary);
}

.title-line-two {
   color: var(--title-secondary);
}

.home-first-section-description {
   max-width: 500px;
   margin: 22px 0 32px;
   color: var(--text-primary);
   font-size: 24px;
   font-style: normal;
   font-weight: 400;
   line-height: 34px;
}

.home-first-section-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 129px;
   min-height: 40px;
   padding: 8px 20px;
   font-size: 14px;
   font-weight: 600;
   line-height: 24px;
   border-radius: 6px;
}

.home-first-section-labels {
   display: flex;
   flex-wrap: wrap;
   gap: 28px;
   margin-top: 14px;
   color: var(--text-primary);
   font-size: 12px;
   font-weight: 600;
}

.home-first-section-labels span {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
}

.home-first-section-visual {
   display: flex;
   justify-content: flex-end;
}

.home-widget-container {
   width: 546px;
   height: 664px;
   max-width: 100%;
   overflow: hidden;
   border: 10px solid transparent;
   border-radius: 16px;
   background: #D8EFE7;
}

@media (max-width: 991.98px) {
   .home-first-section-content {
      padding-top: 48px;
      padding-bottom: 48px;
   }

   .home-first-section h1 {
      font-size: 44px;
      line-height: 50px;
   }

   .home-first-section-description {
      font-size: 20px;
      line-height: 29px;
   }

   .home-first-section-visual {
      justify-content: center;
      margin-top: 48px;
   }
}

.middle-section {
   background-color: var(--legacy-section-background);
}

.features-section {
   padding: 22px 0 190px;
}

.weather-cards-panel {
   padding: 16px;
   border: 1px solid var(--legacy-border);
   border-radius: 12px;
   background: var(--surface);
}

.weather-cards-title {
   margin: 2px 0 12px;
   color: var(--title-primary);
   font-size: 16px;
   font-weight: 700;
   line-height: 22px;
}

.features-section-inner {
   padding: 24px 28px;
}

.features-section-title {
   margin: 0;
   color: var(--title-primary);
   text-align: center;
   font-size: 44px;
   font-style: normal;
   font-weight: 700;
   line-height: 1.1;
}

.features-section-description {
   max-width: 760px;
   margin: 8px auto 24px;
   color: var(--text-primary);
   text-align: center;
   font-size: 24px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.4;
}

.weather-card {
   display: flex;
   align-items: center;
   min-height: 54px;
   padding: 8px 12px;
   border-radius: 8px;
   border: 1px solid var(--card-border);
   background: var(--card-background);
}

.weather-cards {
   margin-right: -5px;
   margin-left: -5px;
}

.weather-cards > [class*="col-"] {
   padding-top: 5px;
   padding-bottom: 5px;
   padding-right: 5px;
   padding-left: 5px;
}

.weather-card-icon {
   flex: 0 0 auto;
   width: 28px;
   height: 28px;
   margin-right: 12px;
   color: var(--success-border);
}

.weather-card-icon img {
   display: block;
   width: 32px;
   height: 32px;
}

.weather-card-copy h3 {
   margin: 0;
   color: var(--title-primary);
   font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: 22px;
}

.weather-card-copy p {
   margin: 1px 0 0;
   color: var(--text-primary);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 18px;
}

.features-frame {
   display: flex;
   justify-content: center;
   margin-top: 24px;
}

.features-section-copy {
   padding-top: 24px;
}

.promo-bleed {
   background: var(--action-dark);
   padding: 0;
   margin-bottom: -150px;
}

.promo-section {
   padding: 0;
}

.promo-card {
   width: min(920px, calc(100% - 48px));
   aspect-ratio: 1240 / 460;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px;
   border-radius: 8px;
   background: url(../img/section-bg.webp) center center / cover no-repeat;
   text-align: center;
   position: relative;
   z-index: 1;
   transform: translateY(-50%);
}

.promo-card-title {
   margin: 0 auto;
   color: var(--action-dark);
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 1.2;
   max-width: 780px;
}

.promo-card-text {
   max-width: 760px;
   margin: 4px auto 0;
   color: var(--text-dark);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.35;
}

.promo-card-cta {
   margin-top: 14px;
   min-width: 90px;
   min-height: 32px;
   padding: 5px 14px;
   font-size: 12px;
   line-height: 20px;
   border-radius: 4px;
}

.social-proof-section {
   background: var(--action-dark);
   padding: 32px 0 0;
}

.social-proof-header {
   max-width: 640px;
   margin: 0 auto 32px;
   text-align: center;
}

.social-proof-title {
   margin: 0;
   color: var(--light-text);
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 1.2;
}

.social-proof-subtitle {
   max-width: 380px;
   margin: 8px auto 0;
   color: rgba(240, 248, 254, 0.8);
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.45;
}

.social-proof-grid {
   display: flex;
   flex-wrap: wrap;
   width: min(920px, calc(100% - 80px));
   margin: 0 auto;
}

.social-proof-grid > [class*="col-"] {
   flex: 0 0 50%;
   max-width: 50%;
   padding: 5px;
}

.social-proof-card {
   min-height: 110px;
   padding: 16px 14px 14px;
   border-radius: 4px;
   background: var(--social-proof-card-background);
}

.social-proof-quote {
   margin: 0;
   color: var(--light-text);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.3;
}

.social-proof-author {
   margin: 10px 0 0;
   color: rgba(240, 248, 254, 0.7);
   font-size: 11px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.2;
}

.social-proof-carousel {
   padding-bottom: 28px;
}

.social-proof-dots {
   position: static;
   display: flex;
   justify-content: center;
   gap: 6px;
   margin: 28px 0 0;
}

.social-proof-dots button[data-bs-target] {
   flex: 0 0 auto;
   width: 10px;
   height: 10px;
   margin: 0 !important;
   padding: 0 !important;
   border: 0 !important;
   border-top: 0 !important;
   border-bottom: 0 !important;
   border-radius: 50%;
   background: rgba(240, 248, 254, 0.36);
   opacity: 1;
}

.social-proof-dots button[data-bs-target].active,
.social-proof-dots button[data-bs-target].is-active {
   background: #9fc7ff;
}

.social-proof-dots button[data-bs-target]:disabled {
   cursor: default;
}

.social-proof-slot {
   display: flex;
   justify-content: center;
   margin-top: 32px;
   position: relative;
   z-index: 2;
   transform: translateY(50%);
}

.getting-started-section {
   background: var(--page-background-end);
   padding: 185px 0 72px;
}

.getting-started-header {
   margin: 0 auto 88px;
   text-align: center;
}

.getting-started-card {
   position: relative;
   padding: 38px 18px 18px;
   border: 1px solid var(--legacy-border);
   border-radius: 6px;
   background: var(--surface);
   text-align: center;
}

.getting-started-number {
   position: absolute;
   top: 0;
   left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border: 1px solid var(--action-background);
   border-radius: 50%;
   background: var(--page-background-end);
   color: var(--action-background);
   text-align: center;
   font-family: "Mona Sans", sans-serif;
   font-size: 33px;
   font-style: normal;
   font-weight: 600;
   line-height: 22px;
   transform: translate(-50%, -50%);
}

.getting-started-card h3 {
   margin: 0;
   color: var(--action-dark);
   font-size: 22px;
   font-style: normal;
   font-weight: 700;
   line-height: 29px;
}

.getting-started-card p {
   min-height: 44px;
   margin: 8px auto 24px;
   color: var(--text-primary);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px;
}

.getting-started-card img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 6px;
}

.closing-cta-section {
   width: 100%;
   background: linear-gradient(180deg, #FFF 0%, #DCEEFD 100%);
   padding: 72px 0 56px;
}

.closing-cta-card {
   width: min(860px, calc(100% - 48px));
   margin: 0 auto;
   padding: 54px 32px 52px;
   border-radius: 16px;
   background: var(--card-background);
   box-shadow: var(--shadow-card);
   text-align: center;
}

.closing-cta-title {
   margin: 0;
   color: var(--action-dark);
   text-align: center;
   font-family: "Mona Sans", sans-serif;
   font-size: 44px;
   font-style: normal;
   font-weight: 700;
   line-height: 48px;
}

.closing-cta-text {
   margin: 10px 0 0;
   color: var(--text-dark);
   text-align: center;
   font-family: "Mona Sans", sans-serif;
   font-size: 24px;
   font-style: normal;
   font-weight: 400;
   line-height: 34px;
}

.closing-cta-button {
   margin-top: 22px;
   min-width: 90px;
   min-height: 32px;
   padding: 5px 14px;
   font-size: 12px;
   line-height: 20px;
   border-radius: 4px;
}

.closing-cta-labels {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 24px;
   margin-top: 12px;
   color: var(--text-primary);
   font-size: 11px;
   font-weight: 600;
   line-height: 16px;
}

.closing-cta-labels > span {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   white-space: nowrap;
}

.closing-cta-banner {
   display: flex;
   justify-content: center;
   margin-top: 30px;
}

.card-big {
   --card-big-border: var(--legacy-border);
   --card-big-title: var(--title-primary);
   --card-big-text: var(--text-primary);
   --card-big-label: var(--success-text);

   display: flex;
   flex-direction: column;
   min-width: 0;
   padding: 23px;
   border: 1px solid var(--card-big-border);
   border-radius: 8px;
   background: var(--surface);
}

.card-big-grid > [class*="col-"] {
   padding-top: 12px;
   padding-bottom: 12px;
}

.card-big-head {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
}

.card-big-label {
   color: var(--card-big-label);
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
   line-height: 29px;
   letter-spacing: 0.7px;
   text-transform: uppercase;
}

.card-big-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   color: var(--card-big-label);
}

.card-big-icon img {
   display: block;
   width: 24px;
   height: 24px;
}

.card-big-title {
   margin: 0;
   color: var(--card-big-title);
   font-size: 33px;
   font-style: normal;
   font-weight: 700;
   line-height: 40px;
}

.card-big-text {
   margin: 0;
   color: var(--card-big-text);
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 26px;
}

.card-big-media {
   margin-top: 24px;
   overflow: hidden;
   border-radius: 6px;
   background: var(--legacy-section-background);
}

.card-big-media img {
   display: block;
   width: 100%;
   height: auto;
}

@media (max-width: 575.98px) {
   .features-section {
      padding-bottom: 140px;
   }

   .features-section-inner {
      padding: 20px 16px;
   }

   .weather-cards-panel {
      padding: 12px;
   }

   .promo-section {
      padding: 0;
   }

   .promo-bleed {
      padding: 0;
      margin-bottom: -90px;
   }

   .promo-card {
      width: calc(100% - 24px);
      aspect-ratio: auto;
      padding: 32px 20px 28px;
   }

   .promo-card-title {
      font-size: 26px;
      line-height: 1.15;
   }

   .promo-card-text {
      font-size: 13px;
      line-height: 1.5;
   }

   .social-proof-section {
      padding: 28px 0 0;
   }

   .social-proof-header {
      margin-bottom: 28px;
   }

   .social-proof-title {
      font-size: 28px;
   }

   .social-proof-subtitle {
      font-size: 16px;
   }

   .social-proof-grid {
      width: 100%;
   }

   .social-proof-grid > [class*="col-"] {
      flex-basis: 100%;
      max-width: 100%;
   }

   .social-proof-card {
      min-height: 0;
   }

   .social-proof-slot {
      margin-top: 24px;
   }

   .getting-started-section {
      padding: 160px 0 52px;
   }

   .getting-started-header {
      margin-bottom: 68px;
   }

   .getting-started-grid {
      max-width: 520px;
      margin: 0 auto;
   }

   .getting-started-card h3 {
      font-size: 20px;
      line-height: 26px;
   }

   .getting-started-card p {
      min-height: 0;
   }

   .closing-cta-section {
      padding: 52px 0 40px;
   }

   .closing-cta-card {
      width: calc(100% - 24px);
      padding: 38px 20px 34px;
   }

   .closing-cta-title {
      font-size: 32px;
      line-height: 36px;
   }

   .closing-cta-text {
      font-size: 18px;
      line-height: 26px;
   }

   .closing-cta-labels {
      gap: 12px;
   }

   .closing-cta-banner {
      margin-top: 24px;
   }

   .card-big {
      padding: 20px;
   }

   .card-big-title {
      font-size: 28px;
      line-height: 34px;
   }

   .card-big-text {
      font-size: 16px;
      line-height: 24px;
   }
}

.widget-img {
   max-width: 305px;
}

.last-section {
   background: url(../img/last-section-bg.webp);
   min-height: 750px;
   background-repeat: no-repeat;
   background-size: cover;
   margin-top: -175px;
}

.fdbck-header-holder {
   background: var(--legacy-dark-background);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom;
}

.fdbc-img-holder {
   background: var(--legacy-section-background);
}

#starScore {
   margin-left: -20px;
}

.feedback-btn {
   border: none;
}

.static-view .title-holder h1 {
   color: var(--action-dark);
}

/* Exit survey */
.exit-survey-view {
   min-height: calc(100vh - 120px);
   padding-top: 48px !important;
   padding-bottom: 24px !important;
   color: var(--text-primary);
}

#exit-survey-form {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 970px;
   margin: 0 auto;
}

#exit-survey-form::before {
   content: "👋";
   display: block;
   margin-bottom: 26px;
   font-size: 58px;
   line-height: 1;
}

#exit-survey-form > h2 {
   order: 1;
   width: 100%;
   margin: 0 0 42px;
   color: var(--action-dark);
   text-align: center;
   font-size: 52px;
   line-height: 1.15;
}

#exit-survey-form > .row {
   order: 4;
   width: 100%;
   margin: 46px 0 0 !important;
   justify-content: center;
}

#exit-survey-form > .row .box728x90,
#exit-survey-form > .row > * {
   max-width: 100%;
}

#exit-survey-form > input[type="hidden"] {
   order: 2;
}

#exit-survey-form > .questions-holder {
   order: 3;
   width: min(668px, 100%);
   margin: 0 !important;
   padding: 40px;
   border: 1px solid var(--success-border);
   border-radius: 20px;
   background: rgba(243, 250, 247, 0.72);
   color: var(--text-primary);
}

#exit-survey-form .submit-exit {
   padding: 10px 20px;
   border-radius: 6px;
   background: var(--action-background);
   font-size: 16px;
   font-weight: 700;
}

@media (max-width: 575.98px) {
   .exit-survey-view {
      padding-top: 28px !important;
   }

   #exit-survey-form::before {
      margin-bottom: 18px;
      font-size: 46px;
   }

   #exit-survey-form > h2 {
      margin-bottom: 28px;
      font-size: 36px;
   }

   #exit-survey-form > .questions-holder {
      padding: 24px 20px;
      border-radius: 16px;
   }

}

#website-widget-container {
   min-height: 650px;
   display: grid;
}

.how-to-use-page {
   min-height: 100vh;
   padding-bottom: 0;
}

.how-to-use-welcome {
   padding: 28px 16px 36px;
   text-align: center;
}

.how-to-use-welcome-emoji {
   margin-bottom: 22px;
   font-size: 52px;
   line-height: 1;
}

.how-to-use-welcome h1,
.how-to-use-intro h2 {
   margin: 0;
   color: var(--action-dark);
   font-size: 44px;
   font-weight: 700;
   line-height: 1.1;
}

.how-to-use-welcome p,
.how-to-use-intro p {
   margin: 12px 0 0;
   color: var(--text-primary);
   font-size: 20px;
   font-weight: 400;
   line-height: 29px;
}

.how-to-use-welcome-cta {
   margin-top: 22px;
   padding: 10px 20px;
   border: 0;
   border-radius: 6px;
}

.how-to-use-banner {
   display: flex;
   justify-content: center;
   padding: 0 16px;
}

.how-to-use-intro {
   padding: 78px 16px 0;
   text-align: center;
}

.how-to-use-cards {
   padding: 64px 0 0;
}

.how-to-use-cards .card-big-grid {
   max-width: 1040px;
   margin: 0 auto;
}

.how-to-use-cards .card-big {
   padding: 20px 18px 0;
}

.how-to-use-cards .card-big-label {
   display: inline-flex;
   align-items: center;
   min-height: 20px;
   padding: 2px 8px;
   border-radius: 2px;
   background: var(--card-background);
   color: #2A5B51;
   font-size: 10px;
   font-weight: 600;
   line-height: 14px;
   letter-spacing: 0.4px;
}

.how-to-use-cards .card-big-title {
   margin-top: 8px;
   font-size: 23px;
   line-height: 27px;
}

.how-to-use-cards .card-big-text {
   min-height: 66px;
   margin-top: 8px;
   font-size: 13px;
   line-height: 18px;
}

.how-to-use-cards .card-big-media {
   margin-top: 16px;
   border-radius: 6px 6px 0 0;
}

.how-to-use-tip {
   display: flex;
   align-items: center;
   gap: 8px;
   max-width: 1040px;
   min-height: 50px;
   margin: 40px auto 0;
   padding: 8px 14px;
   border: 1px solid var(--success-border);
   border-radius: 8px;
   background: var(--card-background);
   color: var(--success-text);
   font-family: "Mona Sans", sans-serif;
   font-size: 18px;
   font-weight: 400;
   line-height: 29px;
}

.how-to-use-tip-icon {
   flex: 0 0 32px;
}

.how-to-use-tip p {
   margin: 0;
   font-size: inherit;
   line-height: inherit;
}

.how-to-use-tip strong {
   font-weight: 700;
}

.how-to-use-transition-banner {
   position: relative;
   z-index: 2;
   display: flex;
   justify-content: center;
   margin-top: 32px;
   height: 45px;
}

.how-to-use-transition-banner > .box728x90 {
   position: absolute;
   top: 0;
}

.how-to-use-extension-area {
   margin-top: 0;
   padding-top: 72px;
   color: #fff;
   background: var(--action-dark);
}

.how-to-use-manage {
   max-width: 1040px;
   margin-right: auto;
   margin-left: auto;
}

.how-to-use-manage-copy h2,
.how-to-use-ready h2 {
   margin: 0;
   font-family: "Mona Sans", sans-serif;
   font-size: 44px;
   line-height: normal;
   font-weight: 700;
}

.how-to-use-manage-intro {
   max-width: 450px;
   margin: 4px 0 22px;
   color: var(--info-text);
   font-family: "Mona Sans", sans-serif;
   font-size: 24px;
   font-weight: 400;
   line-height: 34px;
}

.how-to-use-options {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.how-to-use-option {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid transparent;
   border-radius: 6px;
   color: #fff;
   background: transparent;
   text-align: left;
}

.how-to-use-option.is-active {
   border-color: #4B82D7;
   background: var(--extension-active);
}

.how-to-use-option:not(.is-active):hover {
   border-color: #4B82D7;
   background: transparent;
}

.how-to-use-option strong,
.how-to-use-option span {
   display: block;
}

.how-to-use-option strong {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #FFF;
   font-family: "Mona Sans", sans-serif;
   font-size: 18px;
   font-weight: 600;
   line-height: 29px;
}

.how-to-use-option strong img {
   flex: 0 0 16px;
   width: 16px;
   height: 16px;
}

.how-to-use-option span {
   margin: 3px 0 0 25px;
   color: var(--info-text);
   font-family: "Mona Sans", sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
}

.how-to-use-manage-visual {
   min-height: 298px;
   padding: 20px 24px 0;
   border-radius: 8px;
   background: var(--extension-panel);
}

.how-to-use-panel {
   display: none;
   width: 100%;
   min-height: 258px;
   overflow: hidden;
   align-items: center;
   justify-content: flex-end;
   border-radius: 8px 8px 0 0;
   padding: 0;
   background: var(--extension-panel);
   color: var(--extension-panel);
}

.how-to-use-panel.is-active {
   display: flex;
}

.how-to-use-panel img {
   display: block;
   width: 100%;
   height: auto;
   max-width: 545px;
   object-fit: contain;
   object-position: right bottom;
   align-self: flex-end;
   margin: auto 0 0 auto;
}

.how-to-use-ready {
   margin-top: 88px;
   padding-bottom: 40px;
}

.how-to-use-ready-card {
   max-width: 860px;
   margin: 0 auto;
   padding: 48px 24px 52px;
   border-radius: 8px;
   background: var(--extension-ready);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .12), 0 4px 6px -4px rgba(0, 0, 0, .12);
   text-align: center;
}

.how-to-use-ready-card p {
   margin: 10px 0 0;
   color: var(--info-light-text);
   font-size: 16px;
   line-height: 22px;
}

.how-to-use-ready-button {
   margin-top: 22px;
   padding: 6px 16px;
   border: 0;
   border-radius: 4px;
   background: #BEE9DC;
   color: #173A35;
   font-size: 12px;
}

.how-to-use-ready .closing-cta-labels {
   margin-top: 12px;
   color: var(--info-light-text);
}

.how-to-use-ready-banner {
   display: flex;
   justify-content: center;
   margin-top: 28px;
}

@media (max-width: 767.98px) {
   .how-to-use-transition-banner {
      display: none;
   }

   .how-to-use-extension-area {
      margin-top: 32px;
   }

   .box728x90,
   .box970x250-weather {
      display: none !important;
   }
}

@media (max-width: 575.98px) {
   .how-to-use-welcome {
      padding-top: 24px;
   }

   .how-to-use-welcome h1,
   .how-to-use-intro h2,
   .how-to-use-manage-copy h2,
   .how-to-use-ready h2 {
      font-size: 34px;
   }

   .how-to-use-welcome p,
   .how-to-use-intro p,
   .how-to-use-manage-intro {
      font-size: 18px;
      line-height: 26px;
   }

   .how-to-use-banner {
      overflow-x: auto;
      justify-content: flex-start;
   }

   .how-to-use-intro {
      padding-top: 56px;
   }

   .how-to-use-cards {
      padding-top: 44px;
   }

   .how-to-use-cards .card-big-title {
      font-size: 22px;
      line-height: 26px;
   }

   .how-to-use-cards .card-big-text {
      min-height: 0;
   }

   .how-to-use-tip {
      align-items: flex-start;
      margin: 32px 16px 0;
      padding: 10px 12px;
      font-size: 14px;
      line-height: 20px;
   }

   .how-to-use-extension-area {
      margin-top: 32px;
      padding-top: 36px;
   }

   .how-to-use-manage {
      gap: 28px;
   }

   .how-to-use-manage-visual {
      min-height: 240px;
   }

   .how-to-use-panel {
      height: auto;
      min-height: 200px;
   }

   .how-to-use-ready {
      margin-top: 52px;
   }

   .how-to-use-ready-card {
      padding: 36px 18px 40px;
   }
}