@font-face { font-family: Poppins; font-weight: 400; src: url(/fonts/Poppins-Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 600; src: url(/fonts/Poppins-SemiBold.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 700; src: url(/fonts/Poppins-Bold.ttf) format('truetype'); font-display: swap; }

/* Stirred's look (design/stirred-brand.md): Stirred Teal ground, white words, the Turquoise Don't trust button,
   Hema's white wordmark at the top and the Stir ghosted in from the corner. */
:root {
  --teal: #0F415A;
  --yellow: #FFC300;
  --turquoise: #00AABE;
  --white: #FFFFFF;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--teal);
  color: var(--white);
  overflow-x: hidden;
  font-family: Poppins, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  max-width: 560px;
  margin: 0 auto;
}

section { display: flex; flex-direction: column; gap: 24px; }

/* Small and out of the way: Hema's YELLOW wordmark in the top-left corner, at her 120 px minimum. */
.wordmark { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 20px; width: 120px; aspect-ratio: 2709 / 1065; background: url(/img/logo-yellow.png) left center / contain no-repeat; }
.stir { position: fixed; right: -38vw; bottom: -26vw; width: 95vw; max-width: 520px; aspect-ratio: 1 / 1; background: url(/img/stir-rev.png) center / contain no-repeat; opacity: 0.12; pointer-events: none; z-index: 0; }
main { position: relative; z-index: 1; }

.line {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
}

button {
  font: inherit;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--teal);
  border: 0;
  border-radius: 20px;
  min-height: 64px;
  width: 100%;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 80ms ease;
}
button:active { transform: scale(0.97); }
button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }

.dont { background: var(--turquoise); }
.big { min-height: max(64px, 40vh); font-size: 2rem; }

.sent {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 1.2rem;
  min-height: 1.6em;
}