:root {
  --flow-modal-accent: #00c5ab;
  --flow-modal-bg: #050908;
  --flow-modal-panel: #0b100f;
  --flow-modal-line: rgba(255, 255, 255, .16);
  --flow-modal-text: #f4f7f6;
  --flow-modal-muted: rgba(244, 247, 246, .62);
}

body.flow-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.flow-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 28px);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility 0s linear .24s;
}

.flow-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.flow-modal__panel {
  width: min(1500px, 100%);
  height: min(940px, calc(100dvh - clamp(20px, 4vw, 56px)));
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--flow-modal-line);
  background: var(--flow-modal-panel);
  box-shadow: 0 32px 110px rgba(0, 0, 0, .72);
  transform: translateY(16px) scale(.985);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.flow-modal.is-open .flow-modal__panel { transform: none; }

.flow-modal__bar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 clamp(18px, 3vw, 34px);
  border-bottom: 1px solid var(--flow-modal-line);
  background: rgba(5, 9, 8, .98);
  color: var(--flow-modal-text);
}

.flow-modal__eyebrow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--flow-modal-accent);
}

.flow-modal__close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--flow-modal-line);
  background: transparent;
  color: var(--flow-modal-text);
  cursor: pointer;
  font: 400 28px/1 Arial, sans-serif;
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}

.flow-modal__close:hover {
  color: #04100e;
  border-color: var(--flow-modal-accent);
  background: var(--flow-modal-accent);
  transform: rotate(4deg);
}

.flow-modal__close:focus-visible {
  outline: 2px solid var(--flow-modal-accent);
  outline-offset: 2px;
}

.flow-modal__frame-wrap { position: relative; min-height: 0; background: var(--flow-modal-bg); }

.flow-modal__frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--flow-modal-bg);
}

.flow-modal__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--flow-modal-bg);
  color: var(--flow-modal-muted);
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .2s, visibility .2s;
}

.flow-modal__loading::before {
  content: '';
  width: 28px;
  height: 28px;
  margin-right: 14px;
  border: 2px solid rgba(0, 197, 171, .22);
  border-top-color: var(--flow-modal-accent);
  border-radius: 50%;
  animation: flow-modal-spin .8s linear infinite;
}

.flow-modal.is-ready .flow-modal__loading { opacity: 0; visibility: hidden; }

.flow-modal__notice {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 4;
  max-width: calc(100% - 32px);
  padding: 13px 18px;
  border: 1px solid rgba(0, 197, 171, .5);
  background: rgba(5, 9, 8, .96);
  color: var(--flow-modal-text);
  font: 700 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-align: center;
  transform: translate(-50%, 18px);
  opacity: 0;
  visibility: hidden;
  transition: .24s ease;
}

.flow-modal.is-complete .flow-modal__notice { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

@keyframes flow-modal-spin { to { transform: rotate(360deg); } }

html.flow-embedded,
html.flow-embedded body.flow-page {
  min-height: 100%;
  padding-top: 0 !important;
  background: #050908 !important;
}

html.flow-embedded body.flow-page #site-header,
html.flow-embedded body.flow-page #mobile-cta,
html.flow-embedded body.flow-page #wa-float,
html.flow-embedded body.flow-page #backToTop,
html.flow-embedded body.flow-page .back-to-top,
html.flow-embedded body.flow-page .flow-breadcrumb,
html.flow-embedded body.flow-page footer,
html.flow-embedded body.flow-page #cookieBanner {
  display: none !important;
}

html.flow-embedded body.flow-events > .marquee,
html.flow-embedded body.flow-events #events > .wrap > .section-head,
html.flow-embedded body.flow-events #events > .wrap > .evt-grid,
html.flow-embedded body.flow-events #events > .wrap > .event-collab-note,
html.flow-embedded body.flow-events #events > .wrap > .flow-launch {
  display: none !important;
}

html.flow-embedded body.flow-events #events > .wrap > .planner {
  margin-top: 0 !important;
}

html.flow-embedded body.flow-page > .section.flow-section {
  min-height: 100dvh !important;
  padding-top: clamp(24px, 4vw, 54px) !important;
  padding-bottom: 72px !important;
}

@media (max-width: 720px) {
  .flow-modal { padding: 0; }
  .flow-modal__panel { width: 100%; height: 100dvh; border: 0; grid-template-rows: 58px minmax(0, 1fr); }
  .flow-modal__bar { padding-left: 16px; }
  .flow-modal__eyebrow { font-size: 10px; }
  html.flow-embedded body.flow-page > .section.flow-section { padding-top: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-modal,
  .flow-modal__panel,
  .flow-modal__notice { transition: none; }
  .flow-modal__loading::before { animation: none; }
}