@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=block');

/* --- Variables --- */

:root {
  --ac-color-black: #000000;
  --ac-color-dark-grey: #262626;
  --ac-color-orange: #ffb301;
  --ac-color-white: #ffffff;

  --ac-color-error-red: #7C000A;
  --ac-color-error-red-outline: #DF5252;

  --ac-color-button-end-gradient: #ffcd00;
  --ac-color-button-start-gradient: #ff9b01;

  --ac-font-weight: 400;
  --ac-font-weight-semibold: 500;
  --ac-font-weight-bold: 700;

  --ac-font-size: 20px;
  --ac-font-size-mobile: 18px;

  --ac-font-size-max: 36px;

  --ac-font-size-t1: 26px;
  --ac-font-size-t1-mobile: 22px;

  --ac-font-size-t2: 22px;
  --ac-font-size-small: 14px;

  --ac-spacing-s: 10px;
  --ac-spacing-m: 20px;
  --ac-spacing-l: 40px;
  --ac-spacing-xl: 60px;

  --ac-footer-height: 110px;
}

/* --- Global --- */

html,
body {
  background-color: var(--ac-color-black);
}

body {
  color: var(--ac-color-white);
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: var(--ac-font-weight);
  font-size: var(--ac-font-size);
  line-height: 1.5;
  position: relative;
  min-height: 100vh;
}

a,
a:hover {
  color: var(--ac-color-white);
  text-decoration: underline;
}

h1,
h2 {
  font-size: var(--ac-font-size-t1);
  line-height: inherit;
}

h3 {
  font-size: var(--ac-font-size);
  text-decoration: underline;
}

@media (max-width: 575px) {
  body {
    font-size: var(--ac-font-size-mobile);
  }

  h1,
  h2 {
    font-size: var(--ac-font-size-t1-mobile);
  }

  h3 {
    font-size: var(--ac-font-size-mobile);
  }
}

.form-control,
.btn,
.alert {
  border-radius: 2px;
}

/* Adjust Bootstrap container to 10px horizontal padding */
.container {
  padding: 0px var(--ac-spacing-s);
}

@media (max-width: 575px) {
  .container.ac-no-mobile-padding {
    padding: 0px;
  }
}

/* Values taken from  https://getbootstrap.com/docs/5.3/layout/containers/ */
@media (min-width: 992px) {
  .container.ac-small {
    /* results in 768px width */
    max-width: 788px;
  }
}

.ac-bold {
  font-weight: var(--ac-font-weight-bold);
}

.ac-nowrap {
  white-space: nowrap;
}

.ac-highlight,
.legal h1,
.legal h2,
.legal h3,
#subpage h1,
#subpage h2,
#subpage h3 {
  color: var(--ac-color-orange);
  font-weight: var(--ac-font-weight-bold);
}

.ac-semi-highlight {
  color: var(--ac-color-orange);
}

.legal h1 {
  font-size: var(--ac-font-size-max);
}

.ac-color,
a.ac-color:hover {
  color: var(--ac-color-orange);
}

a.ac-color {
  text-decoration: none;
}

a.ac-color:hover {
  text-decoration: underline;
}

.ac-card {
  background-color: var(--ac-color-dark-grey);
  padding: var(--ac-spacing-s);
  border-radius: 4px;
}

/* --- Top Bar --- */

#top-bar {
  background-color: var(--ac-color-orange);
  text-align: center;
  color: var(--ac-color-black);
  padding: var(--ac-spacing-s) 0px;
}

/* --- Header --- */

header {
  display: flex;
  margin-top: 40px;
  margin-bottom: 40px;
  justify-content: center;
  align-items: center;
}

header.hero {
  margin: 100px 0px;
}

#logo-shadow {
  display: none;
  text-align: center;
}

#logo svg {
  height: 46px;
  width: auto;
}

#logo-shadow svg {
  height: 84px;
  width: auto;
}

#claim {
  font-size: var(--ac-font-size-t2);
  font-weight: var(--ac-font-weight-semibold);
  color: var(--ac-color-orange);
  /* half of the font size */
  margin: 13px 0px 0px;
}

@media (max-width: 575px) {
  #logo svg {
    height: 38px;
  }

  /* Mobile */
  #claim {
    font-size: var(--ac-font-size-mobile);
    /* half of the font size */
    margin-top: 9px;
  }

  /* Mobile Hero */
  header.hero {
    height: calc(100vw * 1.4);
    background-image: url(../img/hero.jpg);
    background-size: cover;
    margin: 0px;
  }

  #logo.hero {
    display: none;
  }

  #logo-shadow.hero {
    display: block;
  }

  #claim.hero {
    color: var(--ac-color-white);
    font-size: var(--ac-font-size-t2);
    font-weight: var(--ac-font-weight);
    margin-top: -24px;
  }
}

/* --- Section: Intro Video --- */

#intro-video {
  margin-top: var(--ac-spacing-s);
  text-align: center;
}

#intro-video-text {
  padding-bottom: var(--ac-spacing-l);
}

#intro-video-followup {
  margin-top: var(--ac-spacing-l);
}

/* --- Section: Share --- */

#share {
  margin-top: var(--ac-spacing-l);
  text-align: center;
}

#share-icons {
  display: flex;
  justify-content: center;
  gap: var(--ac-spacing-l);
  margin-top: var(--ac-spacing-m);
  padding-top: var(--ac-spacing);
}

#share a {
  background-color: var(--ac-color-orange);
  background: linear-gradient(90deg, var(--ac-color-button-start-gradient), var(--ac-color-button-end-gradient));
  height: 44px;
  width: 44px;
  border-radius: 100px;
  display: flex;
  align-items: center;
}

#share img {
  margin: auto;
  width: 24px;
}

.ac-fb-icon {
  height: 22px;
}

/* --- Section: Goals --- */

#goals {
  margin-top: var(--ac-spacing-xl);
}

#goals p {
  padding-bottom: var(--ac-spacing-s);
}

#goals-followup {
  margin-top: var(--ac-spacing-l);
  text-align: center;
}

.goal {
  display: flex;
  align-items: stretch;
  gap: var(--ac-spacing-m);
  padding-bottom: var(--ac-spacing-m);
}

.goal-icon {
  margin-top: 6px;
  min-width: 64px;
  max-width: 64px;
  min-height: 52px;
  max-height: 52px;
  background-image: url(../img/goal-icon-bg.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}

.goal-icon img {
  margin-top: 16px;
  height: 22px;
  filter: invert(0.1);
}

.goal-text {
  margin: auto 0px;
}

/* --- Section: Videos --- */

#videos {
  margin-top: var(--ac-spacing-xl);
}

#videos p,
#videos h2 {
  text-align: center;
  margin-bottom: var(--ac-spacing-l);
}

.ac-video {
  margin-bottom: var(--ac-spacing-xl);
}

.ac-video:last-of-type {
  margin-bottom: 0px;
}

.ac-video-titlebar {
  display: flex;
  font-size: var(--ac-font-size-t2);
  font-weight: var(--ac-font-weight-bold);
  color: var(--ac-color-orange);
}

.ac-video-number {
  background-image: url(../img/video-number-bg.svg);

  /* move bg down to center text */
  background-position: 0px 1px;

  height: 33px;
  width: 46px;
  flex-shrink: 0;
  text-align: center;
  padding-right: 7px;
}

.ac-video-text {
  padding-left: 10px;
  padding-bottom: var(--ac-spacing-s);
  /* prevent vertical spacing between spans */
  font-size: 0px;
}

.ac-video-title {
  font-size: var(--ac-font-size-t2);
  font-weight: var(--ac-font-weight-bold);
  color: var(--ac-color-orange);
}

.ac-video-time {
  color: var(--ac-color-white);
  font-size: var(--ac-font-size-small);
  font-weight: var(--ac-font-weight);
  white-space: nowrap;
}

/* --- Signup Form --- */

#signup {
  padding-top: var(--ac-spacing-xl);
}

#signup .ac-card {
  padding-top: var(--ac-spacing-m);
}

#signup h2 {
  text-align: center;
  font-weight: var(--ac-font-weight);
  margin-bottom: var(--ac-spacing-l);
}

#benefits p {
  padding-bottom: var(--ac-spacing-m);
}

.benefit {
  display: flex;
  align-items: stretch;
  gap: var(--ac-spacing-m);
  padding-bottom: var(--ac-spacing-m);
}

.benefit-icon {
  margin-top: 3px;
  height: 24px;
  width: 24px;
}

#form1,
#form2 {
  margin-top: var(--ac-spacing-l);
}

.ac-form-row {
  margin-bottom: var(--ac-spacing-m);
}

.ac-form-legal {
  /* visual correction */
  padding: 0px 2px;
}

.ac-form-row label,
.ac-form-legal p {
  /* reset label size back to bootstrap */
  font-size: var(--bs-body-font-size);
}

input.form-control,
input.form-control:focus,
select.form-select,
select.form-select:focus,
input.form-check-input {
  background-color: var(--ac-color-dark-grey);
  border-color: var(--ac-color-orange);
  color: var(--ac-color-white);
}

input.form-control:focus,
select.form-select:focus {
  box-shadow: 0 0 2px 4px rgba(255, 179, 1, .25);
}

select.form-select,
select.form-select:focus {
  /* data from bootstrap, with modified stroke */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFB301' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.ac-button {
  background-color: var(--ac-color-orange);
  background: linear-gradient(90deg, var(--ac-color-button-start-gradient), var(--ac-color-button-end-gradient));
  border: 0px;
  color: var(--ac-color-black);
  width: 100%;
  font-weight: var(--ac-font-weight-bold);
  /* responsive values */
  height: 72px;
  font-size: var(--ac-font-size-t1-mobile);
}

@media (max-width: 575px) {
  .ac-button {
    height: 56px;
    font-size: var(--ac-font-size-t1-mobile);
  }
}

.btn.ac-button:hover,
.btn.ac-button:active {
  color: var(--ac-color-black);
  box-shadow: 0 0 2px 4px rgba(255, 179, 1, .25);
  text-decoration: none;
}

a.ac-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ac-submit {
  position: relative;
  overflow: hidden;
}

.ac-submit::before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  opacity: 0.4;
  top: -100px;
  left: -250px;
  height: 300px;
  width: 100px;
  transform: rotate(35deg);
}

@keyframes button-animation {
  0% {
    left: -250px;
  }

  25%,
  100% {
    left: 800px;
  }
}

.ac-submit.ac-on-screen::before {
  animation-name: button-animation;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

.ac-form-response {
  margin-bottom: var(--ac-spacing-m);
}

.ac-form-response.alert-danger {
  max-height: 100px;
  overflow: scroll;
  background-color: var(--ac-color-error-red);
  border-color: var(--ac-color-error-red-outline);
  color: var(--ac-color-white);
}

/* --- Footer --- */

#footer {
  position: absolute;
  bottom: 0;
  background-color: var(--ac-color-dark-grey);
  height: var(--ac-footer-height);
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--ac-color-orange);
}

body::after {
  content: '';
  display: block;
  margin-top: var(--ac-spacing-l);
  height: var(--ac-footer-height);
  padding-bottom: env(safe-area-inset-bottom);
}


.footer-content {
  text-align: center;
  padding: var(--ac-spacing-l) 0px;
}

.footer-spacer {
  display: inline-block;
  margin: 0px 20px;
}

#footer a {
  text-decoration: none;
  color: var(--ac-color-white);
}

#footer a:hover,
#footer a:focus,
#footer a:active {
  text-decoration: underline;
}

/* --- Video --- */

.ac-video-responsive {
  position: relative;
  padding-bottom: 60%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
}

.test-video .ac-video-responsive {
  padding-bottom: 100%;
}

/* iPhone Landscape */
@media (max-height: 500px) {
  .ac-video-responsive {
    padding-bottom: 40%;
  }
}

.ac-video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- Email Link --- */

a.mail-link {
  display: block;
  text-align: center;
}

/* --- Subpage --- */

#subpage p {
  margin-bottom: var(--ac-spacing-m);
}

#subpage .ac-bottom-spacing-l {
  margin-bottom: var(--ac-spacing-l);
}

#subpage .btn {
  margin-top: var(--ac-spacing-l);
}

#subpage .mail-link {
  margin: var(--ac-spacing-m) 0px;
}

/* --- Tutorial --- */

.tutorial-step {
  margin-top: var(--ac-spacing-l);
}

.tutorial-help-step {
  margin-top: var(--ac-spacing-xl);
}

.tutorial-img-box {
  display: flex;
  justify-content: space-between;
  margin: var(--ac-spacing-m) 0px;
}

.tutorial-img-single-box {
  margin: var(--ac-spacing-m) 0px;
}

.tutorial-img-bg {
  width: calc((100% - 20px) / 2);
  background-color: var(--ac-color-orange);
  padding: 2px;
  border-radius: 4px;
}

.tutorial-img-single-box .tutorial-img-bg {
  margin: 0px auto;
}

.tutorial-step img {
  border-radius: 2px;
  width: 100%;
}