:root {
  --cream: #FFF8E9;
  --pink: #FF0099;
  --pink-dark: #D6007F;
  --ink: #000;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --script: 'Caveat', 'Comic Sans MS', cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }

.page { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 64px 24px; }

/* paint edges (cut from the approved visual) */
.paint { position: absolute; pointer-events: none; background-repeat: no-repeat; z-index: 0; }
.paint--left  { top: 0; height: 100%; aspect-ratio: 470 / 1024; left: min(0px, calc(31vw - 100vh * 470 / 1024)); background-image: url('paint-left.png');  background-size: 100% 100%; }
.paint--right { top: 0; height: 100%; aspect-ratio: 456 / 1024; right: min(0px, calc(30vw - 100vh * 456 / 1024)); background-image: url('paint-right.png'); background-size: 100% 100%; }
.paint--tl, .paint--tr, .paint--bl, .paint--br { display: none; }

.doodle { position: absolute; z-index: 1; pointer-events: none; }
.doodle--smiley { left: 16.6vw; top: 54.5%; width: clamp(70px, 8.4vw, 130px); }
.doodle--star   { right: 14.8vw; top: 54%;  width: clamp(70px, 8.7vw, 134px); }

.content { position: relative; z-index: 2; width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.logo { margin: 0; width: clamp(260px, 39vw, 600px); }
.logo img { width: 100%; }

.script { margin: clamp(22px, 3.2vh, 40px) 0 0; font-family: var(--script); font-weight: 600; font-size: clamp(46px, 5.1vw, 84px); line-height: .98; transform: rotate(-2.5deg); }
.underline { width: clamp(180px, 21vw, 334px); margin: 6px 0 0 clamp(20px, 3vw, 60px); }

.lede { margin: clamp(26px, 4vh, 44px) 0 0; font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; letter-spacing: .14em; }

.signup { margin-top: clamp(24px, 3.6vh, 40px); width: 100%; max-width: 604px; display: flex; background: #fff; border: 1.5px solid #E7E1D6; border-radius: 999px; padding: 0; }
.signup input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0 28px; height: 60px; font: 400 16px/1 var(--sans); color: var(--ink); border-radius: 999px 0 0 999px; }
.signup input::placeholder { color: #77706A; }
.signup input:focus { outline: none; }
.signup:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 0, 153, .18); }
.signup button { flex: none; height: 60px; padding: 0 36px; margin: -1.5px -1.5px -1.5px 0; border: 0; border-radius: 999px; background: var(--pink); color: #fff; font: 700 15px/1 var(--sans); letter-spacing: .14em; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.signup button:hover { background: var(--pink-dark); }
.signup button:active { transform: translateY(1px); }
.signup button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.signup button[disabled] { opacity: .7; cursor: progress; }
.signup.is-error { border-color: var(--pink); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.status { min-height: 1.6em; margin: 16px 0 0; font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.status.is-error { color: #C2006F; }
.thanks { margin-top: clamp(24px, 3.6vh, 40px); font-family: var(--script); font-weight: 600; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; }
.thanks small { display: block; margin-top: 10px; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .1em; }

/* tablet: keep paint strictly at the edges */
@media (max-width: 1100px) {
  .paint--left  { left: min(0px, calc(25vw - 100vh * 470 / 1024)); }
  .paint--right { right: min(0px, calc(25vw - 100vh * 456 / 1024)); }
  .doodle--smiley { left: 4vw; top: auto; bottom: 30%; }
  .doodle--star   { right: 4vw; top: auto; bottom: 34%; }
  .logo { width: clamp(260px, 46vw, 560px); }
}

/* mobile: paint moves to the four corners, copy sits clear between them */
@media (max-width: 720px) {
  .page { align-items: flex-start; padding: calc(40vw + 4px) 20px calc(44vw + 8px); }
  .paint--left, .paint--right { display: none; }
  .paint--tl, .paint--tr, .paint--bl, .paint--br { display: block; width: 52vw; }
  .paint--tl, .paint--tr { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .paint--bl, .paint--br { -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 55%, transparent 100%); }
  .paint--tl { top: 0; left: 0;  height: 40vw; background-image: url('paint-left.png');  background-size: 100% auto; background-position: left top; }
  .paint--tr { top: 0; right: 0; height: 42vw; background-image: url('paint-right.png'); background-size: 100% auto; background-position: right top; }
  .paint--bl { bottom: 0; left: 0;  height: 44vw; background-image: url('paint-left.png');  background-size: 100% auto; background-position: left bottom; }
  .paint--br { bottom: 0; right: 0; height: 40vw; background-image: url('paint-right.png'); background-size: 100% auto; background-position: right bottom; }
  .doodle--smiley { left: 41vw; bottom: 6vw; top: auto; width: 17vw; }
  .doodle--star   { right: 41vw; top: 20vw; bottom: auto; width: 16vw; }
  .content { max-width: 440px; }
  .logo { width: min(84vw, 380px); }
  .script { font-size: clamp(40px, 11.5vw, 56px); margin-top: 22px; }
  .underline { width: 52vw; margin-left: 10vw; }
  .lede { font-size: 15px; letter-spacing: .12em; margin-top: 24px; }
  .signup { flex-direction: column; background: transparent; border: 0; border-radius: 0; gap: 12px; }
  .signup:focus-within { box-shadow: none; }
  .signup input { height: 56px; border: 1.5px solid #E7E1D6; background: #fff; border-radius: 999px; text-align: center; }
  .signup input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 0, 153, .18); }
  .signup button { height: 56px; margin: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }