* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: #fff;
  background: #00042a;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.screen {
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 56.25vw);
  overflow: hidden;
  background: linear-gradient(90deg, #00042a 21.154%, #12074a 37.981%, #2c0b7a 58.654%, #7316fb 100%);
}
.brand-mark {
  position: absolute;
  pointer-events: none;
  left: 27.760417vw;
  top: -17.552083vw;
  width: 72.447917vw;
  height: 82.604167vw;
  background: url("mark.svg") center / contain no-repeat;
  z-index: -1;
}
.corner-mark {
  position: absolute;
  pointer-events: none;
  left: -18.65vw;
  top: -9.669375vw;
  width: 34vw;
  height: 17.649427vw;
  background: url("corner.svg") center / contain no-repeat;
  z-index: -1;
}
.younited-logo {
  position: absolute;
  top: 1.666667vw;
  left: 1.875vw;
  width: 10.989583vw;
  height: auto;
}
.dhre-logo {
  position: absolute;
  top: 47.03125vw;
  left: 90.520833vw;
  width: 6.822917vw;
  height: 5.989583vw;
  object-fit: cover;
}
.message-panel {
  width: 37.8125vw;
  margin-left: 31.71875vw;
  padding-top: 6.145833vw;
}
h1 { margin: 0; font-size: inherit; }
.message-panel h1 { height: 3.125vw; padding-top: .3125vw; }
.message-panel h1 .lettering { display: block; width: 8.802083vw; height: auto; }
label, #counter, .thanks-panel p { font-size: 1.302083vw; line-height: 1.302083vw; }
label { display: block; }
input, textarea, button { font: inherit; }
input, textarea {
  display: block;
  width: 100%;
  border: 0;
  border-radius: .572917vw;
  color: #00042a;
  padding: .833333vw;
  font-size: 1.302083vw;
  line-height: 1.4;
}
input { height: 3.229167vw; margin: .677083vw 0 1.770833vw; background: #fff; }
textarea { height: 19.583333vw; margin-top: 1.041667vw; background: #f7f0e5; resize: none; }
#counter { margin-top: 2.291667vw; }
#counter.over, #status.error { color: #ffb6a9; }
#status { margin: 0; font-size: max(16px, 1.041667vw); line-height: 1.4; }
#status:not(:empty) { padding-top: .625vw; }
button, .button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: .572917vw;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
#done { width: 100%; height: 4.0625vw; margin-top: 1.041667vw; background: #1837ff; }
#done .lettering { width: 2.1875vw; height: auto; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 3px solid #fab74e; outline-offset: 5px; }
.thanks-panel { padding-top: 21.666667vw; text-align: center; }
.thanks-panel h1 { height: 2.8125vw; padding-top: .625vw; }
.thanks-panel h1 .lettering { display: block; width: 11.822917vw; height: auto; margin: 0 auto; }
.thanks-panel p { margin: 2.604167vw 0 1.927083vw; }
.thanks-panel .button { width: 23.28125vw; height: 3.59375vw; margin: 0 auto; background: #ff472f; }
.thanks-panel .button .lettering { width: 11.09375vw; height: auto; }
.thanks .brand-mark { background-image: url("mark.svg"); z-index: 1; }
.thanks .dhre-logo { top: 47.760417vw; left: 90.572917vw; }
/* Keep the landscape composition above; reflow for portrait tablets and phones. */
@media (max-width: 900px) and (max-aspect-ratio: 4/3) {
  .screen { min-height: 100svh; padding: 130px 24px 120px; }
  .younited-logo { top: 24px; left: 24px; width: 160px; }
  .dhre-logo, .thanks .dhre-logo { top: auto; left: auto; right: 24px; bottom: 24px; width: 80px; height: 70px; }
  .brand-mark { left: 5%; top: 0; width: 120%; height: 100%; background-size: cover; }
  .message-panel { width: 100%; max-width: 600px; margin: 0 auto; padding: 0; }
  .message-panel h1 { height: auto; padding: 0; margin-bottom: 26px; }
  .message-panel h1 .lettering { width: 169px; }
  label, #counter, .thanks-panel p { font-size: 18px; line-height: 1.4; }
  input, textarea { font-size: 20px; padding: 14px; border-radius: 8px; }
  input { height: 56px; margin: 12px 0 24px; }
  textarea { height: 260px; margin-top: 12px; }
  #counter { margin-top: 18px; }
  #status:not(:empty) { padding-top: 12px; }
  #done { height: 60px; margin-top: 18px; border-radius: 8px; }
  #done .lettering { width: 42px; }
  .thanks-panel { padding-top: max(60px, calc(38svh - 130px)); }
  .thanks-panel h1 { height: auto; padding: 0; }
  .thanks-panel h1 .lettering { width: 227px; }
  .thanks-panel p { margin: 32px auto; max-width: 460px; }
  .thanks-panel .button { width: min(100%, 360px); height: 60px; border-radius: 8px; }
  .thanks-panel .button .lettering { width: 213px; }
}

/* Isolated Figma text outlines preserve Komu New without requiring a webfont. */
.lettering { display: block; background: center / contain no-repeat; }
.lettering.leave-message { background-image: url("leave-message.svg"); aspect-ratio: 169 / 25; }
.lettering.done { background-image: url("done.svg"); aspect-ratio: 42 / 22; }
.lettering.thank-you { background-image: url("thank-you.svg"); aspect-ratio: 227 / 50; }
.lettering.write-another { background-image: url("write-another.svg"); aspect-ratio: 213 / 22; }