html .hbk { width: min(var(--pop-w, 560px), 100vw - 32px); max-width: none; max-height: min(800px, 100dvh - 2 * var(--pop-mv)); margin: auto; border-radius: var(--pop-r); }
html .hbk { --pop-w: 560px; }
html .hbk[open] { animation: pop-in 200ms cubic-bezier(.2, .8, .2, 1) both; }
html .hbk.is-closing { animation: pop-out 160ms cubic-bezier(.2, .8, .2, 1) both; }
html .hbk::backdrop, html .lt::backdrop { background: var(--pop-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
html .hbk[open]::backdrop { animation: pop-fade 160ms linear both; }
@keyframes pop-out { to { opacity: 0; transform: scale(.96); } }
html .lt__x { top: var(--pop-x); right: var(--pop-x); }

html .lt__paper { width: min(840px, 100% - 16px);  max-height: min(800px, 100dvh - 2 * var(--pop-mv)); border-radius: var(--pop-r); }

@media (max-width: 767.98px) {
  html .hbk { width: min(560px, 100vw - 32px); max-height: min(800px, 100dvh - 2 * var(--pop-mv)); margin: auto; padding: 0 20px 24px; border-radius: var(--pop-r); }
  html .hbk__head { margin: 0 -20px; padding: 28px 20px 16px; }
  html .hbk__grab { display: none; }
  html .hbk[open] { animation-name: pop-in; } html .hbk.is-closing { animation-name: pop-out; }
}

html .mnav { inset: 72px 16px auto 16px; width: auto; max-width: none; height: auto; max-height: calc(100dvh - 72px - 16px); margin: 0; padding: 0 16px 16px; border-radius: var(--pop-r); background: #FFFFFF; box-shadow: var(--rx-elev-3d, 0 16px 40px rgb(3 7 13 / .3)); }
@media (min-width: 768px) { html .mnav { left: auto; width: 400px; } }
html .mnav::backdrop { background: var(--pop-scrim); }
html .mnav[open] { animation: pop-in 200ms cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { html .hbk[open], html .mnav[open], html .hbk.is-closing { animation: pop-opacity 120ms linear both; } }
html[data-motion="off"] .hbk[open], html[data-motion="off"] .mnav[open], html[data-motion="off"] .hbk.is-closing, html[data-motion="off"] .hbk::backdrop { animation: none !important; }

html .hbk, html .lt__paper { overscroll-behavior: contain; }
@media (max-width: 767.98px) {
  html .hbk { inset-block: var(--pop-top) var(--pop-bar); margin-block: auto; max-height: var(--pop-band); }
  html .lt { box-sizing: border-box; padding: var(--pop-top) 0 var(--pop-bar); }
  html .lt__paper { max-height: var(--pop-band); }
}

html .lt__bar, html .lt__scroll { display: contents; }
html .lt__x { position: sticky; top: var(--pop-x); z-index: 2; float: right; margin: -16px -8px -44px 12px; box-shadow: 0 0 0 8px #FFFFFF; }
html .lt__paper { background: linear-gradient(#FFFFFF 30%, rgb(255 255 255 / 0)) 0 0 / 100% 28px local no-repeat, linear-gradient(rgb(255 255 255 / 0), #FFFFFF 70%) 0 100% / 100% 28px local no-repeat, radial-gradient(farthest-side at 50% 0, rgb(3 7 13 / .16), rgb(3 7 13 / 0)) 0 0 / 100% 10px scroll no-repeat, radial-gradient(farthest-side at 50% 100%, rgb(3 7 13 / .16), rgb(3 7 13 / 0)) 0 100% / 100% 10px scroll no-repeat, #FFFFFF; }
@media (max-width: 767.98px) {
  html .lt__paper { display: grid; grid-template-rows: 56px minmax(0, 1fr); overflow: hidden; padding: 0; background: #FFFFFF; }
  html .lt__bar { display: block; position: relative; background: #FFFFFF; border-radius: var(--pop-r) var(--pop-r) 0 0; }
  html .lt__x { position: absolute; top: 6px; right: 12px; float: none; margin: 0; box-shadow: none; }
  html .lt__scroll { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 32px; background: linear-gradient(#FFFFFF 30%, rgb(255 255 255 / 0)) 0 0 / 100% 16px local no-repeat, linear-gradient(rgb(255 255 255 / 0), #FFFFFF 70%) 0 100% / 100% 28px local no-repeat, radial-gradient(farthest-side at 50% 0, rgb(3 7 13 / .16), rgb(3 7 13 / 0)) 0 0 / 100% 10px scroll no-repeat, radial-gradient(farthest-side at 50% 100%, rgb(3 7 13 / .16), rgb(3 7 13 / 0)) 0 100% / 100% 10px scroll no-repeat, #FFFFFF; }
  html .lt__k { padding-right: 0; }
}

html .mnav { overscroll-behavior: contain; }
html .mnav__top { position: sticky; top: 0; z-index: 2; background: #FFFFFF; }

@media (min-width: 768px) and (max-height: 860px) {
  html .lt__paper { max-height: min(800px, 100dvh - 2 * var(--sp-5)); padding: var(--sp-6) var(--sp-7) var(--sp-5); }
  html .lt__k { margin-bottom: var(--sp-4); }
  html .lt__lead { line-height: 28px; }
  html .lt__p { line-height: 26px; margin-top: var(--sp-3); }
  html .lt__hi { margin: 0 0 var(--sp-3); }
  html .lt__sign { margin-top: var(--sp-4); line-height: 26px; }
  html .lt__off { margin-top: var(--sp-4); }
  html .lt__cta { margin-top: var(--sp-4); }
}
@media (max-width: 767.98px) {
  html .lt__paper { grid-template-rows: 48px minmax(0, 1fr); }
  html .lt__x { top: 2px; }
  html .lt__scroll { padding: 0 20px var(--sp-5); }
  html .lt__k { margin-bottom: var(--sp-4); }
  html .lt__lead { line-height: 26px; }
  html .lt__p { line-height: 24px; margin-top: var(--sp-3); }
  html .lt__hi { margin: 0 0 var(--sp-3); }
  html .lt__sign { margin-top: var(--sp-4); line-height: 24px; }
  html .lt__off { margin-top: var(--sp-4); }
  html .lt__cta { margin-top: var(--sp-4); }
}
@media (max-width: 767.98px) {
  html .lt { padding-bottom: var(--pop-top); }
  html .lt__paper { max-height: calc(100dvh - 2 * var(--pop-top)); }
}

@media (max-width: 374.98px) {
  html .lt__scroll { padding: 0 var(--sp-4) var(--sp-4); }
  html .lt__p { line-height: 22px; margin-top: var(--sp-2); }
  html .lt__lead { line-height: 24px; }
  html .lt__hi { margin: 0 0 var(--sp-2); }
  html .lt__k { margin-bottom: var(--sp-3); }
  html .lt__sign { margin-top: var(--sp-3); line-height: 22px; }
  html .lt__off, html .lt__cta { margin-top: var(--sp-3); }
}
@media (max-width: 374.98px) {
  html .lt { padding: max(var(--sp-2), env(safe-area-inset-top)) 0 max(var(--sp-2), env(safe-area-inset-bottom)); }
  html .lt__paper { max-height: calc(100dvh - max(var(--sp-2), env(safe-area-inset-top)) - max(var(--sp-2), env(safe-area-inset-bottom))); }
}

@media (max-width: 767.98px) { html .lt__x:focus-visible { outline-offset: 0; } }