/* desktop-first, mobile styles at bottom */

:root {
  --handwriting: 'Hand of Sean', serif;
  --sans: 'GT Eesti Display', Helvetica, Arial, sans-serif;
  --vmax: 850px;
  --vwidth: 100vw;
  --vcenter: calc(calc(min(var(--vmax), var(--vwidth))) / 2);
}

@font-face {
  font-family: 'GT Eesti Display';
  src: url('GT-Eesti-Display-Regular.woff2') format('woff2'),
       url('GT-Eesti-Display-Regular.woff') format('woff');
  font-weight: normal;
}

@font-face {
  font-family: 'GT Eesti Display';
  src: url('GT-Eesti-Display-Ultra-Bold.woff2') format('woff2'),
       url('GT-Eesti-Display-Ultra-Bold.woff') format('woff');
  font-weight: bold;
}

@font-face {
  font-family: 'Hand of Sean';
  src: url('../fonts/3303AB_0_0.woff2') format('woff2'),
       url('../fonts/3303AB_0_0.woff') format('woff');
}

html {
  width: 100vw;
}

body {
  color: black;
  background: white;

  font-family: var(--sans);
  font-variant-ligatures: discretionary-ligatures;
  font-size: max(min(2.3vw, 23px), 13px);
  line-height: 1.5;
  text-rendering: optimizeLegibility;

  width: 100vw;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

body div.content, body div.footer {
  width: var(--vwidth);
  max-width: var(--vmax);
  margin: 0 auto;
}

body div.content {
  margin-top: 7em;
}

.centered {
  text-align: center;
}

body div.content h1 {
  font-family: var(--handwriting);
  font-size: 260%;
  line-height: 0.9;
  padding: 0;
  margin: 0;
  position: relative;
  text-align: center;
  padding: 0 0.5em;
}

body.sub div.content h1 {
  font-family: var(--sans);
  font-weight: bold;
  font-size: 300%;
  line-height: 1;
  margin: 0.5em 0;
}
body.sub div.content h1.section {
  color: #5041bc;
}

body div.content h1 .jumpstart {
  font-family: var(--sans);
  font-weight: bold;
  font-size: calc(min(14.5vw, 140px));
  text-transform: uppercase;
}

body div.content h1 .product-empire {
  font-family: var(--sans);
  font-weight: bold;
  text-transform: uppercase;
  color: #f64eb8;
}

body div.content h1 .with {
  font-family: var(--sans);
  font-weight: bold;
  display: inline-block;
  font-size: 35%;
  transform: translateY(-0.6em) rotate(-60deg);
  text-transform: uppercase;
  margin: 0 -0.7em;
}

body div.content h2 {
  font-family: var(--sans);
  font-weight: bold;
  font-size: 200%;
  line-height: 1;
  margin: 0;
  text-align: center;
  padding: 0 0.5em;
}
body.sub div.content h2 {
  font-size: 150%;
  margin-top: 1em;
}

body div.content h3 {
  font-family: var(--sans);
  font-weight: bold;
  font-size: 150%;
  color: #5041bc;
  line-height: 1;
  margin: 2em 0 0 0;
  text-align: center;
  text-transform: lowercase;
}

body div.content h3.reveal-on-scroll {
  opacity: 0;
  transition: opacity 2s;
}

body div.content h3.reveal-on-scroll.reveal {
  opacity: 1;
}

body div.content h4 {
  font-family: var(--handwriting);
  font-weight: normal;
  font-size: 1.2em;
  line-height: 1;
  margin: 1em 0 0.4em 0;
  text-align: center;
  text-transform: lowercase;
}

body div.content p {
  padding: 0 10%;
  hyphens: auto;
}

body div.content .limit {
  padding: 0 10%;
  width: 80%;
}

body div.content .highlight {
  background: #f1faff;
  padding: 1.5em;
  text-align: center;
  margin: 0 -1em;
}

body div.content .highlight h2 {
  color: #57aedf;
  padding: 0.75em 0 0;
  font-size: 1.5em;
}

body div.content .signup {
  font-family: var(--handwriting);
  background: #ffc5ea;
  border-radius: 0.25em;
  padding: 1em;
  margin: 2em 0;
  text-align: center;
  position: relative;
}

body div.content .signup .badge {
  position: absolute;
  font-family: var(--sans);
  box-sizing: border-box;
  font-weight: bold;
  right: -1.75em;
  top: -1.75em;
  width: 3.75em;
  height: 3.75em;
  text-align: center;
  line-height: 1;
  padding: 0.9em 0;
  color: white;
  transition: transform 1s;
  transform: scale(0) rotate(999deg);
  background: url(badge.svg);
  background-size: 100% 100%;
}

body div.content .signup.reveal .badge {
  transform: scale(1) rotate(-10deg);
}

body div.content .signup h2 {
  font-family: var(--sans);
  font-weight: bold;
  color: #f64eb8;
  margin: 0;
  line-height: 1;
  font-size: 180%;
  white-space: nowrap;
}

body div.content .signup > .info {
  display: block;
  margin: 0 0 0.5em 0;
}

body div.content .signup input[type=email] {
  font-family: var(--sans);
  font-size: 100%;
  border-radius: 0;
  border: none;
  padding: 0.25em 1em;
  border-bottom: 0.1em solid #fa84cf;
}

body div.content .signup input[type=email]:focus {
  outline: 0.1em solid #fa84cf;
}

hr {
  border: none;
  height: 0.6em;
  background: center center no-repeat url(squiggle.svg);
  margin:2em 0;
}

hr.spacer {
  background: none;
}

hr.marker {
  background: none;
  border-bottom: 1px dashed red;
}

/* specialized elements */

.text-excerpt {
  position: relative;
  font-weight: bold;
  padding: 0.5em 0;
  filter: drop-shadow(0 0.25em 1em rgba(0,0,0,0.1));
}
.text-excerpt p {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.75s;
}
.text-excerpt.reveal p {
  opacity: 1;
}
.text-excerpt p:nth-child(1) { transform: rotate(1deg); transition-delay: 0; }
.text-excerpt p:nth-child(2) { transform: rotate(-1deg); text-align: right; transition-delay: 0.4s; }
.text-excerpt p:nth-child(3) { transform: rotate(-2deg); transition-delay: 0.8s; }
.text-excerpt p:nth-child(4) { transform: rotate(1deg); text-align: right; transition-delay: 1.2s }
.text-excerpt:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  clip-path: polygon(
    2% 2%, 7% 0%, 18% 4%, 32% 3%, 50% 7%,
    60% 6%, 68% 2%, 77% 0%, 88% 2%, 98% 0%,
    96% 25%, 99% 50%, 97% 75%, 96% 100%,
    87% 92%, 75% 98%, 66% 97%, 57% 93%,
    43% 99%, 38% 96%, 22% 97%, 10% 98%, 3% 99%,
    1% 75%, 4% 56%, 2% 27%);
}

#sharing_text {
  font-family: var(--sans);
  font-size: 100%;
  height: 4em;
  padding: 0.25em 1em;
  width: 100%;
  box-sizing: border-box;
}

p.centered .launchftw-button {
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 0.25em;
}

.signature {
  text-align: center;
  padding: 0.5em 0 0;
}
.signature > em {
  display: inline-block;
  color: transparent;
  background: no-repeat center center url(amyhoy.svg);
  padding: 0.4em 0;
  width: 6em;
  height: 2em;
}
.signature a {
  color: #000;
}

.amy {
  display: block;
  margin: 0 auto;
  width: 6em;
  height: 6em;
  border-radius: 50%;
}

.bullseye {
  list-style-type: none;
  padding: 0 10%;
}
.bullseye li {
  margin: 0.5em 0 0.5em 3em;
  text-indent: -2.5em;
}

.bullseye li:before {
  content: '';
  display: inline-block;
  position: relative;
  top: 0.15em;
  left: 1em;
  height: 1em;
  width: 1em;
  background: url(bullseye.svg);
  margin: 0 1.5em 0 0;
}

.stickers {
  height: 13em;
  list-style-type: none;
  position: relative;
}

.stickers li {
  display: block;
  position: absolute;
  font-size: 135%;
  top: 0;
  left: 0;
  padding: 0.5em 1em;
  background: linear-gradient(#ffc, #ffb);
  clip-path: polygon(0 0, 100% 0, 100% 0, 50% 100%, 0 100%);
  opacity: 0;
  transition: opacity 2s, clip-path 2s;
}

.stickers.reveal li {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%);
  opacity: 1;
}

.stickers li:before {
  content: ' ';
  position: absolute;
  top: 46%;
  left: 1em;
  right: 1em;
  height: 0.1em;
  background: #f00;
  transform: rotate(-2deg);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2s 2s;
}
.stickers.reveal li:before {
  clip-path: inset(0 0 0 0);
}

.stickers li:after {
  content: '';
  position: absolute;
  top:0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(45deg, #ff4, #ff8);
  clip-path: polygon(50% 0, 100% 0, 50% 100%, 50% 0);
  transition: all 2s;
}

.stickers.reveal li:after {
  clip-path: polygon(90% 70%, 100% 70%, 90% 100%, 90% 70%);
}

.stickers li:nth-child(odd) {
  font-family: var(--handwriting);
}

.stickers li:nth-child(1) { transform: translate(130%, 5%) rotate(-5deg); }
.stickers li:nth-child(2) { transform: translate(95%, 20%) rotate(5deg); }
.stickers li:nth-child(3) { transform: translate(165%, 125%) rotate(2deg); }
.stickers li:nth-child(4) { transform: translate(5%, 115%) rotate(-10deg); }
.stickers li:nth-child(5) { transform: translate(75%, 205%) rotate(10deg); }
.stickers li:nth-child(6) { transform: translate(90%, 270%) rotate(-10deg); }
.stickers li:nth-child(7) { transform: translate(260%, 260%) rotate(5deg); }
.stickers li:nth-child(8) { transform: translate(250%, 140%) rotate(-15deg); }

.stickers li:nth-child(1), .stickers li:nth-child(1):after { transition-delay: 0; }
.stickers li:nth-child(2), .stickers li:nth-child(2):after { transition-delay: 0.3s; }
.stickers li:nth-child(3), .stickers li:nth-child(3):after { transition-delay: 0.6s; }
.stickers li:nth-child(4), .stickers li:nth-child(4):after { transition-delay: 0.9s; }
.stickers li:nth-child(5), .stickers li:nth-child(5):after { transition-delay: 1.2s; }
.stickers li:nth-child(6), .stickers li:nth-child(6):after { transition-delay: 1.5s; }
.stickers li:nth-child(7), .stickers li:nth-child(7):after { transition-delay: 1.8s; }
.stickers li:nth-child(8), .stickers li:nth-child(8):after { transition-delay: 2.1s; }

.stickers li:nth-child(1):before { transition-delay: 2; }
.stickers li:nth-child(2):before { transition-delay: 2.3s; }
.stickers li:nth-child(3):before { transition-delay: 2.6s; }
.stickers li:nth-child(4):before { transition-delay: 2.9s; }
.stickers li:nth-child(5):before { transition-delay: 3.2s; }
.stickers li:nth-child(6):before { transition-delay: 3.5s; }
.stickers li:nth-child(7):before { transition-delay: 3.8s; }
.stickers li:nth-child(8):before { transition-delay: 4.1s; }

.arrow.down {
  position: relative;
  margin: 0 auto;
  width: 1em;
  height: 5em;
  overflow: hidden;
}

.arrow.down:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 1s;
  transform: translateY(-100%);
  background: center center no-repeat url(arrow_down.svg);
}

.arrow.down.reveal:after {
  transform: translateY(0);
}

.bricks {
  list-style-type: none;
  position: relative;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.125em 0.25em;
  justify-content: center;
  padding: 0;

  --bspd: 0.1s;
}

.bricks .break {
  flex-basis: 100%;
  height: 0;
  gap: 0;
}

.bricks li {
  display: flex;
  align-items: center;
  align-content: stretch;

  position: relative;
  box-sizing: border-box;
  font-size: 100%;

  margin: 0;
  padding: 0 0.5em;

  height: 2.1em;
  width: calc(25% - 0.5em);
  color: #000;
  text-align: center;
  background: #b7de83;
  border-radius: 0.2em;
  line-height: 0.8;

  transition: opacity ease-out 0.3s, transform ease-out 0.7s;
  transform: translateY(-15em);
  opacity: 0;
}
.bricks li > span {
  flex-basis: 100%;
}

.bricks li:nth-child(odd) {
  font-family: var(--handwriting);
}

.bricks li:nth-child(10) { transition-delay: calc(var(--bspd) * 0); }
.bricks li:nth-child(11) { transition-delay: calc(var(--bspd) * 1); }
.bricks li:nth-child(12) { transition-delay: calc(var(--bspd) * 2); }
.bricks li:nth-child(13) { transition-delay: calc(var(--bspd) * 3); }
.bricks li:nth-child(6)  { transition-delay: calc(var(--bspd) * 4); }
.bricks li:nth-child(7)  { transition-delay: calc(var(--bspd) * 5); }
.bricks li:nth-child(8)  { transition-delay: calc(var(--bspd) * 6); }
.bricks li:nth-child(3)  { transition-delay: calc(var(--bspd) * 7); }
.bricks li:nth-child(4)  { transition-delay: calc(var(--bspd) * 8); }
.bricks li:nth-child(1)  { transition-delay: calc(var(--bspd) * 9); }

.bricks.reveal li {
  opacity: 1;
  transform: translateY(0%);
}

.placeholder {
  width: 100%;
  height: 50vw;
  background: #bbb;
  margin: 1em auto;
}

.launchftw-button {
  font-family: var(--sans);
  font-weight: bold;
  box-sizing: border-box;
  border-radius: 0.5em;
  background: #f64eb8;

  padding: 0.35em 1.5em;
  box-shadow: -0.1em -0.2em 0.15em 0.05em #dd46a5 inset;
  cursor: pointer;
  text-align: center;
  border: none;

  font-size: 100%;
}
a.launchftw-button {
  text-decoration: none;
  color: #fff;
}

.launchftw-button > span {
  color: transparent;
  text-shadow:
    0 0 0 #fff,
    -0.025em -0.025em 0.015em rgba(0,0,0,0.25),
    0.025em 0.025em 0.015em rgba(255,255,255,0.5);
  background-clip: text;
}

.launchftw-button:hover {
  box-shadow: -0.1em -0.2em 0.15em 0.05em #dd46a5 inset,
    0 0 0 0.25em rgba(246, 78, 184, 0.35);
}

.launch-ftw {
  font-family: var(--sans);
  font-weight: bold;
  text-transform: lowercase;
}

#launchftw_execution {
  text-align: center;
  padding: 1em 4em 2em 4em;
}
#launchftw_execution .in_12_weeks {
  padding: 1em 0;
}
#launchftw_execution .ten_thousand {
  width: 25%;
}

.testimonial {
  padding: 0.5em 1em;
  display: flex;
  justify-content: center;
  gap: 1.5em;
  margin: 0 0 1em 0;
}

.testimonial > div {
  font-size: 0.75em;
  border-radius: 1em;
  padding: 1.5em;
  box-shadow: 0 0.25em 1em 0 rgba(0,0,0,0.1);
  background: #fff;
  position: relative;
  max-width: 75%;
}
.testimonial.large > div {
  font-size: 1em;
  box-shadow: none;
}

.testimonial > div:after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 1em;
  border: 1em solid #fff;
  transform: translateZ(1px);
}
.testimonial > div > img {
  float: left;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  margin: 0 1em 0 0;
}
.testimonial > div > strong {
  font-weight: normal;
  font-size: 0.8em;
}

.testimonial > div:nth-child(1) {
  transform: rotate(-3deg);
}
.testimonial.large > div:nth-child(1) {
  transform: rotate(0);
}
.testimonial > div:nth-child(2) {
  transform: rotate(2deg);
}

.your-first-dollar {
  width: 100%;
}

body div.footer {
  margin: 4em auto 4em;
  font-size: calc(max(14px,50%));
  text-align: center;
  color: #888;
}

/* tweaks for convertkit html structure */

.formkit-field {
  display: inline-block;
}

/* copied elements from main stylesheet as of 3/8/23 */

.header {
  height: 50px;
  background: rgba(233,47,159,0.6);
  border-bottom: 2px solid #3524b2;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translate3d(0,-15px,10px);
  z-index: 100;
}

.tagline {
  position: fixed;
  text-align: center;
  left: 0;
  top: 0.4em;
  right: 0;
  color: #fff;
  font-size: 0.6em;
  text-transform: lowercase;
  transform: translate3d(0,0,11px);
}

.brick {
  width: 54px;
  height: 14px;
  background: #ed52af;
  position: absolute;
  animation: brick both 0.4s;
  pointer-events: none;
}

.brick1 { bottom: 19px; left: 30px; animation-delay: 1.5s; }
.brick2 { bottom: 19px; left: -29px; animation-delay: 1.75s; }
.brick3 { bottom: 0; left: 0; animation-delay: 1s; }
.brick4 { bottom: 0; left: 59px; animation-delay: 1.25s; }
.brick5 { bottom: 19px; right: 30px; animation-delay: 1.5s; }
.brick6 { bottom: 19px; right: -29px; animation-delay: 1.75s; }
.brick7 { bottom: 0; right: 0; animation-delay: 1s; }
.brick8 { bottom: 0; right: 59px; animation-delay: 1.25s; }

.logo {
  position: absolute;
  z-index: 101;
  left: 50%;
  margin: -3em 0 0 -5em;
  transform: scale(1.5) translate3d(0,0,0) rotate(-7deg) ;
}

.logo img {
  display: block;
  margin: 0 auto;
  width: 10em;
  transform: translate3d(0, -1em, 1em) rotate(0deg) scale(0.42);
}

#launchftw_goal {
  margin-top: 3em;
  text-align: center;
  height: 44em;
  position: relative;
}
#launchftw_goal .tiers {
  position: absolute;
  left: 60%;
  top: 5em;
  margin-left: -10.75em;
  width: 21.5em;
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 1s;
}
#launchftw_goal .tiers.reveal {
  opacity: 1;
}
#launchftw_goal .goal-1 {
  position: relative;
  width: 30%;
  z-index: 1;
  transform: scale(0);
  opacity: 0;
  transition: transform 1s, opacity 1s;
}
#launchftw_goal .goal-1.reveal {
  transform: scale(1);
  opacity: 1;
}
#launchftw_goal p {
  margin: 0 10%;
  font-size: 80%;
}
#launchftw_goal .price  {
  display: inline-block;
  position: absolute;
  top: 19em;
  left: 7em;
  width: auto;
}
#launchftw_goal .sales {
  display: inline-block;
  position: absolute;
  top: 28em;
  right: 64%;
  width: auto;
}
#launchftw_goal h5 {
  font-family: var(--handwriting);
  font-weight: normal;
  color: #f64eb8;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  font-size: 100%;
  white-space: nowrap;
}
#launchftw_goal .info {
  font-size: 80%;
  text-transform: uppercase;
}
#launchftw_goal .note {
  font-size: 80%;
  font-family: var(--handwriting);
  color: #888;
}
#launchftw_goal .subscribers {
  position: absolute;
  bottom: -1em;
  left: 0;
  right: 6em;
}

#launchftw_excerpt {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin: 2em 0 4em;
}
#launchftw_excerpt > div {
  padding: 0 0.75em;
  border-radius: 0.5em;
  width: 15%;
  min-height: 8em;
  margin-top: 1em;
  opacity: 0;
  transform: scale(0.8);
  transition-property: opacity, transform;
  transition-duration: 1s;
}
#launchftw_excerpt .reveal {
  transform: scale(1);
  opacity: 1;
}
#launchftw_excerpt > div > img {
  position: relative;
  top: -10%;
  width: 100%;
}
#launchftw_excerpt_a {
  transition-delay: 0.2s;
  background: #f1ffe6;
  transform: translateX(-0em) rotate(-3deg) scale(0.8);
}
#launchftw_excerpt_a.reveal {
  transform: translateX(-1em) rotate(-3deg) scale(1);
}
#launchftw_excerpt_b {
  transition-delay: 0.4s;
  background: #e7f6ff;
  transform: translateX(-0em) rotate(2deg) scale(0.8);
}
#launchftw_excerpt_b.reveal {
  transform: translateX(-0.5em) rotate(2deg) scale(1);
}
#launchftw_excerpt_c {
  transition-delay: 0.6s;
  background: #f3f2ff;
  transform: translateX(0em) rotate(-1deg) scale(0.8);
}
#launchftw_excerpt_c.reveal {
  transform: translateX(0.5em) rotate(-1deg) scale(1);
}
#launchftw_excerpt_d {
  transition-delay: 0.8s;
  background: #ebfefc;
  transform: translateX(0em) rotate(4deg) scale(0.8);
}
#launchftw_excerpt_d.reveal {
  transform: translateX(1em) rotate(4deg) scale(1);
}

/* special animations */

.animation {
  display: block;
  margin: 0 auto;
  width: 90%;
}
#launchftw_breakdown {
  --adur: 8s;
  --sstart: 1em;
  --sspc: 5em;
  position: relative;
}
#launchftw_breakdown_pick {
  transform: scale(0.85) translate(4.5em, -0.9em);
}
#launchftw_breakdown .step {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
#launchftw_breakdown_a {
  transform: scale(0.85) translate(-40em,
    calc(var(--sstart) + calc(var(--sspc) * 0)));
}
#launchftw_breakdown.reveal #launchftw_breakdown_a {
  transition-delay: calc(var(--adur) * 0.05);
  transform: scale(0.85) translate(5%,
    calc(var(--sstart) + calc(var(--sspc) * 0)));;
}
#launchftw_breakdown_b {
  transform: scale(0.85) translate(100em,
    calc(var(--sstart) + calc(var(--sspc) * 1)));
}
#launchftw_breakdown.reveal #launchftw_breakdown_b {
  transition-delay: calc(var(--adur) * 0.3);
  transform: scale(0.85) translate(15%,
    calc(var(--sstart) + calc(var(--sspc) * 1)));
}
#launchftw_breakdown_c {
  transform: scale(0.85) translate(-40em,
    calc(var(--sstart) + calc(var(--sspc) * 2)));
}
#launchftw_breakdown.reveal #launchftw_breakdown_c {
  transition-delay: calc(var(--adur) * 0.55);
  transform: scale(0.85) translate(25%,
    calc(var(--sstart) + calc(var(--sspc) * 2)));
}
#launchftw_breakdown_d {
  transform: scale(0.85) translate(100em,
    calc(var(--sstart) + calc(var(--sspc) * 3)));
}
#launchftw_breakdown.reveal #launchftw_breakdown_d {
  transition-delay: calc(var(--adur) * 0.8);
  transform: scale(0.85) translate(15%,
    calc(var(--sstart) + calc(var(--sspc) * 3)));
}
#launchftw_breakdown_result {
  transform: scale(0.85) translate(-3em, 24.15em);
  opacity: 0;
}
#launchftw_breakdown.reveal #launchftw_breakdown_result {
  transition-delay: calc(var(--adur) * 1);
  opacity: 1;
}

#launchftw_breakdown .overdraw {
  stroke-dasharray: 1050, 1150;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--adur);
  transition-timing-function: linear;
}
#launchftw_breakdown .arrowhead {
  offset-path: path("M6.5,596.9c0.3-22.7,14.7-66.6,107.4-108.3c132.8-59.7,325.2,25.1,363.8-86.7s-144.9-194.3-227.6-308c-35.4-48.7-52.2-72.8-60-84.4");
  offset-distance: 100%;
  offset-rotate: auto 90deg;
  transition: offset-distance var(--adur);
  transition-timing-function: linear;
}
#launchftw_breakdown.reveal .arrowhead {
  offset-distance: 0%;
}
#launchftw_breakdown.reveal .overdraw {
  stroke-dashoffset: 1060;
}

/* turn off animation sfor reduced motion requests */
@media (prefers-reduced-motion) {
  *, *:after { transition: none !important; }
}

/* mobile layout overrides; the basic structure of the CSS is responsive already */

@media (max-width: 750px) {
  body div.content {
    font-size: 150%;
    margin-top: 7em;
  }
  body div.content > h1 {
    font-size: 175%;
  }
  body div.content > h2,
  body div.content > h3,
  body div.content > h4 {
    margin-left: 2.5vw;
    margin-right: 2.5vw;
  }
  body div.content .signup {
    box-sizing: border-box;
    font-size: 125%;
    border-radius: 0;
    width: 100vw;
    overflow: hidden;
  }
  body div.content .signup .badge {
    display: none;
  }
  body div.content .signup h2 {
    font-size: 110%;
    white-space: normal;
  }
  body div.content .signup .info {
    font-size: 125%;
    line-height: 1;
    margin-top: 0.5em;
  }
  body div.content .signup input[type=email] {
    width: 100%;
    box-sizing: border-box;
  }
  body div.content .signup .launchftw-button {
    margin-top: 0.5em;
  }
  body div.content .highlight {
    box-sizing: border-box;
    width: 100vw;
    overflow: hidden;
    margin: 0;
  }
  body div.content .highlight p {
    padding: 0;
  }
  #launchftw_goal {
    width: 100vw;
    overflow: hidden;
  }
  #launchftw_goal > p {
    font-size: 75%;
    padding: 0;
  }
  #launchftw_goal .tiers {
    top: 2.5em;
  }
  #launchftw_goal .price {
    top: 18em;
    left: 5em;
  }
  #launchftw_goal .sales {
    top: 25.3em;
    right: auto;
    left: 4em;
  }
  #launchftw_goal .subscribers {
    bottom: 0;
  }
  #launchftw_excerpt {
    flex-wrap: wrap-reverse;
  }
  #launchftw_excerpt > div {
    width: 33%;
  }
  .stickers {
    font-size: 65%;
    box-sizing: border-box;
    margin: 0 2em;
    padding: 0;
    overflow: hidden;
    transform: translateX(0.6em);
  }
  .bricks {
    font-size: 85%;
  }
  .logo {
    margin: -5em 0 0 -7.5em;
  }
  .logo img {
    width: 15em;
  }
  .tagline { display: none; }
  body div.footer {
    width: auto;
    max-width: auto;
    margin-left: 2.5vw;
    margin-right: 2.5vw;
  }
  div.testimonial.large > div {
    max-width: 90%;
    padding: 0;
    border: none;
    font-size: 0.9em;
  }
  div.testimonial.large > div:after {
    display: none;
  }
  body.sub div.content h1 {
    font-size: 240%;
  }
}

.cheatsheet-preview {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 60px auto 100px;
  perspective: 1000px;
}

.sheet {
  position: absolute;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  transition: all 0.5s ease;
  transform-origin: center center;
  cursor: pointer;
}

/* Add hover state to the container instead */
.cheatsheet-preview:hover .sheet {
  transform: translateY(0) rotate(0deg);
  transition: all 0.4s ease-out;
}

.cheatsheet-preview:hover .sheet-1 {
  transform: translateX(-85%) translateY(-10px);
}

.cheatsheet-preview:hover .sheet-2 {
  transform: translateX(-50%) translateY(-5px);
}

.cheatsheet-preview:hover .sheet-3 {
  transform: translateX(-15%) translateY(0);
}

.sheet-1 {
  left: 50%;
  top: 0;
  transform: translateX(-50%) rotate(-5deg);
  z-index: 3;
}

.sheet-2 {
  left: 50%;
  top: 20px;
  transform: translateX(-50%) rotate(3deg);
  z-index: 2;
}

.sheet-3 {
  left: 50%;
  top: 40px;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cheatsheet-preview {
    height: 300px;
  }
  
  .sheet {
    width: 90%;
  }
}