/* Brand icons and navigation label fit. */
.iconify-arrow{display:inline-block;width:12px;height:12px;font-size:0!important;background:currentColor;mask:url('/assets/icons/arrow-up-right.svg') center/contain no-repeat;-webkit-mask:url('/assets/icons/arrow-up-right.svg') center/contain no-repeat}
@media(min-width:768px){
 .nav-dropdown{width:max-content;min-width:100%;max-width:min(320px,calc(100vw - 24px))}
 .nav-dropdown>a{gap:12px;align-items:center}
 .nav-dropdown [data-nav-label]{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
 .nav-dropdown .iconify-arrow{flex:0 0 12px}
 .nav-group:last-child>.nav-dropdown{left:auto;right:0}
}

/* The supplied Veilify mark stays transparent in the header and footer. */
.wordmark{gap:10px;font-size:20px;letter-spacing:-.035em;margin-right:0}
.brand-mark{display:block;flex:0 0 28px;width:28px;height:28px;object-fit:contain;background:transparent}
.wordmark .brand-name{padding:0;color:#fff;font-weight:650}
.footer-identity{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap}
.footer-bottom .footer-brand{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:650;letter-spacing:-.035em;text-transform:none;white-space:nowrap}
.footer-brand .brand-mark{width:24px;height:24px;flex-basis:24px}
.footer-bottom .footer-brand .brand-name{display:inline;color:#fff}
.hero-brand-mark{display:block;width:100%;height:100%;background:#000;mask:url('/assets/veilify-logo.svg') center/contain no-repeat;-webkit-mask:url('/assets/veilify-logo.svg') center/contain no-repeat}
@media(max-width:400px){
 .wordmark{padding:0 10px;gap:8px;font-size:18px}
 .wordmark .brand-mark{width:24px;height:24px;flex-basis:24px}
 .footer-identity{gap:10px 16px;max-width:100%}
}

.notes-brand{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.notes-brand .brand-mark{width:16px;height:16px;flex-basis:16px}

/* A closer opening composition on phones; scroll phases still drive the artwork. */
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
 .hero-scroll{height:150svh}
 .hero-scroll .hero{height:calc(100svh - 54px);min-height:480px;top:54px}
 .hero-scroll .hero-copy{top:clamp(64px,8svh,84px);width:calc(100% - 32px)}
 .hero-scroll .proof-core,.hero-scroll .hero-flood,.hero-scroll .hero-spark{top:calc(50% + 4svh)}
 .hero-scroll .scroll-cue{bottom:22px}
}