@font-face {
    font-family: Chewy;
    src: url('assets/chewy.ttf') format('truetype');
    font-display: swap
}

@font-face {
    font-family: Patrick;
    src: url('assets/patrick-hand.ttf') format('truetype');
    font-display: swap
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #fffdf8;
    color: #071b4a;
    font-family: Patrick, 'Trebuchet MS', sans-serif
}

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

button,
a {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible {
    outline: 4px solid #7549da;
    outline-offset: 5px
}

.landing {
    max-width: 1440px;
    margin: auto;
    container-type: inline-size;
    overflow: hidden
}

.header {
    height: 7.74cqw;
    padding: 0 3.5cqw 0 4.7cqw;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 5
}

.brand {
    display: flex;
    flex-direction: column;
    text-align: center;
    white-space: nowrap
}

.brand>span {
    font-family: Chewy;
    font-size: 3.25cqw;
    line-height: 1.04;
    transform: rotate(-1deg)
}

.brand b {
    font-weight: 400;
    font-size: 1.18em
}

.brand small {
    font-size: 1.48cqw;
    line-height: 1.25
}

.brand-dots {
    font-size: .8em
}

.red {
    color: #f4090c
}

.orange {
    color: #ff9d00
}

.green {
    color: #008c3f
}

.purple {
    color: #9125ae
}

.header nav {
    display: flex;
    gap: 2.4cqw;
    font-size: 1.48cqw
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.15cqw;
    font-family: Chewy;
    color: white;
    white-space: nowrap;
    border-radius: 100px;
    transition: filter .15s, transform .15s
}

.button:hover {
    filter: brightness(1.06);
    transform: translateY(-2px)
}

.header-cta {
    background: linear-gradient(#0099fa, #0079f0);
    font-size: 1.88cqw;
    width: 23cqw;
    height: 4.75cqw;
    box-shadow: inset 2px 3px 0 #8bd6ff
}

.header-cta svg {
    width: 2.6cqw;
    height: 2.6cqw
}

.hero {
    height: 74.2cqw;
    position: relative;
    isolation: isolate;
    background: radial-gradient(ellipse at 81% 29%, #fbe1d4 0%, transparent 33%), linear-gradient(110deg, #fffcf4 10%, #fffefa 51%, #e7f8fb 78%, #fbebd8)
}

.hero-copy {
    position: relative;
    z-index: 3;
    width: 49.5cqw;
    padding-top: 5cqw
}

.hero h1 {
    font-family: Chewy;
    margin: 0 0 0 5cqw;
    width: 43.3cqw;
    text-align: center;
    font-size: 6.9cqw;
    font-weight: 400;
    line-height: .97;
    letter-spacing: -.13cqw;
    position: relative;
    z-index: 1
}

.hero h1>span {
    display: block;
    white-space: nowrap
}

mark {
    position: relative;
    background: none;
    color: inherit;
    display: inline-block;
    z-index: 0;
    padding: 0 .35cqw
}

mark:before {
    content: '';
    position: absolute;
    z-index: -1;
    background: #ffcf00;
    inset: -.8cqw -.5cqw -.2cqw;
    transform: rotate(-5deg);
    clip-path: polygon(4% 8%, 92% 0, 98% 5%, 95% 12%, 100% 18%, 96% 27%, 100% 34%, 97% 45%, 100% 53%, 96% 64%, 100% 73%, 95% 84%, 98% 93%, 3% 100%, 6% 93%, 0 84%, 5% 77%, 0 70%, 4% 60%, 1% 48%, 5% 38%, 0 27%, 6% 22%, 0 16%)
}

.subtitle {
    text-align: center;
    font-size: 2.9cqw;
    line-height: .98;
    font-weight: 700;
    margin: 1.6cqw 0 2.2cqw 6cqw;
    width: 39cqw;
    transform: rotate(-1deg)
}

.hero-benefits {
    list-style: none;
    margin: 0 0 0 5.6cqw;
    padding: 0;
    display: grid;
    gap: 1.3cqw
}

.hero-benefits li {
    display: flex;
    align-items: center;
    gap: 1.25cqw;
    font-size: 2.08cqw;
    font-weight: 700;
    line-height: 1.08;
    min-height: 5.65cqw
}

.round-icon {
    width: 5.6cqw;
    height: 5.6cqw;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: inset 2px 2px 0 #ffffff70;
    border: 1px solid #fff
}

.round-icon svg {
    height: 3.4cqw;
    width: 3.4cqw;
    stroke-width: 1.8
}

.pink {
    background: linear-gradient(130deg, #ff317b, #f00054);
    color: white
}

.yellow {
    background: #ffd21a
}

.emerald {
    background: linear-gradient(120deg, #12c25d, #009340);
    color: white
}

.download-block {
    margin: 2.8cqw 0 0 3.6cqw;
    width: 41.5cqw;
    text-align: center
}

.download-cta {
    width: 41.5cqw;
    height: 8.3cqw;
    font-size: 2.9cqw;
    background: linear-gradient(#ff2133, #fa0007 63%, #e9000b);
    border: .35cqw solid #e80c18;
    box-shadow: inset 2px 4px 0 #ff8b8c, inset -2px -3px 0 #db0010;
    gap: 1cqw
}

.download-cta svg:first-child {
    width: 4.2cqw;
    height: 4.2cqw;
    stroke-width: 2.8
}

.download-cta svg:last-child {
    width: 3cqw;
    height: 3cqw
}

.paper-size {
    font-size: 1.67cqw;
    margin: 1cqw -1cqw .2cqw
}

.instant {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    font-size: 1.75cqw;
    margin: .2cqw 0
}

.instant svg {
    width: 2.7cqw;
    height: 2.7cqw
}

.hero-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none
}

.child {
    position: absolute;
    top: 2.8cqw;
    right: -6cqw;
    width: 83cqw;
    height: auto
}

.desk {
    position: absolute;
    right: -6cqw;
    bottom: 0;
    width: 83cqw;
    clip-path: inset(82% 0 0)
}

.art-glow {
    position: absolute;
    right: -2cqw;
    top: 2cqw;
    width: 60cqw;
    height: 63cqw;
    background: radial-gradient(ellipse, #f4d8d2 0, transparent 70%)
}

.thought {
    position: absolute;
    left: 53cqw;
    top: 3cqw;
    background: #ffe996;
    border: 2px solid #fff3b4;
    border-radius: 43% 46% 43% 45%;
    width: 15cqw;
    height: 10cqw;
    text-align: center;
    padding-top: 1.1cqw;
    line-height: 1.02;
    font-size: 2.1cqw;
    font-weight: bold;
    transform: rotate(-4deg);
    box-shadow: 1cqw .2cqw 0 -.1cqw #ffe996, -.8cqw .4cqw 0 #ffe996, 0 -1cqw 0 -.25cqw #ffe996
}

.thought:before,
.thought:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #ffd238;
    border: 1px solid white;
    width: 2cqw;
    height: 1.9cqw;
    bottom: -3cqw;
    left: 4cqw
}

.thought:after {
    width: 1.3cqw;
    height: 1.2cqw;
    bottom: -4.2cqw;
    left: 6cqw
}

.sheet {
    position: absolute;
    width: 22.2cqw;
    top: 36.3cqw;
    background: white;
    padding: .7cqw;
    box-shadow: 0 .4cqw 1cqw #40342340;
    height: 32.1cqw;
    object-fit: fill
}

.nurse {
    left: 36.7cqw;
    transform: rotate(-10deg);
    z-index: 1
}

.potter {
    left: 55.5cqw;
    top: 35.9cqw;
    transform: rotate(.8deg);
    z-index: 3
}

.costume {
    left: 75.3cqw;
    top: 38.3cqw;
    transform: rotate(10deg);
    z-index: 2
}

.star {
    position: absolute;
    width: 5.2cqw;
    height: 5.2cqw;
    z-index: 4;
    filter: drop-shadow(0 1px 0 #ecae16)
}

.star-one {
    left: 51.3cqw;
    top: 18.2cqw
}

.star-two {
    left: 38.5cqw;
    top: 30.9cqw;
    transform: rotate(-10deg)
}

.star-three {
    left: 33.3cqw;
    top: 48.9cqw;
    transform: rotate(9deg)
}

.star-four {
    right: .8cqw;
    top: 33.1cqw;
    transform: rotate(9deg)
}

.rays {
    position: absolute;
    width: 4.8cqw;
    height: 6cqw
}

.headline-rays {
    left: 3.1cqw;
    top: 14.8cqw;
    transform: rotate(-12deg)
}

.cloud {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: #c5efff;
    opacity: .78;
    box-shadow: 3cqw 0 0 -.5cqw #c5efff, 6cqw -1.8cqw 0 -.1cqw #c5efff, 9cqw -3cqw 0 -.4cqw #c5efff;
    width: 7cqw;
    height: 7cqw
}

.cloud-a {
    left: -2cqw;
    top: -.5cqw
}

.cloud-b {
    left: -5cqw;
    top: 26cqw;
    transform: rotate(90deg)
}

.cloud-c {
    left: 47cqw;
    top: 5cqw;
    opacity: .3
}

.benefit-strip {
    height: 17.4cqw;
    position: relative;
    background: #fffcf5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 2.1cqw 1.5cqw 2cqw;
    z-index: 4
}

.benefit-strip:before {
    content: '';
    position: absolute;
    top: -1.2cqw;
    left: -3%;
    width: 106%;
    height: 2cqw;
    background: #fff9ec;
    border-radius: 50% 50% 0 0
}

.benefit-strip>div {
    position: relative;
    text-align: center
}

.benefit-strip>div+div:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.4cqw;
    height: 9cqw;
    width: 1px;
    background: #b6bfca
}

.benefit-icon {
    display: block;
    position: static;
    width: 5.5cqw;
    height: 5.5cqw;
    margin: 0 auto .3cqw;
    stroke-width: 1.8
}

.printer {
    color: #007ee4;
    fill: #70c7ff;
    filter: drop-shadow(1px 2px 0 #084586)
}

.brain {
    color: #145b31;
    fill: #67d88a
}

.people {
    color: #fb0757;
    fill: #ff7baa
}

.purple-star path {
    fill: #8752f4;
    stroke: #b7a3ff;
    stroke-width: 3
}

.benefit-strip p {
    font-size: 2cqw;
    line-height: 1.12;
    margin: .3cqw 0
}

.benefit-strip strong {
    font-weight: 700
}

.upsell {
    height: 47.8cqw;
    position: relative;
    background: radial-gradient(ellipse at 67% 44%, #fff 0, #effbff 30%, #c9f1ff 68%, #a9e5fb);
    isolation: isolate
}

.wave {
    position: absolute;
    top: -2cqw;
    width: 100%;
    height: 4cqw;
    z-index: -1
}

.book-mockup {
    position: absolute;
    left: 6.8cqw;
    top: 2.2cqw;
    width: 33.5cqw;
    transform: rotate(-8deg);
    filter: drop-shadow(-.7cqw 1cqw .7cqw #225b6a60);
    z-index: 99;
}

.book-mockup:before {
    content: '';
    position: absolute;
    left: -.7cqw;
    top: .5cqw;
    bottom: -.3cqw;
    width: 2cqw;
    background: linear-gradient(90deg, #123c62, #56768b, #173857);
    border-radius: .4cqw 0 0 .4cqw;
    z-index: -1
}

.book-mockup img {
    display: block;
    width: 100%
}

.upsell-copy {
    position: absolute;
    left: 45.2cqw;
    top: 3.4cqw;
    width: 50.3cqw;
    text-align: center;
    z-index: 2
}

.upsell h2 {
    font-family: Chewy;
    font-size: 5.65cqw;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    margin: 0;
    text-shadow: 2px 2px white, -2px -2px white;
    transform: rotate(-1deg)
}

.upsell h3 {
    font-family: Chewy;
    font-size: 4cqw;
    font-weight: 400;
    line-height: .97;
    margin: .4cqw -1cqw 1.6cqw;
    letter-spacing: -.08cqw
}

.upsell h3 .purple {
    font-size: 1.2em
}

.upsell-copy>p {
    font-size: 2.2cqw;
    line-height: 1.13;
    margin: 1.8cqw -1cqw 3.2cqw
}

.book-cta {
    height: 9.4cqw;
    width: 50.3cqw;
    background: linear-gradient(#0cb556, #00973e 55%, #00832e);
    font-size: 2.72cqw;
    border: .4cqw solid #04953e;
    box-shadow: inset 3px 4px #73d9a0, inset -2px -3px #008638;
    gap: 1.2cqw
}

.book-cta svg:first-child {
    width: 5.7cqw;
    height: 5.7cqw;
    stroke-width: 2.4
}

.book-cta svg:last-child {
    width: 3cqw;
    height: 3cqw
}

.book-star {
    right: -1.8cqw;
    bottom: 5.7cqw;
    width: 4cqw;
    height: 4cqw
}

.upsell-rays-left {
    left: -4cqw;
    top: 8cqw;
    width: 3.5cqw
}

.upsell-rays-right {
    right: -2cqw;
    top: 6cqw;
    transform: rotate(180deg)
}

.bottom-clouds {
    position: absolute;
    bottom: -9cqw;
    left: -7cqw;
    width: 26cqw;
    height: 26cqw;
    border-radius: 50%;
    background: #b7ebfc;
    box-shadow: 16cqw 7cqw #b7ebfc, 32cqw 5cqw #b7ebfc, 49cqw 13cqw #b7ebfc, 68cqw 12cqw #b7ebfc, 85cqw 10cqw #b7ebfc, 104cqw 4cqw #b7ebfc;
    z-index: 0;
    opacity: .8
}

@media(min-width:1440px) {
    body {
        background: #e6f6fc
    }
}

@media(max-width:650px) {
    .header {
        height: 80px;
        padding: 0 18px;
        gap: 12px
    }

    .brand>span {
        font-size: 23px
    }

    .brand small {
        font-size: 11px
    }

    .header nav {
        display: none
    }

    .header-cta {
        font-size: 15px;
        width: 160px;
        height: 43px;
        gap: 6px
    }

    .header-cta svg {
        width: 21px;
        height: 21px
    }

    .hero {
        height: auto;
        padding-bottom: 0
    }

    .hero-copy {
        width: 100%;
        padding-top: 30px
    }

    .hero h1 {
        font-size: clamp(42px, 10.8vw, 67px);
        width: 94%;
        margin: 0 auto;
        line-height: 1.02;
        letter-spacing: -1px
    }

    .subtitle {
        font-size: 25px;
        width: auto;
        margin: 22px 10px 25px
    }

    .hero-benefits {
        margin: 0 auto;
        max-width: 310px;
        gap: 14px
    }

    .hero-benefits li {
        font-size: 21px;
        gap: 14px;
        min-height: 52px
    }

    .round-icon {
        width: 52px;
        height: 52px;
        flex-shrink: 0
    }

    .round-icon svg {
        width: 31px;
        height: 31px
    }

    .download-block {
        width: calc(100% - 32px);
        max-width: 420px;
        margin: 26px auto 0
    }

    .download-cta {
        width: 100%;
        height: 74px;
        font-size: clamp(22px, 6vw, 29px);
        gap: 9px;
        border-width: 3px
    }

    .download-cta svg:first-child {
        width: 34px;
        height: 34px
    }

    .download-cta svg:last-child {
        width: 25px;
        height: 25px
    }

    .paper-size {
        font-size: 15px;
        margin: 10px -3px 4px
    }

    .instant {
        font-size: 17px;
        gap: 8px
    }

    .instant svg {
        width: 25px;
        height: 25px
    }

    .hero-art {
        position: relative;
        height: 105cqw;
        margin-top: 12px;
        overflow: hidden
    }

    .child {
        width: 114cqw;
        right: -15cqw;
        top: 0
    }

    .desk {
        width: 114cqw;
        right: -15cqw;
        bottom: 0
    }

    .thought {
        left: 9cqw;
        top: 6cqw;
        width: 24cqw;
        height: 18cqw;
        font-size: 3.8cqw;
        padding-top: 2.5cqw
    }

    .sheet {
        width: 32cqw;
        height: 43cqw;
        padding: 1cqw;
        top: 53cqw
    }

    .nurse {
        left: 7cqw
    }

    .potter {
        left: 35cqw;
        top: 52cqw
    }

    .costume {
        left: 63cqw;
        top: 56cqw
    }

    .star-one {
        left: 4cqw;
        top: auto;
        bottom: 45cqw;
        width: 9cqw;
        height: 9cqw
    }

    .star-two {
        left: auto;
        right: 4cqw;
        top: auto;
        bottom: 60cqw;
        width: 8cqw;
        height: 8cqw
    }

    .star-three,
    .star-four {
        display: none
    }

    .headline-rays {
        left: 1cqw;
        top: 18cqw
    }

    .benefit-strip {
        height: auto;
        grid-template-columns: 1fr 1fr;
        padding: 25px 12px 30px;
        gap: 26px 0
    }

    .benefit-icon {
        height: 48px;
        width: 48px;
        margin-bottom: 8px
    }

    .benefit-strip p {
        font-size: 19px
    }

    .benefit-strip>div+div:before {
        height: 90px;
        top: 5px
    }

    .benefit-strip>div:nth-child(3):before {
        display: none
    }

    .upsell {
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 28px 20px 65px;
        align-items: center
    }

    .book-mockup {
        position: relative;
        left: auto;
        top: auto;
        width: 58%;
        margin: 12px auto 35px;
        transform: rotate(-8deg)
    }

    .upsell-copy {
        position: relative;
        left: auto;
        top: auto;
        width: 100%
    }

    .upsell h2 {
        font-size: clamp(32px, 9vw, 48px);
        white-space: normal;
        line-height: 1.1
    }

    .upsell h3 {
        font-size: clamp(25px, 6.6vw, 36px);
        margin: 8px -5px 20px
    }

    .upsell-copy>p {
        font-size: 21px;
        line-height: 1.2;
        margin: 18px 0 25px
    }

    .desktop-break {
        display: none
    }

    .book-cta {
        width: 100%;
        height: 77px;
        font-size: clamp(19px, 5vw, 27px);
        gap: 10px;
        border-width: 3px
    }

    .book-cta svg:first-child {
        width: 39px;
        height: 39px
    }

    .book-cta svg:last-child {
        width: 25px;
        height: 25px
    }

    .book-star {
        width: 32px;
        height: 32px;
        bottom: 57px;
        right: -10px
    }

    .upsell-rays-left {
        left: -10px;
        top: 53px;
        width: 20px
    }

    .upsell-rays-right {
        right: -13px;
        top: 43px;
        width: 20px
    }

    .bottom-clouds {
        bottom: -15cqw
    }

    .wave {
        height: 25px;
        top: -12px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .button {
        transition: none
    }
}