body.wl { --wl-err: #f2a391; --wl-coin: clamp(220px, min(38vh, 34vw), 460px); background-color: var(--h5-bg); }
.wl-main { display: block; }
.wl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.wl-hero {
  position: relative; isolation: isolate; box-sizing: border-box; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(76px + clamp(20px, 4vh, 56px)) var(--h5-g) clamp(64px, 10vh, 120px);
}
.wl-bg { position: absolute; inset: 0; z-index: -1; background: var(--h5-bg); }

.wl-bg::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 16, 17, 0) 0%, rgba(15, 16, 17, 0.7) 60%, var(--h5-bg) 100%); }
.wl-hero-in { position: relative; width: 100%; max-width: 880px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.wl-coin { position: relative; flex: none; width: var(--wl-coin); aspect-ratio: 1 / 1; margin: 0 auto clamp(14px, 2.6vh, 32px); }
.wl-coin > .cp3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

.wl-coin--draw:not([data-cp3d-state="poster"]) > .cp3d-poster { opacity: 0; }

.wl-eyebrow { margin: 0 0 16px; font-size: var(--t-small); line-height: 1.35; font-weight: 500; color: var(--h5-accent); }
body.wl .wl-h {
  margin: 0; max-width: 13em; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: var(--t-display);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; color: var(--h5-ink); text-wrap: balance;
}
.wl-lead { margin: 18px 0 0; max-width: 34rem; font-size: var(--t-lead); line-height: 1.5; color: var(--h5-ink-2); text-wrap: balance; }


.wl-join { width: 100%; max-width: 560px; margin-top: clamp(28px, 4vh, 40px); }
.wl-form { margin: 0; }
.wl-bar {
  display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 64px; padding: 0 8px 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(15, 16, 17, 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -24px rgba(0, 0, 0, 0.5);
  transition: border-color 0.16s var(--h5-ease), box-shadow 0.16s var(--h5-ease);
}
.wl-bar:focus-within { border-color: rgba(127, 211, 164, 0.75); }
.wl-form.is-invalid .wl-bar { border-color: var(--wl-err); }
.wl-input {
  flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--h5-ink); font-family: "Cashpad Sans", ui-sans-serif, system-ui, sans-serif; font-size: 17px; line-height: 1.2; outline: none;
}
.wl-input::placeholder { color: var(--h5-ink-3); opacity: 1; }
.wl-input:-webkit-autofill { -webkit-text-fill-color: var(--h5-ink); caret-color: var(--h5-ink); transition: background-color 600000s 0s; }
.wl-btn { height: 48px; cursor: pointer; }
.wl-btn:disabled { cursor: progress; opacity: 0.7; }
.wl-err { margin: 10px 2px 0; font-size: var(--t-small); line-height: 1.4; color: var(--wl-err); text-align: left; }
.wl-err:empty { margin: 0; }
.wl-note { margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--h5-ink-3); }


.wl-done {
  display: flex; align-items: center; gap: 18px; box-sizing: border-box; padding: 12px 22px 12px 12px; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(15, 16, 17, 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -24px rgba(0, 0, 0, 0.5);
}
.wl-done[hidden], .wl-form[hidden] { display: none; }
.wl-done.is-in { animation: wl-rise 0.6s var(--h5-ease) both; }
.wl-done-art { flex: none; width: 84px; height: 84px; margin: 0; }
.wl-done-art .art-svg { display: block; width: 100%; height: 100%; }
.wl-done-tx { min-width: 0; }
body.wl .wl-done-h { margin: 0; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 500;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--h5-ink); outline: none; }
.wl-done-p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--h5-ink-2); overflow-wrap: anywhere; }
.wl-done-mail { color: var(--h5-ink); }
.wl-again { margin: 2px 0 0; padding: 8px 0; border: 0; background: none; color: var(--h5-ink-2); font-family: inherit; font-size: 14px; cursor: pointer; }
.wl-again:hover { color: var(--h5-accent); }


.wl-pts { padding: clamp(16px, 3vw, 56px) var(--h5-g) var(--h5-y); }
.wl-pts-list { box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 80px);
  max-width: var(--h5-max); margin: 0 auto; padding: 0; list-style: none; }
.wl-pt { margin: 0; text-align: center; }
.wl-pt-art { height: clamp(150px, 14vw, 250px); margin: 0 0 28px; }
.wl-pt-art .art-svg { display: block; width: 100%; height: 100%; }
body.wl .wl-pt-h { margin: 0; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: var(--t-h3); font-weight: 500;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--h5-ink); }
.wl-pt-p { margin: 10px auto 0; max-width: 21rem; font-size: var(--t-body); line-height: 1.5; color: var(--h5-ink-2); }

html:not(.w-mod-js) .wl-pt-art, html:not(.w-mod-js) .wl-done-art { display: none; }


@keyframes wl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.wl-hero-in > * { animation: wl-rise 0.9s var(--h5-ease) both; }
.wl-hero-in > :nth-child(2) { animation-delay: 0.08s; }
.wl-hero-in > :nth-child(3) { animation-delay: 0.14s; }
.wl-hero-in > :nth-child(4) { animation-delay: 0.2s; }
.wl-hero-in > :nth-child(5) { animation-delay: 0.26s; }
@media (prefers-reduced-motion: reduce) {
  .wl-hero-in > *, .wl-done.is-in { animation: none; }
  .wl-bar { transition: none; }
}


@media screen and (min-width: 1920px) {
  body.wl { --wl-coin: clamp(260px, min(40vh, 30vw), 520px); }
  .wl-hero-in { max-width: 1040px; }
  .wl-join { max-width: 600px; }
}
@media screen and (min-width: 2400px) and (min-height: 1200px) {
  body.wl { --wl-coin: clamp(300px, 40vh, 600px); }
  .wl-hero-in { max-width: 1240px; }
  .wl-join { max-width: 660px; }
  .wl-bar { height: 72px; }
  .wl-btn { height: 54px; padding: 0 24px; font-size: 17px; }
  .wl-input { font-size: 19px; }
  .wl-note { font-size: 15px; }
  .wl-eyebrow { font-size: 16px; }
  .wl-pt-p { max-width: 24rem; }
}
@media screen and (max-width: 767px) {
  body.wl { --wl-coin: clamp(200px, min(30vh, 62vw), 300px); }
  .wl-hero { justify-content: flex-start; padding-top: calc(68px + 28px); padding-bottom: 72px; }
  .wl-lead { margin-top: 14px; }
  .wl-pts-list { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 26rem; }
  .wl-pt-art { height: 168px; margin-bottom: 22px; }
}

@media screen and (max-width: 559px) {
  .wl-bar { flex-direction: column; align-items: stretch; gap: 10px; height: auto; padding: 0; border: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .wl-input {
    height: 56px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(15, 16, 17, 0.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); font-size: 16px;
    transition: border-color 0.16s var(--h5-ease);
  }
  .wl-input:focus { border-color: rgba(127, 211, 164, 0.75); }
  .wl-form.is-invalid .wl-input { border-color: var(--wl-err); }
  .wl-btn { width: 100%; height: 52px; }
  .wl-note { margin-top: 12px; }
  .wl-done { gap: 14px; padding: 12px 16px 12px 10px; }
  .wl-done-art { width: 68px; height: 68px; }
}