@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Kalam:wght@300;400;700&display=swap");

/*
* Coming Soon page.
* The watercolor art, plants, portrait, mug and notebook live in the supplied
* background files. This stylesheet positions only the editable foreground UI.
*/

:root {
--coming-paper: #FDEFD4;
--coming-ink: #02253d;
--coming-black: #151515;
--coming-pink: #dd5571;
--coming-soft-pink: #f7aaa6;
--coming-note: #ffd7cf;
--coming-yellow: #f7d58a;
--coming-blue-note: #d8e8ef;
--coming-shadow: rgb(2 37 61 / 15%);
--coming-font-heading: var(--coming-font-copy);
--coming-font-copy: "Caveat", cursive;
}

.coming-soon-document,
.coming-soon-body {
width: 100%;
min-width: 20rem;
height: 100%;
overflow: hidden;
}

.coming-soon-body {
margin: 0;
color: var(--coming-ink);
background: var(--coming-paper);
font-family: var(--coming-font-copy);
}

.coming-soon-page {
position: relative;
isolation: isolate;
width: 100%;
height: 100vh;
height: 100svh;
min-height: 34rem;
overflow: hidden;
background-color: var(--coming-paper);
background-image: none;
}

.coming-art {
position: absolute;
z-index: 1;
max-width: none;
pointer-events: none;
user-select: none;
}

.coming-art img {
display: block;
width: 100%;
height: auto;
max-width: none;
object-fit: contain;
}

.coming-art--left {
left: 0;
bottom: -1.4rem;
width: clamp(14rem, 19.5vw, 23.5rem);
max-height: 100svh;
}

.coming-art--right-side {
right: 0;
bottom: 0;
width: clamp(28.5rem, 40vw, 45rem);
max-height: 96svh;
}

.coming-art--right-top {
top: 0;
right: 0;
width: clamp(22rem, 31vw, 36rem);
max-height: 42svh;
}

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.coming-logo {
position: absolute;
z-index: 5;
top: clamp(1rem, 2.45vw, 2rem);
left: clamp(1.4rem, 3.1vw, 3.45rem);
display: block;
width: clamp(8.8rem, 11.8vw, 12.9rem);
text-decoration: none;
}

.coming-logo img {
display: block;
width: 100%;
height: auto;
}

.pink-note {
position: absolute;
z-index: 4;
top: clamp(3.35rem, 5.8vw, 5rem);
right: clamp(14.5rem, 22.5vw, 29rem);
width: clamp(8.4rem, 13vw, 13.3rem);
min-height: clamp(7.2rem, 10.6vw, 10.8rem);
padding: clamp(1.35rem, 2.1vw, 2rem) 0.85rem 0.9rem;
color: var(--coming-black);
font-family: var(--coming-font-copy);
font-weight: 400;
font-size: clamp(0.92rem, 1.22vw, 1.34rem);
line-height: 1.28;
text-align: center;
transform: rotate(-6.5deg);
border-radius: 0.08rem;
isolation: isolate;
}

.pink-note::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background:
radial-gradient(circle at 23% 18%, rgb(255 255 255 / 40%), transparent 34%),
radial-gradient(circle at 78% 78%, rgb(211 91 104 / 12%), transparent 40%),
var(--coming-note);
box-shadow:
0.35rem 0.42rem 0.18rem rgb(2 37 61 / 10%),
0.7rem 0.9rem 0.65rem rgb(2 37 61 / 16%);
clip-path: polygon(1% 8%, 10% 3%, 21% 5%, 34% 2%, 47% 4%, 60% 1%, 72% 5%, 86% 2%, 99% 6%, 97% 18%, 100% 31%, 97% 45%, 99% 58%, 97% 72%, 100% 87%, 96% 97%, 82% 95%, 69% 99%, 55% 96%, 40% 100%, 27% 96%, 12% 99%, 2% 94%, 4% 80%, 1% 67%, 3% 51%, 1% 36%, 3% 22%);
}

.pink-note__tape {
position: absolute;
z-index: 3;
top: -0.78rem;
left: 28%;
width: 42%;
height: 1.7rem;
background:
linear-gradient(105deg, rgb(255 255 255 / 22%), transparent 34%, rgb(255 255 255 / 16%) 62%, transparent),
rgb(198 137 73 / 56%);
box-shadow: 0 0.08rem 0.16rem rgb(2 37 61 / 9%);
clip-path: polygon(2% 12%, 19% 3%, 38% 9%, 59% 1%, 79% 8%, 100% 4%, 96% 89%, 78% 96%, 59% 91%, 39% 100%, 18% 94%, 0 99%);
transform: rotate(-4deg);
}

.note-heart {
position: absolute;
right: 0.8rem;
bottom: 2rem;
width: 1.6rem;
height: 1.45rem;
fill: #f7a3ae;
stroke: var(--coming-black);
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.note-underline {
position: absolute;
right: 1.7rem;
bottom: 1.32rem;
left: 2.1rem;
height: 0.18rem;
background: var(--coming-pink);
border-radius: 999px;
transform: rotate(-2deg);
}

.clarity-note {
position: absolute;
z-index: 4;
top: clamp(13.5rem, 27vh, 18rem);
left: clamp(3.2rem, 5.8vw, 6.8rem);
width: clamp(10.45rem, 14.45vw, 15.5rem);
min-height: clamp(10.55rem, 14.65vw, 15.5rem);
display: grid;
place-items: center;
padding: 1.65rem 1.2rem 1.35rem;
color: var(--coming-black);
background:
radial-gradient(ellipse at 28% 20%, rgb(255 255 255 / 30%), transparent 40%),
radial-gradient(ellipse at 45% 52%, rgb(196 221 235 / 86%), transparent 70%),
radial-gradient(ellipse at 65% 76%, rgb(177 207 224 / 64%), transparent 58%);
filter: saturate(0.92);
font-family: var(--coming-font-copy);
font-weight: 600;
font-size: clamp(1rem, 1.38vw, 1.52rem);
line-height: 1.32;
text-align: center;
transform: rotate(-7deg);
border-radius: 0;
box-shadow: none;
clip-path: polygon(6% 14%, 17% 7%, 29% 10%, 42% 3%, 56% 7%, 69% 2%, 84% 8%, 96% 14%, 93% 30%, 100% 45%, 94% 60%, 99% 77%, 88% 91%, 72% 94%, 58% 100%, 42% 95%, 27% 99%, 12% 89%, 5% 76%, 0 61%, 5% 45%, 1% 30%);
}

.clarity-note p {
margin: 0;
transform: translateY(0.35rem);
}

.clarity-note span {
display: block;
width: 3.7rem;
height: 0.16rem;
margin-top: -1.2rem;
background: var(--coming-ink);
border-radius: 999px;
transform: rotate(-4deg);
}

.clarity-note svg {
width: 1.75rem;
height: 1.6rem;
margin-top: -1.35rem;
fill: rgb(196 221 235 / 86%);
stroke: var(--coming-ink);
stroke-width: 2.9;
stroke-linecap: round;
stroke-linejoin: round;
}

.hero-copy {
position: absolute;
z-index: 5;
top: 5.4vh;
left: 21vw;
width: min(42vw, 53rem);
min-width: 33rem;
text-align: center;
}

.yellow-heart {
position: absolute;
top: -1.25rem;
left: 47%;
width: clamp(2rem, 2.9vw, 3.25rem);
transform: rotate(8deg);
}

.yellow-heart svg {
display: block;
width: 100%;
height: auto;
fill: #f6c947;
stroke: var(--coming-black);
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
}

.coming-title {
margin: 0;
font-family: var(--coming-font-heading);
font-weight: 500;
line-height: 0.72;
letter-spacing: 0;
text-align: center;
}

.coming-title__line {
position: relative;
display: block;
white-space: nowrap;
text-shadow: 0.035em 0.03em 0 rgb(2 37 61 / 5%);
}

.coming-title__line--navy {
color: var(--coming-ink);
font-size: clamp(6.05rem, 9.6vw, 12.5rem);
line-height: 0.9;
transform: rotate(-1.3deg);
}

.coming-title__line--pink {
color: var(--coming-pink);
margin-top: clamp(-0.45rem, -0.2vw, -0.1rem);
font-size: clamp(5.3rem, 7.9vw, 10.2rem);
line-height: 0.9;
transform: translateX(10%) rotate(0.6deg);
}

.coming-title__line--pink::after {
content: "";
position: absolute;
right: 19%;
bottom: -0.12em;
width: 52%;
height: 0.055em;
background: currentColor;
border-radius: 999px;
transform: rotate(-2deg);
}

.hero-tagline {
position: relative;
z-index: 2;
margin: clamp(1.25rem, 2.4vw, 2.2rem) auto 0;
color: var(--coming-black);
font-family: var(--coming-font-copy);
font-weight: 500;
font-size: clamp(2.05rem, 3.05vw, 3.55rem);
line-height: 1;
}

.hero-tagline span {
position: relative;
display: inline-block;
padding: 0.18em 1.15em 0.22em;
}

.hero-tagline span::before {
content: "";
position: absolute;
z-index: -1;
inset: 0.16em -0.35em 0.05em;
background:
linear-gradient(93deg, transparent, rgb(247 213 138 / 95%) 7% 94%, transparent),
repeating-linear-gradient(5deg, rgb(255 255 255 / 20%) 0 0.18rem, transparent 0.2rem 0.48rem);
border-radius: 0.3rem;
clip-path: polygon(0 26%, 9% 14%, 22% 19%, 37% 8%, 54% 15%, 71% 6%, 91% 16%, 100% 24%, 98% 82%, 85% 89%, 66% 84%, 49% 93%, 30% 87%, 10% 94%, 1% 80%);
transform: rotate(-1.7deg);
}

.hero-tagline-heart {
display: inline-block;
width: clamp(1.6rem, 2.25vw, 2.45rem);
height: auto;
margin-left: -1.45rem;
vertical-align: 0.08em;
fill: #f57f98;
stroke: var(--coming-black);
stroke-width: 2.8;
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(7deg);
}

.hero-description {
margin: clamp(1rem, 1.9vw, 1.75rem) 0 0;
color: var(--coming-black);
font-family: var(--coming-font-copy);
font-weight: 600;
font-size: clamp(1.32rem, 1.85vw, 2.12rem);
line-height: 1.12;
letter-spacing: 0.035em;
}

.hero-description::after {
content: "";
display: block;
width: 5.9rem;
height: 0.18rem;
margin: 0.1rem auto 0;
background: var(--coming-ink);
border-radius: 999px;
transform: rotate(-4deg);
}

.signup-panel {
position: absolute;
z-index: 5;
left: 21vw;
bottom: clamp(1.45rem, 3.1vh, 2.7rem);
width: min(42rem, 36vw);
color: var(--coming-black);
font-family: var(--coming-font-copy);
}

.signup-heading {
display: flex;
align-items: center;
gap: 0.78rem;
margin: 0 0 0.42rem;
}

.signup-heading svg {
width: clamp(2.8rem, 4.1vw, 4.6rem);
height: auto;
fill: none;
stroke: var(--coming-black);
stroke-width: 2.4;
stroke-linejoin: round;
}

.signup-heading .mail-heart {
fill: var(--coming-paper);
stroke: var(--coming-pink);
stroke-width: 2.7;
transform: translateY(0.18rem);
}

.signup-heading h2 {
position: relative;
margin: 0;
font-family: var(--coming-font-copy);
font-size: clamp(1rem, 1.55vw, 1.72rem);
font-weight: 400;
line-height: 1;
}

.signup-heading h2::after {
content: "";
position: absolute;
right: 0.2rem;
bottom: -0.35rem;
left: 0;
height: 0.12rem;
background: var(--coming-ink);
border-radius: 999px;
transform: rotate(-2deg);
}

.signup-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(0.65rem, 1.35vw, 1.2rem);
}

.signup-form input {
width: 100%;
height: clamp(3.05rem, 4.5vw, 4.35rem);
padding: 0.25rem clamp(1.15rem, 1.7vw, 1.7rem);
color: var(--coming-black);
background: rgb(255 253 248 / 42%);
border: 0.13rem solid var(--coming-black);
border-radius: 0.08rem;
box-shadow: inset 0 0 0 0.04rem rgb(2 37 61 / 16%);
font: 600 clamp(0.98rem, 1.45vw, 1.58rem) / 1 var(--coming-font-copy);
outline: none;
transform: rotate(-1deg);
}

.signup-form input::placeholder {
color: rgb(86 93 99 / 62%);
}

.signup-form input:focus-visible {
border-color: var(--coming-pink);
box-shadow: 0 0 0 0.18rem rgb(221 85 113 / 18%);
}

.signup-button {
position: relative;
display: inline-flex;
min-width: clamp(5.8rem, 8.2vw, 8.4rem);
height: clamp(3.12rem, 4.4vw, 4.35rem);
align-items: center;
justify-content: center;
padding: 0.15rem 0.8rem;
color: var(--coming-black);
background: var(--coming-soft-pink);
border: 0.16rem solid var(--coming-black);
border-radius: 0.24rem;
box-shadow:
inset 0 0 0 0.14rem rgb(221 85 113 / 55%),
0.2rem 0.25rem 0 rgb(2 37 61 / 12%);
cursor: pointer;
font: 700 clamp(0.98rem, 1.42vw, 1.62rem) / 1 var(--coming-font-copy);
transform: rotate(-1.8deg);
transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.signup-button::before,
.signup-button::after {
content: "";
position: absolute;
width: 0.28rem;
height: 0.28rem;
border-radius: 50%;
background: var(--coming-black);
}

.signup-button::before {
left: 0.45rem;
bottom: 0.4rem;
}

.signup-button::after {
right: 0.45rem;
top: 0.42rem;
}

.signup-button:hover,
.signup-button:focus-visible {
background: #fb99a6;
transform: translateY(-0.08rem) rotate(-1.8deg);
}

.signup-button:active {
box-shadow:
inset 0 0 0 0.14rem rgb(221 85 113 / 55%),
0.08rem 0.1rem 0 rgb(2 37 61 / 12%);
transform: translateY(0.08rem) rotate(-1.8deg);
}

.signup-footnote {
margin: clamp(0.65rem, 1.2vw, 1rem) 0 0 3.15rem;
color: var(--coming-black);
font-family: var(--coming-font-copy);
font-weight: 600;
font-size: clamp(0.98rem, 1.28vw, 1.42rem);
line-height: 1.2;
}

.signup-footnote span {
color: var(--coming-pink);
}

.js-enabled .coming-art,
.js-enabled .coming-logo,
.js-enabled .pink-note,
.js-enabled .clarity-note,
.js-enabled .hero-copy,
.js-enabled .signup-panel {
opacity: 0;
will-change: opacity, translate, filter;
}

.js-enabled .coming-art {
filter: blur(0.08rem);
}

.js-enabled .coming-art--left {
translate: -5.5rem 0;
}

.js-enabled .coming-art--right-side,
.js-enabled .coming-art--right-top {
translate: 5.5rem 0;
}

.js-enabled .coming-logo,
.js-enabled .pink-note,
.js-enabled .clarity-note,
.js-enabled .hero-copy,
.js-enabled .signup-panel {
translate: 0 1.35rem;
filter: blur(0.08rem);
}

.js-enabled.page-ready .coming-art {
animation: sideArtIn 1250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js-enabled.page-ready .coming-logo,
.js-enabled.page-ready .pink-note,
.js-enabled.page-ready .clarity-note,
.js-enabled.page-ready .hero-copy,
.js-enabled.page-ready .signup-panel {
animation: contentRiseIn 1050ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.js-enabled.page-ready .coming-art--left {
animation-delay: 120ms;
}

.js-enabled.page-ready .coming-art--right-top {
animation-delay: 260ms;
}

.js-enabled.page-ready .coming-art--right-side {
animation-delay: 380ms;
}

.js-enabled.page-ready .coming-logo {
animation-delay: 560ms;
}

.js-enabled.page-ready .pink-note {
animation-delay: 760ms;
}

.js-enabled.page-ready .hero-copy {
animation-delay: 1180ms;
}

.js-enabled.page-ready .clarity-note {
animation-delay: 980ms;
}

.js-enabled.page-ready .signup-panel {
animation-delay: 1480ms;
}

@keyframes sideArtIn {
from {
opacity: 0;
filter: blur(0.08rem);
}

to {
opacity: 1;
translate: 0 0;
filter: blur(0);
}
}

@keyframes contentRiseIn {
from {
opacity: 0;
translate: 0 1.35rem;
filter: blur(0.08rem);
}

to {
opacity: 1;
translate: 0 0;
filter: blur(0);
}
}

@media (max-width: 90rem) {
.hero-copy {
top: 6.8vh;
left: 20vw;
width: 43vw;
min-width: 30rem;
}

.coming-title__line--navy {
font-size: clamp(5.85rem, 9.35vw, 9.55rem);
}

.coming-title__line--pink {
font-size: clamp(5rem, 7.65vw, 7.9rem);
}

.signup-panel {
left: 21vw;
width: 39vw;
}
}

@media (max-width: 64rem) {
.coming-art--left {
/* left: -1.25rem; */
bottom: -1.75rem;
width: clamp(12rem, 26vw, 18rem);
max-height: none;
}

.coming-art--right-side {
right: -3.2rem;
bottom: 6.2rem;
width: min(54vw, 34rem);
max-height: none;
}

.coming-art--right-top {
top: 0;
right: 0;
width: min(55vw, 31rem);
max-height: none;
}

.coming-logo {
top: 1.1rem;
left: 1.2rem;
width: clamp(7.6rem, 15vw, 10.5rem);
}

.pink-note {
top: clamp(4rem, 6vh, 5.2rem);
right: clamp(8rem, 21vw, 13.5rem);
}

.clarity-note {
left: clamp(1.8rem, 4vw, 3rem);
top: 40vh;
}

.hero-copy {
top: 12vh;
left: 50%;
width: min(76vw, 38rem);
min-width: 0;
transform: translateX(-50%);
}

.signup-panel {
left: 50%;
bottom: 1.5rem;
width: min(70vw, 32rem);
transform: translateX(-50%);
}
}

@media (min-width: 48rem) and (max-width: 64rem) and (orientation: portrait) {
.coming-art--right-side {
right: -4rem;
bottom: 7.5rem;
width: min(58vw, 34rem);
max-height: none;
}

.coming-art--right-top {
right: 0;
width: min(80vw, 40rem);
max-height: none;
}

.pink-note {
top: clamp(2.55rem, 4.1vh, 3.55rem);
right: auto;
left: 50%;
width: clamp(12.1rem, 27vw, 16rem);
min-height: clamp(10rem, 22.5vw, 13rem);
padding: clamp(1.7rem, 3vw, 2.35rem) 1.18rem 1.08rem;
font-size: clamp(1.2rem, 2.45vw, 1.66rem);
transform: translateX(-50%) rotate(-6deg);
}

.hero-copy {
top: calc(17vh + 3.6rem);
width: min(86vw, 47rem);
}

.coming-title__line--navy {
font-size: clamp(7.55rem, 14.4vw, 9.45rem);
}

.coming-title__line--pink {
font-size: clamp(6.55rem, 12.4vw, 8.15rem);
}

.hero-tagline {
font-size: clamp(2.55rem, 4.7vw, 3.65rem);
}

.hero-description {
font-size: clamp(1.72rem, 2.95vw, 2.3rem);
}

.clarity-note {
top: calc(56vh + 2.35rem);
left: clamp(3.55rem, 6.8vw, 4.75rem);
width: clamp(12.8rem, 22.5vw, 17.2rem);
min-height: clamp(12.9rem, 22.5vw, 17.2rem);
font-size: clamp(1.34rem, 2.38vw, 1.78rem);
}

.signup-panel {
bottom: 2rem;
width: min(57vw, 28rem);
font-size: 1.1rem;
transform: translateX(-37%);
}

.signup-heading h2 {
font-size: clamp(1.28rem, 2.3vw, 1.7rem);
}

.signup-form input {
height: clamp(2.55rem, 3.8vw, 3.1rem);
padding-left: clamp(2rem, 3.4vw, 2.5rem);
font-size: clamp(1.28rem, 2.3vw, 1.7rem);
}

.signup-button {
min-width: clamp(5.2rem, 10vw, 6.6rem);
height: clamp(2.55rem, 3.8vw, 3.1rem);
font-size: clamp(1.16rem, 2.12vw, 1.52rem);
}
}

@media (max-width: 47.9375rem) {
.coming-soon-page {
min-height: 34rem;
background-image: none;
}

.coming-art--left {
left: -2.8rem;
bottom: -6.35rem;
width: clamp(8.9rem, 38vw, 10.8rem);
max-height: none;
display: none;
}

.coming-art--right-side {
right: 0rem;
bottom: clamp(5.5rem, 13vh, 9rem);
width: clamp(15.2rem, 68vw, 19.2rem);
max-height: none;
}

.coming-art--right-top {
top: 0;
right: 0;
width: clamp(15.8rem, 82vw, 22rem);
max-height: none;
}

.coming-logo {
top: 0.62rem;
left: 0.72rem;
width: clamp(4.25rem, 20vw, 5.25rem);
}

.pink-note {
top: clamp(0.75rem, 4vh, 2.7rem);
right: clamp(5.05rem, 32vw, 6.7rem);
width: clamp(6.75rem, 32vw, 8.1rem);
min-height: clamp(5.7rem, 26vw, 6.8rem);
padding: 0.98rem 0.55rem 0.62rem;
font-size: clamp(0.78rem, 3.9vw, 1rem);
line-height: 1.22;
transform: rotate(-6deg);
}

.pink-note__tape {
top: -0.42rem;
height: 0.82rem;
}

.note-heart {
right: 0.5rem;
bottom: 1.18rem;
width: 0.92rem;
height: 0.86rem;
stroke-width: 3.2;
}

.note-underline {
right: 1.1rem;
bottom: 0.53rem;
left: 1.1rem;
height: 0.11rem;
}

.clarity-note {
top: clamp(24rem, 49vh, 27.2rem);
bottom: auto;
left: clamp(0.9rem, 5.5vw, 1.45rem);
width: clamp(7.05rem, 32.4vw, 8.9rem);
min-height: clamp(7.12rem, 32.4vw, 8.9rem);
padding: 0.9rem 0.64rem 0.72rem;
font-size: clamp(0.72rem, 3.6vw, 0.94rem);
line-height: 1.24;
}

.clarity-note p {
transform: translateY(0.62rem);
}

.clarity-note span {
width: 2.45rem;
height: 0.1rem;
margin-top: 0.1rem;
}

.clarity-note svg {
width: 1.16rem;
height: 1.08rem;
margin-top: 0.3rem;
}

.hero-copy {
top: clamp(10.7rem, 25.6vh, 12.4rem);
left: 50%;
width: min(86vw, 21.5rem);
min-width: 0;
transform: translateX(-50%);
}

.yellow-heart {
top: -1rem;
left: 38%;
width: clamp(1.15rem, 5.2vw, 1.45rem);
}

.coming-title__line--navy {
font-size: clamp(4.35rem, 20.8vw, 5.9rem);
line-height: 0.78;
}

.coming-title__line--pink {
margin-top: 0.18rem;
font-size: clamp(3.95rem, 19vw, 5.35rem);
line-height: 0.76;
transform: translateX(2.5%) rotate(0.7deg);
}

.coming-title__line--pink::after {
right: 17%;
bottom: -0.1em;
width: 56%;
}

.hero-tagline {
margin-top: clamp(0.78rem, 2.2vh, 1.15rem);
font-size: clamp(1.16rem, 5.05vw, 1.46rem);
}

.hero-tagline span {
padding-inline: 0.78em;
}

.hero-tagline-heart {
width: clamp(0.78rem, 3.7vw, 1.05rem);
margin-left: -0.78rem;
}

.hero-description {
margin-top: clamp(0.45rem, 1.5vh, 0.65rem);
font-size: clamp(0.74rem, 3.45vw, 0.92rem);
line-height: 1.45;
letter-spacing: 0.02em;
}

.hero-description::after {
width: 2.95rem;
height: 0.1rem;
}

.signup-panel {
left: 50%;
bottom: clamp(1.65rem, 4.2vh, 2.25rem);
width: min(86vw, 21rem);
transform: translateX(-50%);
}

.signup-heading {
gap: 0.34rem;
margin-bottom: 0.22rem;
}

.signup-heading svg {
width: clamp(1.55rem, 7.3vw, 2rem);
}

.signup-heading h2 {
font-size: clamp(0.58rem, 2.9vw, 0.74rem);
}

.signup-heading h2::after {
bottom: -0.22rem;
height: 0.08rem;
}

.signup-form {
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.42rem;
justify-items: stretch;
}

.signup-form input {
max-width: none;
width: 100%;
height: clamp(1.82rem, 8vw, 2.16rem);
padding-inline: 0.82rem 0.56rem;
border-width: 0.09rem;
font-size: clamp(0.6rem, 3.1vw, 0.8rem);
}

.signup-button {
min-width: clamp(3.4rem, 16vw, 4.2rem);
height: clamp(1.88rem, 8.3vw, 2.22rem);
border-width: 0.1rem;
box-shadow:
inset 0 0 0 0.09rem rgb(221 85 113 / 55%),
0.12rem 0.16rem 0 rgb(2 37 61 / 12%);
font-size: clamp(0.58rem, 2.95vw, 0.76rem);
}

.signup-button::before,
.signup-button::after {
width: 0.15rem;
height: 0.15rem;
}

.signup-button::before {
left: 0.25rem;
bottom: 0.22rem;
}

.signup-button::after {
right: 0.25rem;
top: 0.22rem;
}

.signup-footnote {
max-width: 12rem;
margin: 0.34rem 0 0 0.18rem;
font-size: clamp(0.55rem, 2.7vw, 0.7rem);
line-height: 1.15;
white-space: normal;
}
}

@media (max-width: 23.4375rem) {
.coming-soon-page {
min-height: 31rem;
}

.hero-copy {
top: clamp(7rem, 19vh, 8.15rem);
}

.coming-title__line--navy {
font-size: clamp(3.45rem, 17.8vw, 4.2rem);
}

.coming-title__line--pink {
font-size: clamp(3.1rem, 15.8vw, 3.8rem);
}

.clarity-note {
top: clamp(19rem, 42vh, 21rem);
}

.signup-panel {
width: min(88vw, 17rem);
}
}

@media (max-height: 42rem) and (max-width: 47.9375rem) {
.hero-copy {
top: 9.5rem;
width: min(76vw, 18rem);
}

.coming-title__line--navy {
font-size: clamp(3.3rem, 15.8vw, 4.35rem);
}

.coming-title__line--pink {
font-size: clamp(2.95rem, 14.2vw, 3.9rem);
}

.hero-tagline {
margin-top: 0.62rem;
}

.hero-description {
margin-top: 0.34rem;
}

.clarity-note {
top: 21rem;
}
}

@media (prefers-reduced-motion: reduce) {
.js-enabled .coming-art,
.js-enabled .coming-logo,
.js-enabled .pink-note,
.js-enabled .clarity-note,
.js-enabled .hero-copy,
.js-enabled .signup-panel,
.js-enabled.page-ready .coming-art,
.js-enabled.page-ready .coming-logo,
.js-enabled.page-ready .pink-note,
.js-enabled.page-ready .clarity-note,
.js-enabled.page-ready .hero-copy,
.js-enabled.page-ready .signup-panel {
opacity: 1;
translate: 0 0;
filter: none;
animation: none;
transition: none;
}
}