.hbk { --hbk-out: 180ms; box-sizing: border-box; width: min(560px, 100vw - 2 * var(--gutter)); max-width: none; max-height: calc(100dvh - 64px); margin: auto;
  padding: 0 32px var(--sp-6); border: 0; border-radius: var(--radius-card); background: #FFFFFF; color: var(--text); box-shadow: var(--rx-shadow-2);
  overflow: auto; overscroll-behavior: contain; }
.hbk::backdrop { background: rgba(3, 7, 13, .75); backdrop-filter: blur(4px); }
.hbk__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin: 0 -32px; padding: var(--sp-6) 32px 16px; background: #FFFFFF; }
.hbk__grab { display: none; }
.hbk__h { margin: 0; font: 600 var(--fs-h3)/1.15 var(--font-display); color: var(--text); }
.hbk__h:focus { outline: none; }   
.hbk__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0; padding: 0; border: 0;
  border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hbk__xi { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .hbk__x:hover { background: var(--line); } }
.hbk__body { min-width: 0; }

.hbk__inside { display: none; }
@media (min-width: 768px) {
  .hbk__inside { display: grid; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
  .hbk__inside li { display: flex; align-items: flex-start; gap: 12px; font: 400 var(--fs-body)/1.45 var(--font-body); color: var(--text-muted); }
  .hbk__inside li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; transform: rotate(45deg); background: var(--rx-maroon, #5A192F); }   
  .hbk__body:has(> form[hidden]) .hbk__inside { display: none; }   
}
.hbk .fm-done { min-height: 0 !important; }   
.hbk [data-fm-submit] { width: 100%; min-height: 52px; border-radius: var(--radius-cta); justify-content: center; }
.hbk[open] { animation: hbk-in var(--dur) var(--ease-out) both; }
.hbk[open]::backdrop { animation: hbk-fade var(--dur) var(--ease-out) both; }
.hbk.is-closing { animation: hbk-out var(--hbk-out) var(--ease-out) both; }
.hbk.is-closing::backdrop { animation: hbk-fade var(--hbk-out) var(--ease-out) reverse both; }
@keyframes hbk-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes hbk-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes hbk-fade { from { opacity: 0; } }
@media (max-width: 767.98px) {   
  .hbk { width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0 var(--gutter) calc(20px + env(safe-area-inset-bottom)); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .hbk__head { margin: 0 calc(-1 * var(--gutter)); padding: 28px var(--gutter) 16px; }
  .hbk__grab { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
  .hbk[open] { animation-name: hbk-up; }
  .hbk.is-closing { animation-name: hbk-down; }
}
@keyframes hbk-up { from { transform: translateY(100%); } }
@keyframes hbk-down { to { transform: translateY(100%); } }
html[data-motion="off"] .hbk, html[data-motion="off"] .hbk::backdrop { animation: none !important; }
html[data-motion="off"] .hbk { --hbk-out: 0ms; }
@media (prefers-reduced-motion: reduce) { .hbk { --hbk-out: 0ms; } }